如何将 Column 的子元素与底部对齐答案

【问题标题】：How to align a Column's child to the bottom如何将 Column 的子元素与底部对齐
【发布时间】：2023-04-07 23:49:01
【问题描述】：

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

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

我做错了什么？

【问题讨论】：

什么不起作用？
尝试在最后一个小部件之前添加new Flexible(child: new Container()),。不过可能有更好的方法。
@GünterZöchbauer 最后一个孩子不在屏幕底部，列是否包裹了它的孩子？我试图扩展列，但它就消失了
控制台有错误吗？
将Align 包装成Expanded 很可能是想要的效果

标签： dart flutter

【解决方案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")
                  ],
                )))
      ]),
    );
  }
}

这是结果

【讨论】：

谢谢...这对我尝试实现 bottomLeft 对齐非常有帮助。
这是将相应的小部件缩放到宽度的大小。 @IrshadKumail 的回答正确而简单。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

有多种方法。

使用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(),
      ),
    ),
  ],
)

屏幕截图（所有人都一样）

【讨论】：

【解决方案5】：

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

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

【讨论】：