在 Flutter 中完全居中 Widget答案

【问题标题】：Completely center Widget in Flutter在 Flutter 中完全居中 Widget
【发布时间】：2021-07-28 22:12:20
【问题描述】：

我最近开始使用 Flutter 进行开发，但在将 Widget 完全集中在 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(
          ...
        ),
      ),
    );
  }

【问题讨论】：

标签： flutter dart view centering flutter-widget

【解决方案1】：

通过使用MainAxisSize.min Column 的高度将根据其子项的组合高度，而从父项传入的高度将被忽略。这意味着您的列高度已缩小到其子项。

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

你的第二个专栏

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(
         ...
       ),
     ),
   ],
 ),

【讨论】：

【解决方案2】：

嗯，有一个小部件可以做到这一点！至于颤振中的大多数事情，只需将您想要的小部件包裹在一个 Center 小部件中，您应该可以实现您想要的。

【讨论】：

嗨！我已经尝试用 Center Widget 包装我的 2nd Column Widget，但要使其正常工作，我必须手动设置 heightFactor。

【解决方案3】：

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

【讨论】：