库比蒂诺标签栏

Question

我正在尝试实现 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,
            );
          }
        }

Answer 1

将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,
    );
  }
}