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中底部的剩余空间，因此后缀词的底部对齐可以正常工作

颤动将自定义底部对准屏幕底部中心？

1 个答案: