简介

实现iOS应用程序的选项卡式的根布局与结构。

一个在底部放置标签栏，标签栏之间或后面放置内容的脚手架.

这个脚手架, tabBar组件与tabBuilder组件是必须配置的。如果你为该脚手架配置的tabBar组件是 CupertinoTabBar的话. 它会自动监听CupertinoTabBar底部的切换事件, 去动态切换主体显示的内容.

选项卡的内容是使用tabBuilder选项卡生成器生成的。TabBuilder必须能够生成tabbar中组件数组长度相同数量的组件。不活动的选项卡将被移到后台并禁用其动画。

使用cupertinobview作为每个选项卡的内容，以支持具有并行导航状态和历史记录的选项卡。

通过BottomNavigationBarItem列表,在屏幕底部展示多个小组件, 默认下选择第一个小组件;

实例演示

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

class CupertinoTabScaffoldDemo extends StatefulWidget {
  _Demo createState() => _Demo();
}

class _Demo extends State<CupertinoTabScaffoldDemo> {
  int index = 0;

  changeIndex(int _index) {
    this.setState(() {
      index = _index;
    });
  }
  Widget build(BuildContext context) {
    return SizedBox(
      height: 500,
      child: CupertinoTabScaffold(
        tabBar: CupertinoTabBar(
          items: <BottomNavigationBarItem> [
            BottomNavigationBarItem(
              title: Text("1"),
              icon: Icon(Icons.add),
            ),
            BottomNavigationBarItem(
              title: Text("2"),
              icon: Icon(Icons.add),
            )
          ],
        ),
        tabBuilder: (BuildContext context, int index) {
          return CupertinoTabView(
            builder: (BuildContext context) {
              return CupertinoPageScaffold(
                navigationBar: CupertinoNavigationBar(
                  middle: Text('Page 1 of tab $index'),
                ),
                child: Center(
                  child: CupertinoButton(
                    child: Text('Next page = $index'),
                    onPressed: () {
                      Navigator.of(context).push(
                        CupertinoPageRoute<void>(
                          builder: (BuildContext context) {
                            return CupertinoPageScaffold(
                              navigationBar: CupertinoNavigationBar(
                                middle: Text('Page 2 of tab $index'),
                              ),
                              child: Center(
                                child: CupertinoButton(
                                  child: const Text('Back'),
                                  onPressed: () { Navigator.of(context).pop(); },
                                ),
                              ),
                            );
                          },
                        ),
                      );
                    },
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}