在 Flutter 中完全居中 Widget

Question

我最近开始使用 Flutter 进行开发，但我很难将一个 Widget 完全集中在可用的 space View 中。

这是它的样子：

这就是我想要实现的目标：

这是我的代码：

        LayoutBuilder(builder:
            (BuildContext context, BoxConstraints viewportConstraints) {
          return SingleChildScrollView(
            child: ConstrainedBox(
              constraints: BoxConstraints(
                minHeight: viewportConstraints.maxHeight,
              ),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Column(children: [
                    NavHeader("Deposit"),
                    BalanceHeader(widget.usd),
                  ]),
                  Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Text(
                        "How much do you want deposit?",
                        style:( 
                          ...
                        ),
                      ),
                      Container(
                        alignment: Alignment.center,
                        width: width * 0.4,
                        margin: EdgeInsets.only(top: 10),
                        child: Row(
                          ...
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          );
        }),
        bottomNavigationBar: BottomAppBar(
          ...
        ),
      ),
    );
  }

Answer 1

好吧，有一个小部件！对于 flutter 中的大多数事情，只需将你想要的小部件包裹在 Center 小部件中，你应该实现你想要的。

Answer 2

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children ... Your code
)

Answer 3

通过使用 MainAxisSize.min 列的高度将根据其 children 的组合高度和来自 parent 的传入高度将被忽略。这意味着您的列高已缩小到 children.

您可以使用 MainAxisSize.max 而不是 MainAxisSize.min 来达到列的最大高度。而且你还必须使用 mainAxisAlignment: MainAxisAlignment.center 将 children 对齐到列的中心。

你的第二列

Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    Text(
      "How much do you want deposit?",
         style:( 
           ...
         ),
       ),
     Container(
       alignment: Alignment.center,
       width: width * 0.4,
       margin: EdgeInsets.only(top: 10),
       child: Row(
         ...
       ),
     ),
   ],
 ),

已编辑列

Column(
  mainAxisSize: MainAxisSize.max,
  mainAxisAlignment: MainAxisAlignment.center
  children: [
    Text(
      "How much do you want deposit?",
         style:( 
           ...
         ),
       ),
     Container(
       alignment: Alignment.center,
       width: width * 0.4,
       margin: EdgeInsets.only(top: 10),
       child: Row(
         ...
       ),
     ),
   ],
 ),

Answer 4

您还可以使用 Column 小部件包装您的小部件，它仅适用于 X 坐标。

(已经说了，但是很差)

在 Flutter 中完全居中 Widget

Completely center Widget in Flutter

view

centering

dart

flutter

flutter-widget