Flutter 在颤振中完全居中

我最近开始在flifter中开发，我很难将小部件完全集中在可用的视图空间中

这就是它的样子：

以下是我想要实现的目标：

这是我的代码：

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

---

嗯，有一个小部件！

---

对于Flatter中的大多数内容，只需将您想要的小部件集中在小部件中，您就应该实现您想要的。

使用

MainAxisSize.min

列的高度将根据其子级的组合高度，并且忽略来自父级的传入高度。这意味着您的柱高度已缩小到其子级

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

还有一种方法，您可以使用

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

编辑的列

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

---

你好我已经尝试用一个中心小部件包装我的第二列小部件，但是为了使它工作，我必须手动设置高度因子。