AppBar 上的前导错误地保留在不同的页面上答案

【问题标题】：Leading on AppBar Incorrectly Persisting on Different PagesAppBar 上的前导错误地保留在不同的页面上
【发布时间】：2020-09-03 12:49:15
【问题描述】：

我正在使用 Flutter 开发一个项目。问题是，当我导航到不同的页面，然后返回时，主页的应用栏上出现了一个我不久前在测试时使用的图标。我回到代码中，该页面的应用栏中没有前导。

这是应用完全重建后的屏幕截图。

使用Navigator.of(context).pushNamed('/streaks/edit/')导航到另一个页面后：

最后，使用Navigator.of(context).pushNamed('/streaks/all/') 导航回到主页：

main.dart 代码：

import 'package:flutter/material.dart';

import 'package:streaks/pages/all_streaks/all_streaks.dart';
import 'package:streaks/pages/edit_streak/edit_streak.dart';

void main() => runApp(StreaksApp());

class StreaksApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'streaks',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      initialRoute: '/streaks/all/',
      routes: <String, WidgetBuilder>{
        '/streaks/all/': (context) => AllStreaksPage(),
        '/streaks/edit/': (context) => EditStreakPage(),
      },
    );
  }
}

主页代码（/streaks/all/）：

import 'package:flutter/material.dart';

import 'streak_list.dart';

class AllStreaksPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('All Streaks'),
      ),
      body: StreakList(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
            Navigator.of(context).pushNamed('/streaks/edit/');
        },
        child: Icon(Icons.add, size: 40),
      ),
    );
  }
}

和编辑条纹页面 (/streaks/edit/)：

import 'package:flutter/material.dart';
import 'package:streaks/pages/edit_streak/streak_form.dart';

class EditStreakPage extends StatefulWidget {
  @override
  _EditStreakPageState createState() => _EditStreakPageState();
}

class _EditStreakPageState extends State<EditStreakPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
            icon: Icon(Icons.close, color: Theme.of(context).buttonColor),
            onPressed: () {
              Navigator.pushNamed(context, '/streaks/all/');
            }),
        title: Text('Edit Streak'),
      ),
      body: StreakForm()
    );
  }
}

pubspec.yaml：

name: streaks
description: An app to boost your productivity with event organization.
publish_to: "none"
version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  sqflite:
  path:
  flutter_iconpicker: ^2.1.5

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true

注意：在任何时候都不会有任何错误记录到调试控制台中。另一个注意事项：即使删除应用程序并再次运行，错误仍然存在。

请帮忙。我在想这可能是 (a) 缓存错误或 (b) 无状态小部件作为页面存在问题。

【问题讨论】：

在您的主页类中，将属性automaticallyImplyLeading: false 传递给您的AppBar()

标签： flutter dart

【解决方案1】：

第一种方式：

在您的EditStreakPage 类中，不要使用Navigator.pushNamed(context, '/streaks/all/');，而是使用Navigator.pop(context)

完整的课程代码：

import 'package:flutter/material.dart';
import 'package:streaks/pages/edit_streak/streak_form.dart';

class EditStreakPage extends StatefulWidget {
  @override
  _EditStreakPageState createState() => _EditStreakPageState();
}

class _EditStreakPageState extends State<EditStreakPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
            icon: Icon(Icons.close, color: Theme.of(context).buttonColor),
            onPressed: () {
              Navigator.pop(context); // <-- use this intead
            }),
        title: Text('Edit Streak'),
      ),
      body: StreakForm()
    );
  }
}

第二种方式：

在您的 AllStreaksPage 类中，将属性 automaticallyImplyLeading: false 传递给 AppBar()

完整的课程代码：

import 'package:flutter/material.dart';

import 'streak_list.dart';

class AllStreaksPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false; // <--- add this
        title: Text('All Streaks'),
      ),
      body: StreakList(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
            Navigator.of(context).pushNamed('/streaks/edit/');
        },
        child: Icon(Icons.add, size: 40),
      ),
    );
  }
}

【讨论】：

我添加了另一种方式，看看我编辑的答案。 :)

【解决方案2】：

据我了解，您说的是，当您打开您的应用程序 -> EDitStreak 页面 -> 按下 editStreak 页面顶部的关闭按钮时，会出现操作。..

这样做的关键原因是，您实际上是通过导航到该页面而不是返回。后退按钮将引导您返回编辑 Streaks 页面。

你应该使用而不是导航

Navigator.of(context).pop()

这应该可以解决您的问题，如果有帮助，请在 cmets 中告诉我

【讨论】：