如何将容器块对齐到 Flutter 中的屏幕末尾？

Question

在我的 Flutter 项目中，我已经初始化了一个容器。在该容器内，我有一个子“列”，在其中我初始化了 3 个图标作为我的小部件。所以，我想将整个容器块（下图中的白色块）垂直对齐到屏幕的末端。据我从文档中知道，它可以通过以下命令完成-

mainAxisAlignment: MainAxisAlignment.end

但它在这里不起作用并显示以下输出-

这是我的代码-

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.blue,
        body: SafeArea(

          child: Container(
            color: Colors.white,
            child: Column(

              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.end,

              children: <Widget>[
                Icon(Icons.star, size: 50),
                Icon(Icons.star, size: 50),
                Icon(Icons.star, size: 50),
              ],
            )
          ),
        ),
      ),
    );
  }

}

所以，我需要帮助来了解如何将白色块对齐到屏幕的末端。

Answer 1

是的，这是因为默认情况下容器和列在屏幕的左上角对齐。 MainAxisAlignment.end 实际上是有效的，只是你的列太短了，以至于 .end 和 .start 在对齐方面基本相同。你需要做的是：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.blue,
        body: SafeArea(
          child: Align(
            widthFactor: double.infinity,
            heightFactor: double.infinity,
            alignment: Alignment.bottomRight,
            child: Container(
                color: Colors.white,
                child: Column(

                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.end,

                  children: <Widget>[
                    Icon(Icons.star, size: 50),
                    Icon(Icons.star, size: 50),
                    Icon(Icons.star, size: 50),
                  ],
                )
            ),
          ),
        ),
      ),
    );
  }

}

Answer 2

尝试使用crossAxisAlignment: CrossAxisAlignment.end 而不是mainAxisAlingment。

编辑： 正如@Stephen 提到的，您需要全高才能对齐孩子。 除此之外，您还可以为容器设置全宽，以使子项恰好位于屏幕的末尾。

注意：顶级小部件通常约束子级小部件！

body: SafeArea(

          child: Container(
            color: Colors.white,
            width: double.infinity,
            child: Column(

              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.end,
              crossAxisAlignment: CrossAxisAlignment.end,

              children: <Widget>[
                Icon(Icons.star, size: 50),
                Icon(Icons.star, size: 50),
                Icon(Icons.star, size: 50),
              ],
            )
          ),
        ),

如果你想保持图标的高度，你可以使用堆栈来代替。它看起来像这样：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.blue,
        body: SafeArea(
          child: Stack(
            children: <Widget>[
              Positioned(
                bottom: 0,
                left: 0,
                right: 0,
                top: 0,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.end,
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: <Widget>[
                    Icon(Icons.star, size: 50),
                    Icon(Icons.star, size: 50),
                    Icon(Icons.star, size: 50),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Answer 3

您只需将mainAxisSize: MainAxisSize.min 更改为mainAxisSize: MainAxisSize.max

目前，您的列小部件只是让自己尽可能高。更改为 MainAxisSize.max 将使其扩展到您正在寻找的全高度。

进一步阅读： https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e