Flutter中列内的容器之间不需要的间距

Posted 2023-02-23

【中文标题】Flutter中列内的容器之间不需要的间距

【英文标题】：Unwanted spacing between Containers inside Column in Flutter

【发布时间】：2021-09-29 16:02:34

【问题描述】：

我有一个列小部件，里面有两个容器小部件。两个容器小部件都有两个列表视图构建器。第一个列表视图构建器水平交叉，第二个垂直滚动。我面临的问题是带有垂直列表视图构建器的第二个容器。两个容器之间有很多不需要的空间。我没有在它们之间添加任何边距或间距。所以我不知道这个空间是从哪里来的。

代码如下所示：此小部件包含垂直列表，其中包含水平列表

class _HomeDataState extends State<HomeData> 
  @override
  Widget build(BuildContext context) 
    //final userData = Provider.of<UserData>(context);
    return SingleChildScrollView(
      child: Column(
        children: [
          VerticalList(),
        ],
      ),
    );
  


class VerticalList extends StatelessWidget 
  //const VerticalList(Key? key) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return Column(
      //mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Container(
          margin: EdgeInsets.only(top: 140),
          color: Colors.transparent,
          height: 188,
          child: HorizontalList(),
        ),
        Container(
          //color: Colors.amber,
          // margin: EdgeInsets.only(top: 0),
          child: ListView.builder(
            physics: ClampingScrollPhysics(),
            shrinkWrap: true,
            scrollDirection: Axis.vertical,
            itemCount: 10,
            itemBuilder: (context, int index) 
              return VerticalTile();
            ,
          ),
        ),
      ],
    );
  


class HorizontalList extends StatelessWidget 
  //const HorizontalList( Key? key ) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return Container(
      child: ListView.builder(
        physics: ClampingScrollPhysics(),
        shrinkWrap: true,
        scrollDirection: Axis.horizontal,
        itemCount: 10,
        itemBuilder: (context, int index) 
          bool first = index == 0;
          return HorizontalTile(first: first);
        ,
      ),
    );
  


class VerticalTile extends StatelessWidget 
  //const VerticalTile(Key? key) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return Container(
      height: 465,
      margin: EdgeInsets.fromLTRB(30, 0, 30, 24),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        color: const Color(0xffF9F9ED),
        boxShadow: [
          BoxShadow(
            color: const Color(0xff131200).withOpacity(0.20),
            spreadRadius: 1,
            blurRadius: 8,
            offset: Offset(3, 3), // changes position of shadow
          ),
        ],
      ),
      child: Text('Container'),
    );
  


class HorizontalTile extends StatelessWidget 
  final bool first;
  //const HorizontalTile(Key? key) : super(key: key);
  HorizontalTile(this.first);

  @override
  Widget build(BuildContext context) 
    return Container(
      height: 168,
      width: 122,
      margin: first
          ? EdgeInsets.fromLTRB(15, 23, 0, 23)
          : EdgeInsets.fromLTRB(10, 23, 0, 23),
      decoration: BoxDecoration(
        color: const Color(0xffF9F9ED),
        borderRadius: BorderRadius.circular(20),
        boxShadow: [
          BoxShadow(
            color: const Color(0xff131200).withOpacity(0.20),
            spreadRadius: 1,
            blurRadius: 8,
            offset: Offset(3, 3), // changes position of shadow
          ),
        ],
      ),
      child: Text('Container'),
    );
  

我的目标是删除这个间距，因为我希望能够在它们之间定义自己的间距。

[已编辑]

我已为具有此间距的容器添加了一种颜色。但是，此容器没有添加间距。

更新代码：

class VerticalList extends StatelessWidget 
  //const VerticalList(Key? key) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return Column(
      //mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Container(
          margin: EdgeInsets.only(top: 140),
          color: Colors.transparent,
          height: 188,
          child: HorizontalList(),
        ),
        Container(
          color: Colors.amber, //Added the color here
          // margin: EdgeInsets.only(top: 0),
          child: ListView.builder(
            physics: ClampingScrollPhysics(),
            shrinkWrap: true,
            scrollDirection: Axis.vertical,
            itemCount: 10,
            itemBuilder: (context, int index) 
              return VerticalTile();
            ,
          ),
        ),
      ],
    );
  

这是小部件在 devtools 中的外观

【问题讨论】：

找出这个空间来自哪里的一种方法：如果你打开 Flutter DevTools，你可以启用调试绘制。这将显示 2 个视图中的哪一个导致了这个空间

我在容器中添加了一种颜色来显示间距的来源。我也添加了代码和图像

你可以试试这个重构的代码并告诉我：gist.github.com/omishah/adfac5389f697cfe9d31367a8b6a13ce

gist.github.com/omishah/adfac5389f697cfe9d31367a8b6a13ce - 试过这个，仍然得到相同的结果

【参考方案1】：

向您的列表视图构建器添加零填充。在 ios 平台中有默认填充，但在 android 平台中没有。

   ListView.builder(
        
        padding: EdgeInsets.zero,
        physics: ClampingScrollPhysics(),
        shrinkWrap: true,
        ///your code

【讨论】：

哇！非常感谢！很长一段时间以来，我一直在努力解决这个问题。这立即解决了问题。

【参考方案2】：

您是否尝试将它们包装在 Expanded 或 Flexible 小部件上？在容器上

【讨论】：

是的，当我用 Expanded 小部件替换容器时，我收到一个错误，指出渲染框未布置 I/flutter (10149)：引发另一个异常：RenderBox 未布置：RenderRepaintBoundary #3bd63 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE I/flutter (10149)：引发另一个异常：RenderBox 未布置：RenderRepaintBoundary#fb0af NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE