库比蒂诺标签栏

问题描述

我正在尝试实现 Cupertino 底部标签栏。我有2个问题。当我在 Cupertino 选项卡视图中调用 widgetBuilder 时，我得到“无法无条件调用该函数，因为它可以为 'null'”，因此添加一个空检查 '!'但它需要另一个。

然后，当我尝试使用 currentTab、onSelectTab、widgetBuilder 作为字段返回 CupertinoHomeScaffold 时，它说需要参数“key”。不知道我应该做什么。

如果你看到任何东西，请告诉我！提前致谢...！

        import 'package:Flutter/cupertino.dart';
        import 'package:Flutter/material.dart';
        
        enum TabItem { jobs,entries,account }
        
        class TabItemData {
          const TabItemData({required this.title,required this.icon});
        
          final String title;
          final IconData icon;
        
          static const Map<TabItem,TabItemData> allTabs = {
            TabItem.jobs: TabItemData(title: 'Jobs',icon: Icons.work),TabItem.entries: TabItemData(title: 'entries',icon: Icons.view_headline),TabItem.account: TabItemData(title: 'entries',icon: Icons.person),};
        }
        
        class HomePage extends StatefulWidget {
          @override
          _HomePageState createState() => _HomePageState();
        }
        
        class _HomePageState extends State<HomePage> {
          TabItem _currentTab = TabItem.jobs;
        
          Map<TabItem,WidgetBuilder> get widgetBuilder {
            return {
              TabItem.jobs: (_) => Container(),TabItem.entries: (_) => Container(),TabItem.account: (_) => Container(),};
          }
        
          void _select(TabItem tabItem) {
            setState(() => _currentTab = tabItem);
          }
        
          @override
          Widget build(BuildContext context) {
            return CupertinoHomeScaffold(
              currentTab: _currentTab,onSelectTab: _select,widgetBuilder: widgetBuilder,);
          }
        }
        
        class CupertinoHomeScaffold extends StatelessWidget {
          const CupertinoHomeScaffold({
            required Key key,required this.currentTab,required this.onSelectTab,required this.widgetBuilder,}) : super(key: key);
        
          final TabItem currentTab;
          final ValueChanged<TabItem> onSelectTab;
          final Map<TabItem,WidgetBuilder> widgetBuilder;
        
          @override
          Widget build(BuildContext context) {
            return CupertinoTabScaffold(
              tabBar: CupertinoTabBar(
                items: [
                  _buildItem(TabItem.jobs),_buildItem(TabItem.entries),_buildItem(TabItem.account),],onTap: (index) => onSelectTab(TabItem.values[index]),),tabBuilder: (context,index) {
                final item = TabItem.values[index];
                return CupertinoTabView(
                  builder: (context) => widgetBuilder![item](context),);
              },);
          }
        
          BottomNavigationBarItem _buildItem(TabItem tabItem) {
            final itemData = TabItemData.allTabs[tabItem];
            return BottomNavigationBarItem(
              icon: Icon(itemData!.icon),label: itemData.title,);
          }
        }

解决方法

使 key 成为可空变量：

Key? key,

对于widgetBuilder，您需要将!放在]之后：

widgetBuilder[item]!(context),

工作示例

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

void main() => runApp(
      MaterialApp(
        home: HomePage(),),);

enum TabItem { jobs,entries,account }

class TabItemData {
  const TabItemData({required this.title,required this.icon});

  final String title;
  final IconData icon;

  static const Map<TabItem,TabItemData> allTabs = {
    TabItem.jobs: TabItemData(title: 'Jobs',icon: Icons.work),TabItem.entries: TabItemData(title: 'entries',icon: Icons.view_headline),TabItem.account: TabItemData(title: 'entries',icon: Icons.person),};
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  TabItem _currentTab = TabItem.jobs;

  Map<TabItem,WidgetBuilder> get widgetBuilder {
    return {
      TabItem.jobs: (_) => Container(),TabItem.entries: (_) => Container(),TabItem.account: (_) => Container(),};
  }

  void _select(TabItem tabItem) {
    setState(() => _currentTab = tabItem);
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoHomeScaffold(
      currentTab: _currentTab,onSelectTab: _select,widgetBuilder: widgetBuilder,);
  }
}

class CupertinoHomeScaffold extends StatelessWidget {
  const CupertinoHomeScaffold({
    Key? key,required this.currentTab,required this.onSelectTab,required this.widgetBuilder,}) : super(key: key);

  final TabItem currentTab;
  final ValueChanged<TabItem> onSelectTab;
  final Map<TabItem,WidgetBuilder> widgetBuilder;

  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        items: [
          _buildItem(TabItem.jobs),_buildItem(TabItem.entries),_buildItem(TabItem.account),],onTap: (index) => onSelectTab(TabItem.values[index]),tabBuilder: (context,index) {
        final item = TabItem.values[index];
        return CupertinoTabView(
          builder: (context) => widgetBuilder[item]!(context),);
      },);
  }

  BottomNavigationBarItem _buildItem(TabItem tabItem) {
    final itemData = TabItemData.allTabs[tabItem];
    return BottomNavigationBarItem(
      icon: Icon(itemData!.icon),label: itemData.title,);
  }
}