使用fluent_ui开发桌面应用时NavigationBody未定义问题求助

我用fluent_ui开发桌面应用，已经将该包添加至pubspec.yaml中，此前运行一切正常，但创建NavigationBody用于页面导航时出现错误：

Error: The method 'NavigationBody' isn't defined for the class '_HomePageState'.

• '_HomePageState'来自'package:specialityapp/presentation/ui/mainpage.dart'（'lib/presentation/ui/mainpage.dart'）。请尝试将名称更正为现有方法的名称，或定义一个名为'NavigationBody'的方法。content: NavigationBody(

鼠标悬浮在代码上时，编辑器提示我自行创建这个类，看起来该类可能已不存在，怀疑是使用了过期版本的包。相关代码如下：

class _HomePageState extends State<HomePage> {
  int _currentpage = 0;

  @override
  Widget build(BuildContext context) {
    return NavigationView(
      appBar: NavigationAppBar(
          title: Container(
            color: bluecol,
            margin: const EdgeInsets.only(left: 20),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  'Choose your speciality',
                  style: TextStyle(fontSize: 32, color: whitecol),
                ),
                const SizedBox(width: 600),
                Flexible(
                    child: TextField(
                      decoration: InputDecoration(
                          border: OutlineInputBorder(
                              borderSide: BorderSide(color: whitecol)),
                          suffixIcon: Icon(
                            Icons.search_outlined,
                            size: 30,
                            color: whitecol,
                          )),
                    )),
                const SizedBox(width: 600),
                Icon(
                  Icons.account_circle,
                  color: whitecol,
                )
              ],
            ),
          ),
          backgroundColor: bluecol,
          automaticallyImplyLeading: true),
      pane: NavigationPane(
          size: const NavigationPaneSize(openMinWidth: 250, openMaxWidth: 320),
          onChanged: (index) => setState(() {
            _currentpage = index;
          }),
          selected: _currentpage,
          items: <NavigationPaneItem>[
            PaneItem(
                icon: const Icon(
                  FluentIcons.home,
                  size: 20,
                ),
                title: const Text('Catalog'),
                body: const Text('')),
            PaneItem(
                icon: const Icon(
                  FluentIcons.home,
                  size: 20,
                ),
                title: const Text('Rated'),
                body: const Text('')),
          ]),
      content: NavigationBody(         // 错误发生在这里
        index: _currentpage,
        children: [

        ]
      ),
    );
  }
}

解决方案 #

1. 确认版本适配问题 #

新版fluent_ui中已经移除了NavigationBody组件，NavigationView的content属性不再依赖该组件，而是直接传入当前选中的页面组件，或者通过NavigationViewContentBuilder构建页面。

2. 修改代码适配新版API #

方法一：直接使用页面列表切换

定义对应导航项的页面列表，根据当前索引切换显示：

class _HomePageState extends State<HomePage> {
  int _currentpage = 0;

  // 定义导航项对应的页面
  final List<Widget> _pages = [
    const Text('Catalog 页面内容'),
    const Text('Rated 页面内容'),
  ];

  @override
  Widget build(BuildContext context) {
    return NavigationView(
      appBar: NavigationAppBar(
          title: Container(
            color: bluecol,
            margin: const EdgeInsets.only(left: 20),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  'Choose your speciality',
                  style: TextStyle(fontSize: 32, color: whitecol),
                ),
                const SizedBox(width: 600),
                Flexible(
                    child: TextField(
                      decoration: InputDecoration(
                          border: OutlineInputBorder(
                              borderSide: BorderSide(color: whitecol)),
                          suffixIcon: Icon(
                            Icons.search_outlined,
                            size: 30,
                            color: whitecol,
                          )),
                    )),
                const SizedBox(width: 600),
                Icon(
                  Icons.account_circle,
                  color: whitecol,
                )
              ],
            ),
          ),
          backgroundColor: bluecol,
          automaticallyImplyLeading: true),
      pane: NavigationPane(
          size: const NavigationPaneSize(openMinWidth: 250, openMaxWidth: 320),
          onChanged: (index) => setState(() {
            _currentpage = index;
          }),
          selected: _currentpage,
          items: <NavigationPaneItem>[
            PaneItem(
                icon: const Icon(
                  FluentIcons.home,
                  size: 20,
                ),
                title: const Text('Catalog')),
            PaneItem(
                icon: const Icon(
                  FluentIcons.home,
                  size: 20,
                ),
                title: const Text('Rated')),
          ]),
      // 直接传入当前索引对应的页面
      content: _pages[_currentpage],
    );
  }
}

方法二：使用NavigationViewContentBuilder

如果需要更灵活的页面逻辑，可以用NavigationViewContentBuilder构建：

// 替换原代码中的content部分
content: NavigationViewContentBuilder(
  index: _currentpage,
  builder: (context, index) {
    switch(index) {
      case 0:
        return const Text('Catalog 页面');
      case 1:
        return const Text('Rated 页面');
      default:
        return const SizedBox();
    }
  },
),

3. 升级fluent_ui包 #

如果项目使用的是旧版本，建议升级到最新版本以修复兼容问题：
在终端执行命令：

flutter pub upgrade fluent_ui

升级完成后重新运行项目即可。

内容的提问来源于stack exchange，提问作者Hazmatik