从横向的 ListTile 中删除左右填充答案

【问题标题】：Remove left & right padding from ListTile in landscape从横向的 ListTile 中删除左右填充
【发布时间】：2019-01-10 06:27:16
【问题描述】：

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

复制/粘贴到一个新文件并运行，注意在纵向视图中黑色背景的元素看起来更接近边缘，现在切换到横向查看差异。 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: () {},
                  ),
                )
              ],
            ),

          ));
    }
  }

【问题讨论】：

可以加个截图吗？我正在 iOS 模拟器上进行测试，它运行良好
查看更新@diegoveloper
也许这是一个安全区域？看看右侧如何有类似的填充？这很有趣
我也是这么想的，怎么解决？

标签： dart flutter

【解决方案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),),
        ),
    ),
);

【讨论】：

【解决方案2】：

将Scaffold 包裹在SafeArea 小部件中

  return SafeArea(
        child: Scaffold(
        ...

【讨论】：