简体   繁体   English

如何将按钮对齐到屏幕底部? [扑]

[英]How to Align Buttons To The Bottom of Screen? [Flutter]

Whether it is one button or 2 buttons at the bottom, I would like to align them to the bottom of the screen, in all screen sizes, Android or iOS.无论是底部的一个按钮还是 2 个按钮,我都想将它们对齐到屏幕底部,在所有屏幕尺寸中,Android 或 iOS。

If the screen is scrollable, it'll still remain there.如果屏幕是可滚动的,它仍然会保留在那里。 I didn't use BottomNavigation Bar to achieve that function as I thought it inappropriate.我没有使用 BottomNavigation Bar 来实现 function,因为我认为它不合适。

I used我用了

Scaffold(
            floatingActionButton: FloatingActionButton.extended(
              onPressed: () {},
              isExtended: true,
              materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
              label: Text('Hello World',
                
            ),
            floatingActionButtonLocation:
                FloatingActionButtonLocation.centerDocked,
            body:...

This method serves the purpose of having a fixed singular button.此方法的目的是拥有一个固定的单数按钮。 However this doesn't allow 2 buttons.但是,这不允许 2 个按钮。 Sometimes I want to provide the users an option eg Option A to this page, option B to next page.有时我想为用户提供一个选项,例如此页面的选项 A,下一页的选项 B。

What are your thoughts on it?你对此有什么想法?

        Scaffold(
             body: Column(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children:[ 
                        floatingActionButton: FloatingActionButton.extended(
                        onPressed: () {},
                        isExtended: true,
                        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                        label: Text('Hello World',
                        ...
                    ),
                    floatingActionButtonLocation:
                        FloatingActionButtonLocation.centerDocked,
                    ...
                ]

You can provide a Row widget to the floatingActionButton attribute and align your buttons accordingly to your wish.您可以为floatingActionButton属性提供一个Row小部件,并根据您的意愿对齐按钮。

Example例子

   Scaffold(
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            onPressed: () {},
            child: Text("Button 1"),
          ),
          ElevatedButton(
            onPressed: () {},
            child: Text("Button 2"),
          ),
        ],
      ),
    );

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM