在 Flutter 中完全居中 Widget

如何解决在 Flutter 中完全居中 Widget

我最近开始在 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 中的大多数事情，只需将您想要的小部件包裹在 Center 小部件内居中，您就应该实现您想要的。

,

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

您可以使用 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?",

,

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