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

Posted

技术标签:

【中文标题】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

以上是关于Flutter中列内的容器之间不需要的间距的主要内容,如果未能解决你的问题,请参考以下文章

拆分python中不同列中列内的字典列表

不能将 ListView 放在 Column 中颤动?

修剪列内的额外空白

使用一列内的数据进行非配对t检验

根据列内的值比较两个数据框

颤振 |右对齐不起作用