如何将列的子项与底部对齐 [英] How to align a Column's child to the bottom

问题描述

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

I'm trying to build a generic home page and I want to align the last child of my column (which contains all the widgets for the page) to the bottom of the screen but the widget wrapped in the Align is not moving. The following is what makes the most sense to me:

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

我在做什么错？ / p>

What am I doing wrong?

推荐答案

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

You can use Expanded to make the last widget expand to the whole remaining space.

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")
                  ],
                )))
      ]),
    );
  }
}

这是结果

这篇关于如何将列的子项与底部对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！