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

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

当前，列小部件仅使自身达到所需的高度。更改为MainAxisSize.max会将其扩展到您要寻找的完整高度。

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

Answer 2

是的，这是因为默认情况下容器和列在屏幕的左上角对齐。 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 3

尝试使用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),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

如何在Flutter中将容器块与屏幕的末端对齐？

3 个答案: