Question

尝试从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: () {},
                  ),
                )
              ],
            ),

          ));
    }
  }

Answer 1

在org.example.basic.Supplier#qqa小部件中包装Scaffold

SafeArea

Answer 2

之所以喜欢它，是因为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),),
        ),
    ),
);

从风景中的ListTile删除左右填充

2 个答案: