Flutter CupertinoTabBar Widget使用详解

CupertinoTabBar是一个Cupertino风格的选项卡栏，类似于Flutter中的TabBar Widget。它提供了一组选项卡，用户可以通过轻触来切换不同的选项卡，并在不同的选项卡之间进行导航。

CupertinoTabBar Widget具有以下属性：

• items: 一个List类型的值，其中包含要在选项卡栏中显示的选项卡。必需的。
• onTap: 一个ValueChanged类型的回调函数，表示当用户轻触选项卡时所调用的函数。必需的。
• currentIndex: 一个整数类型的值，表示当前所选中的选项卡的索引。必需的。
• backgroundColor: 一个CupertinoDynamicColor类型的值，表示选项卡栏的背景颜色。
• border: 一个Border类型的值，表示选项卡栏的边框。

下面是一个使用CupertinoTabBar Widget的例子：

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;

  void _handleTabBarTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'Settings',
          ),
        ],
        onTap: _handleTabBarTapped,
        currentIndex: _currentIndex,
      ),
      tabBuilder: (BuildContext context, int index) {
        return Center(
          child: Text(
            'Tab ${index + 1}',
            style: TextStyle(fontSize: 20),
          ),
        );
      },
    );
  }
}

在上面的例子中，我们使用了CupertinoTabBar Widget来创建一个选项卡栏。我们将其包含在一个CupertinoTabScaffold Widget中，并定义了一个回调函数_handleTabBarTapped来响应选项卡的轻触事件。我们使用currentIndex属性来表示当前所选中的选项卡的索引，并将其传递给CupertinoTabBar Widget。我们还定义了一个tabBuilder回调函数来生成选项卡所显示的内容。在这个例子中，我们只是在每个选项卡中显示了一个文本部件。

总之，CupertinoTabBar Widget是一个非常有用的Cupertino风格的小部件，可以为您的应用程序提供一个漂亮的选项卡栏，以便用户可以轻松地切换不同的选项卡并导航到不同的内容。