Flutter 在列小部件中移动图像

我用

列

小部件包装这个图像，我只想移动一个图像来填充顶部的空间。看我的截图。怎么做

---

mainAxisAligment导致的顶部空间

Column(               
   mainAxisAlignment: MainAxisAlignment.spaceEvenly,

你能做的就是

Column(
                    //Delete mainAxisAlignment and use mainAxisSize
                    mainAxisSize: MainAxisSize.min, 
                    children: [

                    //Then you need to adjust spacing between widgets manually
                      Align(
                        alignment: Alignment.topCenter,
                        child: Container(
                          height: MediaQuery.of(context).size.height / 3,
                          decoration: BoxDecoration(
                            image: DecorationImage(
                                image: AssetImage("assets/images/circles.png"),
                                fit: BoxFit.cover),
                          ),
                        ),
                      ),

                      //You can do it using sizedBox
                      SizedBox(height: MediaQuery.of(context).size.height / 50,),
                      Text(
                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          fontSize: 14.0,
                          fontWeight: FontWeight.bold,
                        ),
                      ),

                      //or Wrap your widget with Padding
                      Padding(
                         padding: EdgeInsets.symmetric(vertical: MediaQuery.of(context).size.height / 50,),
                         child: RichText(
                            text: TextSpan(
                            style: TextStyle(color: Colors.black),
                            text: "Posted on ",
                            children: [
                               TextSpan(
                                  text: "17 June, 1999",
                                  style: TextStyle(color: Colors.pink),
                               ),
                           ],
                         ),
                        ),
                      ),

                      //or Margin
                      Container(
                        margin: MediaQuery.of(context).size.height / 50,
                        child: Row(
                           mainAxisAlignment: MainAxisAlignment.center,
                           children: [
                              Spacer(flex: 2),
                              Icon(Icons.chat),
                              Text("17"),
                              Spacer(flex: 1),
                              Icon(Icons.thumb_up),
                              Text("06"),
                              Spacer(flex: 2),
                          ],
                         ),
                        ),
                      )
                    ],
                  ),

---

设置

mainAxisAlignment:mainAxisAlignment.spaceBetween

它将自由空间均匀地放置在列的子项之间。

根据，这是主轴对齐的行为。空格均匀地

：

在两个孩子之间以及第一个和最后一个孩子之前和之后，均匀地放置自由空间的一半

这就是为什么即使您对子对象使用
Align
，它仍会根据可用空间进行操作，包括第一个子对象（即您的图像）之前的“半空间”。要实现所需的行为，请使用
Padding
和
MainAxisAlignment更新UI。spaceBetween
：

/。。。其他线路
卡片(
clipBehavior:Clip.antiAlias，
孩子：填充(
填充：边缘组。对称（垂直：20），
子：列(
mainAxisAlignment:mainAxisAlignment.spaceBetween，
儿童：[
对齐(
...

Column(
                    //Delete mainAxisAlignment and use mainAxisSize
                    mainAxisSize: MainAxisSize.min, 
                    children: [

                    //Then you need to adjust spacing between widgets manually
                      Align(
                        alignment: Alignment.topCenter,
                        child: Container(
                          height: MediaQuery.of(context).size.height / 3,
                          decoration: BoxDecoration(
                            image: DecorationImage(
                                image: AssetImage("assets/images/circles.png"),
                                fit: BoxFit.cover),
                          ),
                        ),
                      ),

                      //You can do it using sizedBox
                      SizedBox(height: MediaQuery.of(context).size.height / 50,),
                      Text(
                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          fontSize: 14.0,
                          fontWeight: FontWeight.bold,
                        ),
                      ),

                      //or Wrap your widget with Padding
                      Padding(
                         padding: EdgeInsets.symmetric(vertical: MediaQuery.of(context).size.height / 50,),
                         child: RichText(
                            text: TextSpan(
                            style: TextStyle(color: Colors.black),
                            text: "Posted on ",
                            children: [
                               TextSpan(
                                  text: "17 June, 1999",
                                  style: TextStyle(color: Colors.pink),
                               ),
                           ],
                         ),
                        ),
                      ),

                      //or Margin
                      Container(
                        margin: MediaQuery.of(context).size.height / 50,
                        child: Row(
                           mainAxisAlignment: MainAxisAlignment.center,
                           children: [
                              Spacer(flex: 2),
                              Icon(Icons.chat),
                              Text("17"),
                              Spacer(flex: 1),
                              Icon(Icons.thumb_up),
                              Text("06"),
                              Spacer(flex: 2),
                          ],
                         ),
                        ),
                      )
                    ],
                  ),