【问题标题】: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

【问题讨论】:

  • 使用堆栈布局

标签: flutter flutter-layout


【解决方案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 询问按钮,你的回答没有提到按钮,只有背景......?
  • 感谢您指出这一点。我在代码中包含了按钮,但我将编辑以在评论中指定按钮。
猜你喜欢
  • 2021-12-16
  • 1970-01-01
  • 2013-01-24
  • 2018-05-25
  • 2021-07-14
  • 2018-01-27
  • 2020-12-19
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多