flutter - 如何在 Flutter 中将容器 block 对齐到屏幕的末尾？

Question

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

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

}

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

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

}