user-interface - 如何在 Flutter 中不使用 AppBar 的情况下添加返回按钮？

Question

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

标签： user-interfaceflutterdartback-buttonappbar

Answer 1

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完全透明。但是，您需要相应地设计小部件以确保后退按钮可见。在上面的例子中，我只是设置了不透明度。

希望这可以帮助。祝你好运！