如何修复 Flutter iOS 应用导航栏上奇怪的后退按钮？

Question

我有一个非常简单的屏幕，由一些简单的代码推动。当屏幕出现时，我看到这个奇怪的后退按钮图标：

这是屏幕的代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class TestScreen extends StatelessWidget {
  const TestScreen({super.key});

  static const routeName = 'test-screen';

  @override
  Widget build(BuildContext context) {
    return const CupertinoPageScaffold(
      navigationBar: 
        CupertinoNavigationBar(
          middle: Text('Test Screen'),
      ),
      child: Material(
        child: SafeArea(
          child: Padding(
            padding: EdgeInsets.all(8.0),
            child: Text('Hello World'),
          )
        )
      )
    );
  }
}

这是将屏幕推送到导航堆栈的代码：

TextButton(
  onPressed: () {
    Navigator.pushNamed(context, TestScreen.routeName);
  }, 
  child: const Text('Show Test Screen'),
),

有趣的是，点击按钮会进入预期的屏幕。

我做错了什么？

我完全愿意分享任何其他可能有助于识别问题的代码。

Answer 1

似乎您缺少带有图标的材质字体文件。 iOS 后退箭头应该在那里。 我建议重新安装 Flutter，或者也许你可以通过升级或更改分支来修复它。

Answer 2

感谢您的建议，@Pigna。它查看了我的其他应用程序中的代码，解决了问题。

对

CupertinoNavigationBar

的修改解决了问题：

CupertinoNavigationBar(
  leading: TextButton(
    child: const Icon(Icons.chevron_left),
    onPressed: () {
      Navigator.of(context).pop();
    },
  ),
  middle: const Text('Test Screen'),
),

Answer 3

您应该安装 cupertino 图标包才能正确显示此图标https://pub.dev/packages/cupertino_icons

添加到 pubspec.yaml

dependencies:
  cupertino_icons: ^1.0.6

无需手动添加图标到行距，除非您不需要标准图标。还使用 Icons.chevron_left 显示它并带有一些标准图标上不存在的填充。