Dart 拆下左侧和右侧；从横向中的ListTile右填充

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

          ));
    }
  }

导入“包装：颤振/材料.省道”；
void main（）{
runApp（TestApp（））；
}
类TestApp扩展了StatefulWidget{
_TestAppState createState（）=>new_TestAppState（）；
}
类_TestAppState扩展状态{
@凌驾
小部件构建（构建上下文）{
返回新材料PP(
debugShowCheckedModeBanner:false，
主页：新测试仪（），
)
;
}
}
类测试器扩展StatefulWidget{
测试器（{Key}）：超级（Key:Key）；
_TesterState createState（）=>new_TesterState（）；
}
类_TesterState扩展状态
使用SingleTickerProviderStateMixin{
final TextEditingController searchQuery=新TextEditingController（）；
ScrollController\u ScrollController；
清单项目；
选项卡控制器选项卡控制器；
@凌驾
void initState（）{
项目=列表。生成（50，（i）=>“项目$i”）；
_scrollController=新的scrollController（）；
tabContoller=新的TabController(
vsync:这个,，
长度：1，
);
}
@凌驾
小部件构建（构建上下文）{
归还新脚手架(
appBar:appBar(
标题：文本（“测试仪”），
),
正文：嵌套滚动视图(
控制器：\ u滚动控制器，
班主任：
（BuildContext控件，布尔InnerBoxIscrowled）{
返回[]；
},
正文：
塔巴视图(
控制器：tabContoller，
儿童：[
新标签(
子：刷新指示器(
子：自定义滚动视图(
条子：[
银表(
委托：SliverChildListDelegate(
列表。生成（50，（i）{
返回列表块(
contentPadding:仅限边集（左：0.0，右：0.0），
标题：集装箱(
颜色：颜色，黑色，
子项：文本（'${items[i]}'，样式：TextStyle（颜色：Colors.white），）
),
);
})
),
)
],
),
onRefresh:（）{}，
),
)
],
),
));
}
}

---

将您的

脚手架

包裹在

安全区

小部件内

  return SafeArea(
        child: Scaffold(
        ...

---

将您的

Scaffold

包装在

SafeArea

小部件中

  return SafeArea(
        child: Scaffold(
        ...

---

看起来很像，因为

listile

小部件将其内容包装在

SafeArea

小部件中，该小部件在其内容周围添加了填充。我假设这在带有凹口的设备上更为明显

解决方法是将您的

listile

包装在

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),),
        ),
    ),
);

---

看起来很像，因为

listile

小部件将其内容包装在

SafeArea

小部件中，该小部件在其内容周围添加了填充。我假设这在带有凹口的设备上更为明显

解决方法是将您的

listile

包装在

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),),
        ),
    ),
);

---

你能加个截图吗？我在iOS模拟器上测试，效果很好。请看update@diegoveloperMaybe。这是一个安全区域吗？看到右侧有类似的填充物了吗？这很有趣，我也这么认为，我如何修复它？你能添加一个屏幕截图吗？我在iOS模拟器上测试，效果很好。请看update@diegoveloperMaybe。这是一个安全区域吗？看到右侧有类似的填充物了吗？这很有趣，我也这么认为，我该怎么解决呢？