减少 Flutter 中 Column 小部件之间的空间（使用 Expanded）答案

【问题标题】：Reduce space between Column widgets (using Expanded) in Flutter减少 Flutter 中 Column 小部件之间的空间（使用 Expanded）
【发布时间】：2021-10-25 06:50:22
【问题描述】：

如您所见，这是一个列。
列包含展开的行。
列包含一个包含图像的 GestureDetector。

此列的子级之间存在巨大差距。是因为Expanded吗？

如果是，那么什么时候应该使用 Expanded，在这种情况下应该使用什么来代替它？

    return new Scaffold(
      body: new Column(

        children: <Widget>[

          SizedBox( height: 220,),
          new Expanded(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                GestureDetector(
                  onTap: () {
                    setState(() {
                    });
                  },
                  child: Container(
                    child: Image.network(
                      'https://picsum.photos/250?image=9', height: 70, width: 70),
                  ),
                ),

                GestureDetector(
                  onTap: () {
                    setState(() {
                    });
                  },
                  child: Image.network('https://picsum.photos/250?image=9', height: 70, width: 70),
                ),
                
              ],
            )
          ),

          GestureDetector(
                  onTap: () {
                    setState(() {
                    });
                  },
                  child: Container(
                    padding: const EdgeInsets.all(8),
                    child: Image.network('https://picsum.photos/250?image=9', height: 70, width: 70),
                  ),
                ),
        ],
      ),
    );

【问题讨论】：

是的，这是因为 Expanded 小部件。页面顶部的空间被SizedBox 覆盖。页面底部有一张图片。这两者之间的剩余空间被中间的Expanded 小部件占据。
扩展 == "尽可能多地占用空间"
为避免这种情况，您可以删除展开的小部件或将其替换为Flexible 小部件
是的，灵活是很好的解决方案@EhsanAskari
你可以查看这个问题stackoverflow.com/q/68907525/10157127

标签： flutter dart

【解决方案1】：

你想喜欢这个吗，只需删除你的 expanded 并替换为 Flexible 就像 Ehsan 说的那样

    return new Scaffold(
      body: Column(
          children: <Widget>[
            SizedBox( height: 220,),
            Flexible(
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceEvenly, // here you need to change
                children: [
                  GestureDetector(
                    onTap: () {
                      setState(() {
                      });
                    },
                    child: Container(
                      child: Image.network(
                          'https://picsum.photos/250?image=9', height: 70, width: 70),
                    ),
                  ),

                  GestureDetector(
                    onTap: () {
                      setState(() {
                      });
                    },
                    child: Image.network('https://picsum.photos/250?image=9', height: 70, width: 70),
                  ),

                ],
              ),
            ),

            GestureDetector(
              onTap: () {
                setState(() {
                });
              },
              child: Container(
                padding: const EdgeInsets.all(8),
                child: Image.network('https://picsum.photos/250?image=9', height: 70, width: 70),
              ),
            ),
          ],
        ),
    );

输出：

【讨论】：