如何删除列内小部件之间的 space - Flutter

Question

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

这是代码：

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

Answer 1

mainAxisAlignment: MainAxisAlignment.center

Answer 2

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

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

输出：

Answer 3

编辑卡片小部件的边距

            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: [

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

如何删除列内小部件之间的 space - Flutter

How to remove space between widget inside column - Flutter

space

widget

dart

flutter