如何删除列内小部件之间的空间 - Flutter答案

【问题标题】：How to remove space between widget inside column - Flutter如何删除列内小部件之间的空间 - Flutter
【发布时间】：2021-08-28 03:56:44
【问题描述】：

我有一个包含 2 个小部件的简单屏幕，我使用 Column 包装它，但第一个小部件和第二个小部件之间总是有很小的空间。有没有办法删除列中的空间。这是我想删除空间的图片：

这里是代码：

Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    width: cardWidth,
                    height: cardHeight,
                    child: Card(
                      // color: Colors.transparent,
                      shape: RoundedRectangleBorder(
                        side: BorderSide(color: Colors.white70, width: 1),
                        borderRadius: BorderRadius.circular(20),
                      ),
                      child: Padding(
                        padding: const EdgeInsets.fromLTRB(30, 30, 30, 30),
                        child: Container(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              ...
                              
                            ],
                          ),
                        ),
                      ),
                    ),
                  ),
                  Container(
                    width: sizeWidth - 135,
                    height: noteHeight,
                    child: Center(
                      child: Text("hi.."),
                    ),
                    decoration: BoxDecoration(
                        color: noteAuth,
                        border: Border.all(
                          color: noteAuth,
                        ),
                        borderRadius: BorderRadius.only(
                            bottomLeft: Radius.circular(15),
                            bottomRight: Radius.circular(15))),
                  )
                ],
              ),

【问题讨论】：

标签： flutter dart widget space

【解决方案1】：

您的父布局颜色和容器颜色都相同，然后您使用卡片并提供填充，这需要一些空间。

Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: double.infinity,
              color: Colors.red, // here you change your color
             // height: cardHeight,
              child: Card(
                // color: Colors.transparent,
                shape: RoundedRectangleBorder(
                  side: BorderSide(color: Colors.white70, width: 1),
                  borderRadius: BorderRadius.circular(20),
                ),
                child: Padding(
                  padding: const EdgeInsets.fromLTRB(30, 30, 30, 30),
                  child: Container(

                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [


                      ],
                    ),
                  ),
                ),
              ),
            ),
            Container(
              width: double.infinity - 135,
           //   height: noteHeight,
              child: Center(
                child: Text("hi.."),
              ),
              decoration: BoxDecoration(
                  color: Colors.yellow,
                  border: Border.all(
                    color: Colors.green,
                  ),
                  borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(15),
                      bottomRight: Radius.circular(15))),
            )
          ],
        )

输出：

【讨论】：

【解决方案2】：

编辑 Card 小部件的边距

            Container(
              width: double.infinity,
              color: Colors.red, // here you change your color
             // height: cardHeight,
              child: Card(
                // color: Colors.transparent,
                margin: EdgeInsets.all(0), //************* Here ********************
                shape: RoundedRectangleBorder(
                  side: BorderSide(color: Colors.white70, width: 1),
                  borderRadius: BorderRadius.circular(20),
                ),
                child: Padding(
                  padding: const EdgeInsets.fromLTRB(30, 30, 30, 30),
                  child: Container(

                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [

                      ],
                    ),
                  ),
                ),
              ),
            ),

【讨论】：

【解决方案3】：

mainAxisAlignment: MainAxisAlignment.center

【讨论】：

我在上面代码的第三行添加了mainAxisAlignment: MainAxisAlignment.center，但还是有空格