扑出移除应用程序栏上的后退按钮


123

我想知道,是否有人知道appBar当您Navigator.pushNamed移至另一页面时,如何删除显示在Flutter应用中的后退按钮的方法。我不希望在此结果页面上显示它的原因是它来自导航,我希望用户改用logout按钮,以便会话重新开始。

Answers:


144

您可以通过将空白new Container()作为leading参数传递到来删除“后退”按钮AppBar

但是,如果您发现自己这样做了,则可能不希望用户按下设备的“后退”按钮返回到先前的路线。而不是致电pushNamed,请尝试致电Navigator.pushReplacementNamed以使以前的路线消失。

下面是后一种方法的完整代码示例。

import 'package:flutter/material.dart';

class LogoutPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Logout Page"),
      ),
      body: new Center(
        child: new Text('You have been logged out'),
      ),
    );
  }

}
class MyHomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Remove Back Button"),
      ),
      floatingActionButton: new FloatingActionButton(
        child: new Icon(Icons.fullscreen_exit),
        onPressed: () {
          Navigator.pushReplacementNamed(context, "/logout");
        },
      ),
    );
  }
}

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new MyHomePage(),
      routes: {
        "/logout": (_) => new LogoutPage(),
      },
    );
  }
}

是的,我把命令混在一起了。我会尝试的,谢谢您的帮助。
罗伯特

2
@ Collin,pushReplacementNamed似乎并未消除使用系统后退箭头返回的可能性。
Jackpap

@Collin Jackson,是否pushReplacementNamed()处置了先前的屏幕小部件(以及所有依赖于数据和状态的信息)?
Dmitriy Blokhin

@Jackpap是因为如果有以前的路线,它实际上会显示箭头。如果这是唯一的路线,那没有什么可回头的了。在您的情况下,请使用空的Container()方法。
ThinkDigital '19

1
空容器方法似乎会在后退按钮所在的位置产生一个空间,因此Appbar标题会略微移动。仍然不是理想的方法。
哈森

303

我相信解决方案如下

您实际上要么:

  • 不想显示该丑陋的后退按钮(:]),因此选择: AppBar(...,automaticallyImplyLeading: false,...);

  • 不希望用户能够回到- 取代当前视图 -从而去: Navigator.pushReplacementNamed(## your routename here ##);

  • 不想让用户返回- 将某个视图替换回堆栈中 -然后使用: Navigator.pushNamedAndRemoveUntil(## your routename here ##, f(Route<dynamic>)→bool); 其中f是遇到true您要保留在堆栈中的最后一个视图时返回的函数(紧接在新视图之前);

  • 不想让用户返回-EVER-使用以下方法完全清空导航器堆栈: Navigator.pushNamedAndRemoveUntil(context, ## your routename here ##, (_) => false);

干杯


8
这就是我一直在寻找的答案!pushReplacementNamed()对我不起作用,但是回头再来的用户终于可以工作了!谢谢!
s.bridges,

1
确实,这是最好的答案。
杰伊·杰伊(Jay Jeong)

谢谢,我不得不使用“ pushReplacementNamed”代替“ popAndPushNamed”
camillo777

这应该是标记出来的答案
Bright

158

删除AppBar中的后退按钮的一种简单方法是将设置automaticallyImplyLeadingfalse

appBar: AppBar(
  title: Text("App Bar without Back Button"),
  automaticallyImplyLeading: false,
),

谢谢您的简单
回答

尽管这很容易实现,但对于给定的方案,Navigator.pushReplacementNamed是正确的解决方案。您所建议的解决方法是,如果将其应用于所有情况下,最终可能会推断出错误的行为,例如某人希望某处AppBar继续暗示领先行为(例如,后退导航按钮)
Guilherme Matuella,

35

只想在@Jackpap答案上添加一些描述:

automaticImplyLeading:

这检查我们是否要在应用程序栏上应用后退窗口小部件(前导窗口小部件)。如果automaticImplyLeading为false,则将自动为标题提供空间;如果前导小部件为true,则此参数无效。

void main() {
  runApp(
    new MaterialApp(
      home: new Scaffold(
        appBar: AppBar(
          automaticallyImplyLeading: false, // Used for removing back buttoon. 
          title: new Center(
            child: new Text("Demo App"),
          ),
        ),
        body: new Container(
          child: new Center(
            child: Text("Hello world!"),
          ),
        ),
      ),
    ),
  );
}  

5

//如果要隐藏后退按钮,请使用以下代码

class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text('Remove Back Button'),
    
    //hide back button
    automaticallyImplyLeading: false,
   ),
  body: Center(
    child: Container(),
  ),
);
}
}

//如果要隐藏后退按钮并停止弹出动作,请使用以下代码

class SecondScreen extends StatelessWidget {

@override
Widget build(BuildContext context) {
 return new WillPopScope(

  onWillPop: () async => false,
  child: Scaffold(
    appBar: AppBar(
      title: Text("Second Screen"),
      //For hide back button
      automaticallyImplyLeading: false,
    ),
    body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              child: Text('Back'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
          ],
        )
    ),
  ),
);
 }


[


4

AppBar小部件具有名为的属性automaticallyImplyLeading。默认情况下,其值为true。如果您不希望flutter自动为您构建后退按钮,则只需设置属性即可false

appBar: AppBar(
  title: Text("YOUR_APPBAR_TITLE"), 
  automaticallyImplyLeading: false,
),

添加自定义后退按钮

appBar: AppBar(
  title: Text("YOUR_APPBAR_TITLE"), 
  automaticallyImplyLeading: false,
  leading: YOUR_CUSTOM_WIDGET(),
),

2

如果导航到另一个页面。 Navigator.pushReplacement()可以使用。如果您要从登录导航到主屏幕,则可以使用它。或者您可以使用。
AppBar(automaticallyImplyLeading: false)


2

将此用于条状AppBar

SliverAppBar (
        automaticallyImplyLeading: false,
        elevation: 0,
        brightness: Brightness.light,
        backgroundColor: Colors.white,
        pinned: true,
      ),

将其用于常规Appbar

 appBar: AppBar(
    title: Text
    ("You decide on the appbar name"
    style: TextStyle(color: Colors.black,), 
    elevation: 0,
    brightness: Brightness.light,
    backgroundColor: Colors.white,
    automaticallyImplyLeading: false,

),

-2
  appBar: new AppBar(title: new Text("SmartDocs SPAY"),backgroundColor: Colors.blueAccent, automaticallyImplyLeading:false,
        leading: new Container(),
      ),

工作正常


我们需要提供以下内容:new Container()标签
siva
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.