颤动将自定义底部对准屏幕底部中心? [英] Flutter align a custom bottom at bottom center of screen?

问题描述

我的自定义按钮未对准屏幕的底部中心，现在我的自定义按钮位于容器底部的中心.它是下面代码的唯一部分.关于如何解决使自定义按钮出现在屏幕底部中心的任何想法?

My custom button does not align at bottom center of screen and right now my custom button is centered at bottom of container. Its only part of code below. Any ideas on how I can fix so my custom button appears at bottom center of screen?

  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,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      )),
);

}

}

推荐答案

只需在 Expanded 小部件内包装 BottonNormal .

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

为什么不起作用:

这是因为该列占据了整个屏幕，但是小部件是垂直呈现的，因此只会占据它们自己的空间.

It is because the column takes the entire screen, but the widget renders vertically which will take their own space only.

解决方案:

使用 Expanded 小部件包装底部小部件，该小部件将占用 Column 中底部的剩余空间，因此后单词底部对齐可以正常工作

Wrap the bottom widget using the Expanded widget which will take the remaining space from the bottom in Column, so afterwords bottom alignment can work

这篇关于颤动将自定义底部对准屏幕底部中心?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！