Flutter在屏幕底部中心对齐自定义底部？

Question

我的自定义按钮未在屏幕底部中心对齐，现在我的自定义按钮位于容器底部的中心。它只是下面代码的一部分。关于如何修复以使我的自定义按钮出现在屏幕底部中心的任何想法？

  class _MainMenuState extends State<MainMenu> {

       @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(
        title: Header(text: 'Home', style: Fonts.header1),
        centerTitle: true,
      ),
     backgroundColor: ColorStyle.black,
      body: Container(
          alignment: Alignment.topCenter,
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                Util.paddingTop,
                TextFieldNormal(),
              Expanded(
              child: Align(
                alignment: Alignment.bottomCenter,
                child: ButtonNormal(
                  text: 'Go to next screen',
                  width: width * 0.8,
                  height: 50,
                  color: ColorStyle.blueDark,
                  onPressed: () => pushNewScreen(
                    context,
                    screen: BottomNavBarWidget(
                      menuScreenContext: context,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      )),
);

}

}

Answer 1

只需将BottonNormal 包裹在Expanded 小部件中即可。

 Expanded(
           child: Align(
             alignment: Alignment.bottomCenter,
              child: ButtonNormal(
               // ... 
              ),
            ),
         ),

为什么它不起作用：

这是因为列占据了整个屏幕，但小部件垂直渲染，只占用自己的空间。

解决方案：

使用Expanded 小部件包裹底部小部件，这将占用Column 底部的剩余空间，因此后缀底部对齐可以工作