如何将列的子项与底部对齐

Question

我正在尝试构建通用主页，我想将列的最后一个子项（包含该页面的所有小部件）对齐到屏幕底部，但是Align中包装的小部件没有移动。以下是对我最有意义的内容：

Column(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[
    ChildA(),
    ChildB(),
    Align(
      alignment: Alignment.bottomCenter,
      child: BottomAlignedChild()
    )
  ]
)

我究竟做错了什么？

Answer 1

您可以使用Expanded使最后一个小部件扩展到整个剩余空间。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Layout',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Align Bottom Demo"),
      ),
      body: new Column(children: <Widget>[
        new Text("Text 1"),
        new Text("Text 2"),
        new Expanded(
            child: new Align(
                alignment: Alignment.bottomCenter,
                child: new Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    new Icon(Icons.star),
                    new Text("Bottom Text")
                  ],
                )))
      ]),
    );
  }
}

这是结果

Answer 2

对于 Column 或 Row 中的此类情况，我一直使用Spacer。Spacer 占据了 Row/Column 的两个小部件之间的所有可用空间。

对于给定的示例，您可以尝试以下

     Column(
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        ChildA(),
        ChildB(),
        Spacer(),
        BottomAlignedChild()
     
      ]
    )

Answer 3

有多种方法可以做到这一点。

1. 使用Spacer：

   Column(
     children: <Widget>[
       TopContainer(),
       Spacer(), // <-- Spacer
       BottomContainer(),
     ],
   )
   

2. 使用mainAxisAlignment：

   Column(
     mainAxisAlignment: MainAxisAlignment.spaceBetween, // <-- spaceBetween
     children: <Widget>[
       TopContainer(),
       BottomContainer(),
     ],
   )
   

3. 结合Expanded和Align：

   Column(
     children: <Widget>[
       TopContainer(),
       Expanded(
         child: Align(
           alignment: Alignment.bottomCenter,
           child: BottomContainer(),
         ),
       ),
     ],
   )
   

截图（所有人都一样）