如何添加应用程序页脚（使用 bottomNavigationBar）答案

【问题标题】：How to add application footer (Using bottomNavigationBar)如何添加应用程序页脚（使用 bottomNavigationBar）
【发布时间】：2018-03-09 04:16:52
【问题描述】：

我们可以使用 AppBar 小部件添加标题。

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        leading: new Icon(Icons.mail),
        title: new Text("Hello Flutter Header"),
      ),
      body: new Center(
        child: new MyButton(),
      ),
      // **************************************
      // I want to add application footer here
      // **************************************
    );
  }
}

我们如何添加应用程序页脚？

【问题讨论】：

Creating a Sticky Site Footer的可能重复

标签： flutter

【解决方案1】：

Scaffold 中有一个persistentFooterButtons 属性。

【讨论】：

【解决方案2】：

persistentFooterButtons 将呈现在bottomNavigationBar 上方。这是我在 2021 年的解决方案，使用 bottomNavigationBar 添加应用程序页脚。

注意，title: 已弃用，您应该使用 label:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: Container(),
    bottomNavigationBar: new BottomNavigationBar(
      items: [
        new BottomNavigationBarItem(
          icon: Icon(Icons.thumb_up),
          label: "Like",
        ),
        new BottomNavigationBarItem(
          icon: Icon(Icons.thumb_down),
          label: "Dislike",
        ),
        new BottomNavigationBarItem(
          icon: Icon(Icons.comment),
          label: "Comment",
        )
      ],
    ),
  );
}

【讨论】：

【解决方案3】：

我发现bottomNavigationBar 正在为我工作。

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        leading: new Icon(Icons.mail),
        title: new Text("Hello Flutter Header"),
      ),
      body: new Center(
        child: new MyButton(),
      ),
      bottomNavigationBar: new BottomNavigationBar(
        items: [
          new BottomNavigationBarItem(
            icon: new Icon(Icons.add),
            title: new Text("Add"),
          ),
          new BottomNavigationBarItem(
            icon: new Icon(Icons.edit),
            title: new Text("Edit"),
          ),
          new BottomNavigationBarItem(
            icon: new Icon(Icons.delete),
            title: new Text("Delete"),
          ),
        ],
      ),
    );
  }
}

正如@aziza 提到的，我们也可以使用persistentFooterButtons。但在这种方法中，按钮并没有在水平方向上完美地跨越。

 persistentFooterButtons: <Widget>[
        new FlatButton(
          child: new Icon(Icons.add),
          onPressed: null,
        ),
        new FlatButton(
          child: new Icon(Icons.edit),
          onPressed: null,
        ),
        new FlatButton(
          child: new Icon(Icons.delete),
          onPressed: null,
        ),
      ],

另外一点是 bottomNavigationBar 和 persistentFooterButtons 可以同时使用。 persistentFooterButtons 显示在 body 和 bottomNavigationBar 之间。

【讨论】：

【解决方案4】：

您也可以使用 flutter_layouts 来完成此操作

https://github.com/softmarshmallow/flutter-layouts https://github.com/softmarshmallow/flutter-layouts/tree/master/lib/src/footer

【讨论】：