如何在 Flutter 中不使用 AppBar 添加后退按钮？

Question

我想在我的 appBar 上添加一个后退按钮，并想让 appBar 透明，以便它只显示后退按钮。

Answer 1

只需 WRAP 您的小部件到 Stack 中，然后在其上添加一个 IconButton Stack 和按钮 Navigator.pop(context) onPressed()。那应该可以解决您的问题。

return Stack(
    alignment: Alignment.topLeft,
    children: <Widget>[
      YourScrollViewWidget(),
      IconButton(
        icon: Icon(Icons.arrow_back),
        onPressed: (){
          Navigator.pop(context);
        },
      )
    ],
  );

Answer 2

Simran，这有点棘手，但结合 Stack、SingleChildScrollView 和 AppBar 是可能的。这是演示这一点的快速示例，

return Scaffold(
              body: Stack(children: <Widget>[
                Container(
                  color: Colors.white,// Your screen background color
                ),
                SingleChildScrollView(
                    child: Column(children: <Widget>[
                      Container(height: 70.0),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                    ])
                ),
                new Positioned(
                  top: 0.0,
                  left: 0.0,
                  right: 0.0,
                  child: AppBar(
                    title: Text(''),// You can add title here
                    leading: new IconButton(
                      icon: new Icon(Icons.arrow_back_ios, color: Colors.grey),
                      onPressed: () => Navigator.of(context).pop(),
                    ),
                    backgroundColor: Colors.blue.withOpacity(0.3), //You can make this transparent
                    elevation: 0.0, //No shadow
                  ),),
              ]),
              );

注意：您可以使 AppBar 完全透明。但是，您需要相应地设计小部件以确保后退按钮可见。在上面的例子中，我只是设置了不透明度。

希望这对您有所帮助。祝你好运！

如何在 Flutter 中不使用 AppBar 添加后退按钮？

How to add Back Button without using AppBar in Flutter?

user-interface

appbar

back-button

dart

flutter