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

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

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

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

Answer 3

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

使用Spacer：

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

使用mainAxisAlignment：

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

结合Expanded和Align：

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

截图（所有人都一样）

Answer 4

如果您可以灵活地将列更改为堆栈，则可以执行以下操作。

body: Container(
    child: Stack(children: <Widget>[
      Text('Text 1'),
      Text('Text 2'),
      Align(
        alignment: Alignment.bottomCenter,
        child: Text(
          "Text in bottom",
        ),
      ),
    ]),
  ),

Answer 5

您可以尝试将需要放在顶部的小部件包装在另一个“列”小部件内，从而使根小部件仅包含两个子级。第一个子项包含需要在顶部对齐的所有小部件，第二个子项包含将在底部放置的小部件。现在，您使用mainAxisAlignment: MainAxisAlignment.spaceBetween将第一个孩子对齐到顶部，第二个对齐到底部。

Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[
    Column(
      children: <Widget>[
        ChildA(),
        ChildB(),
      ]
    ),
    BottomAlignedChild(),
 ]
);

如何将列的孩子对齐到底部

5 个答案: