dart - 从横向的 ListTile 中删除左右填充

Question

尝试从 ListTile 小部件中删除左右填充，以便元素看起来更靠近边缘。我已将两侧的属性“contentpadding”设置为 0，这在纵向模式下工作正常，但当我切换到横向时，填充仍然可见。我在下面包含了一个示例应用程序。

复制/粘贴到一个新文件中并运行，注意在纵向 View 中黑色背景的元素看起来更靠近边缘，现在切换到横向 View 以查看差异。 contentpadding 属性似乎被忽略了。

import 'package:flutter/material.dart';
void main() {
  runApp(TestApp());
}

class TestApp extends StatefulWidget {
  _TestAppState createState() => new _TestAppState();

}

class _TestAppState extends State<TestApp> {

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(

      debugShowCheckedModeBanner: false,
      home: new Tester(),
    )
    ;
  }
}

class Tester extends StatefulWidget {

  Tester({Key key}) : super(key: key);

  _TesterState createState() => new _TesterState();
}

class _TesterState extends State<Tester>
    with SingleTickerProviderStateMixin {
  final TextEditingController searchQuery = new TextEditingController();
  ScrollController _scrollController;
  List<String> items;
  TabController tabContoller;

  @override
  void initState() {
    items = List<String>.generate(50, (i) => "Item $i");
    _scrollController = new ScrollController();
    tabContoller = new TabController(
      vsync: this,
      length: 1,
    );
  }

    @override
    Widget build(BuildContext context) {
      return new Scaffold(
        appBar: AppBar(
          title: Text("Tester"),
        ),
          body: NestedScrollView(
            controller: _scrollController,
            headerSliverBuilder:
                (BuildContext contrxt, bool innerBoxIsScrolled) {
              return <Widget>[];
            },

            body:
            TabBarView(
              controller: tabContoller,
              children: <Widget>[
                new Tab(
                  child: RefreshIndicator(
                    child: CustomScrollView(
                      slivers: <Widget>[
                        SliverList(
                          delegate: SliverChildListDelegate(
                              List<Widget>.generate(50, (i) {
                                return ListTile(
                                  contentPadding: EdgeInsets.only(left: 0.0, right: 0.0),
                                  title: Container(
                                      color: Colors.black,
                                      child: Text('${items[i]}', style: TextStyle(color: Colors.white),)
                                  ),
                                );
                              })
                          ),
                        )
                      ],
                    ),
                    onRefresh: () {},
                  ),
                )
              ],
            ),

          ));
    }
  }

Answer 1

看起来像，因为 ListTile 小部件将其内容包装在 SafeArea 小部件中，该小部件在其内容周围添加了填充。我假设这在带有缺口的设备上更明显/仅更明显。

解决方法是将您的 ListTile 包装在 MediaQuery 中，不填充:

return MediaQuery(
    data: MediaQueryData(padding: EdgeInsets.zero),
    child: ListTile(
        contentPadding: EdgeInsets.only(left: 0.0, right: 0.0),
        title: Container(
            color: Colors.black,
            child: Text('${items[i]}', style: TextStyle(color: Colors.white),),
        ),
    ),
);