Question

我们可以使用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
      // **************************************
    );
  }
}

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

Answer 1

Scaffold中有persistentFooterButtons个属性。

Answer 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",
        )
      ],
    ),
  );
}

Answer 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 。 bodyFooterButtons 在 body 和 bottomNavigationBar 之间显示。

Answer 4

您也可以使用flutter_layouts

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

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

4 个答案: