флаттер удалить кнопку возврата на панели приложений

124

Мне интересно, знает ли кто-нибудь способ удалить кнопку «Назад», которая появляется appBarв приложении Flutter, когда вы используете его Navigator.pushNamedдля перехода на другую страницу. Причина, по которой я не хочу, чтобы он отображался на этой результирующей странице, заключается в том, что он поступает из навигации, и я хочу, чтобы пользователи logoutвместо этого использовали кнопку, чтобы сеанс запускался заново.

Роберт
источник

Ответы:

147

Вы можете удалить кнопку возврата, передав пустое значение 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()предыдущий виджет экрана (и все зависимые данные и состояния)?
Дмитрий Блохин
@Jackpap потому что он действительно показывает стрелку, если есть предыдущий маршрут. Если это единственный маршрут, то возвращаться не к чему. В вашем случае используйте пустой метод Container ().
ThinkDigital
1
Кажется, что метод пустого контейнера приводит к появлению пробела на месте кнопки возврата, поэтому заголовок панели приложений немного перемещается. Все еще не идеальный метод.
Hasen
304

Я считаю, что решения следующие

На самом деле вы либо:

  • Не хочу , чтобы отобразить эту кнопку некрасиво назад (:]), и , таким образом , пойти на: AppBar(...,automaticallyImplyLeading: false,...);

  • Не хочу, чтобы пользователь возвращался - заменяя текущее представление - и, таким образом, делал Navigator.pushReplacementNamed(## your routename here ##):;

  • Не хочу, чтобы пользователь возвращался назад - заменяя определенное представление обратно в стеке - и поэтому используйте: Navigator.pushNamedAndRemoveUntil(## your routename here ##, f(Route<dynamic>)→bool); где f - функция, возвращающаяся trueпри встрече с последним представлением, которое вы хотите сохранить в стеке (прямо перед новым);

  • Не хочу, чтобы пользователь возвращался - НИКОГДА - полностью опустошая стек навигатора: Navigator.pushNamedAndRemoveUntil(context, ## your routename here ##, (_) => false);

Ура

Фабио Веронезе
источник
8
Это был ответ, который я искал! pushReplacementNamed () у меня не работал, но возвращение пользователя ВСЕГДА - это то, что в итоге сработало! Спасибо!
s.bridges
1
действительно, это лучший ответ.
Jay Jeong
Спасибо, мне пришлось использовать pushReplacementNamed вместо popAndPushNamed
camillo777
Это должен быть отмеченный ответ
Брайт
159

Простой способ убрать кнопку возврата на панели приложений - установить automaticallyImplyLeadingзначение false.

appBar: AppBar(
  title: Text("App Bar without Back Button"),
  automaticallyImplyLeading: false,
),
Джекпап
источник
Спасибо за простоту
Кутбуддин Бора
Хотя это просто реализовать, для данного сценария Navigator.pushReplacementNamedэто правильное решение. Вы предлагаете обходной путь, который, если он применяется во всех сценариях, может в конечном итоге привести к неправильному поведению, например, где-то, что кому-то хотелось бы, AppBarпродолжает подразумевать ведущее поведение (например, кнопка навигации назад)
Гильерме Матуэлла,
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!"),
          ),
        ),
      ),
    ),
  );
}  
jitsm555
источник
6

// если вы хотите скрыть кнопку возврата, используйте код ниже

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. Если вы не хотите, чтобы флаттер автоматически создавал кнопку возврата, просто создайте свойство false.

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

Чтобы добавить собственную кнопку возврата

appBar: AppBar(
  title: Text("YOUR_APPBAR_TITLE"), 
  automaticallyImplyLeading: false,
  leading: YOUR_CUSTOM_WIDGET(),
),
Ахаммед Хоссейн Шанто
источник
3

При переходе на другую страницу. Navigator.pushReplacement()может быть использован. Его можно использовать, если вы переходите из входа в систему на главный экран. Или вы можете использовать.
AppBar(automaticallyImplyLeading: false)

С.Р. Кешав
источник
3

Используйте это для ленты AppBar

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

Используйте это для нормальной панели приложений

 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,

),
Kobby Скидка
источник
-2
  appBar: new AppBar(title: new Text("SmartDocs SPAY"),backgroundColor: Colors.blueAccent, automaticallyImplyLeading:false,
        leading: new Container(),
      ),

Он работает нормально

Шива
источник
мы должны обеспечить ведущий: новый контейнер () тег
Шиву