我怎么能把一些按钮放在屏幕底部但是呢？

Posted 2023-02-23

【中文标题】我怎么能把一些按钮放在屏幕底部但是呢？

【英文标题】：How can I put some buttons on the bottom of the screen but?

【发布时间】：2019-11-23 11:51:30

【问题描述】：

我想在屏幕底部放置一些按钮，但不使用栏，因为我希望这些按钮保持在其他小部件上方但保持在屏幕按钮上，即使它们下方的小部件是可滚动的

Like the four buttons here in this snapchat screenshot

【问题讨论】：

使用堆栈布局

【参考方案1】：

您需要使用带有子小部件的 Stack 小部件。您将首先添加背景小部件，然后使用定位小部件来很好地...将您想要的小部件（在这种情况下是屏幕底部的按钮）定位在您想要的前景中。

查看下面的示例代码：

class BottomButtonPosition extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: Stack(
        children: <Widget>[
          ListView(children: <Widget>[
            ...List.generate(
              10,
              (index) => Container(
                    color: Colors.primaries.elementAt(index),
                    height: 100.0,
                  ),
            ),
          ]),
          Positioned(
            bottom: 0.0,
            right: 0.0,
            left: 0.0,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                IconButton(
                  icon: Icon(
                    Icons.play_arrow,
                    color: Colors.white,
                  ),
                  iconSize: 40,
                  onPressed: () ,
                ),
                IconButton(
                  icon: Icon(
                    Icons.skip_previous,
                    color: Colors.white,
                  ),
                  iconSize: 40,
                  onPressed: () ,
                )
              ],
            ),
          ),
        ],
      ),
    );
  

结果如下：

【讨论】：

OP 询问按钮，你的回答没有提到按钮，只有背景......？

感谢您指出这一点。我在代码中包含了按钮，但我将编辑以在评论中指定按钮。