iOS风格的页面布局脚手架结构，可指定最底部的导航切换栏可主体内容页。

相关组件

CupertinoTabBar

CupertinoTabScaffold基本用法

【tabBar】 : 页签条 【CupertinoTabBar】
【backgroundColor】 : 背景色 【Color】
【controller】 : 控制器 【CupertinoTabController】
【tabBuilder】 : 页面构造器 【IndexedWidgetBuilder】
155.gif

  1. import 'package:flutter/cupertino.dart';
  2. import 'package:flutter/material.dart';
  3. class CustomCupertinoTabScaffold extends StatefulWidget {
  4.   @override
  5.   _CustomCupertinoTabScaffoldState createState() =>
  6.       _CustomCupertinoTabScaffoldState();
  7. }
  9. class _CustomCupertinoTabScaffoldState
  10.     extends State<CustomCupertinoTabScaffold> {
  11.   var _position = 0;
  12.   final iconsMap = {
  13.     //底栏图标
  14.     "图鉴": Icons.home, "动态": Icons.toys,
  15.     "喜欢": Icons.favorite, "手册": Icons.class_,
  16.     "我的": Icons.account_circle,
  17.   };
  19.   @override
  20.   Widget build(BuildContext context) {
  21.     return Container(
  22.       width: MediaQuery.of(context).size.width,
  23.       height: MediaQuery.of(context).size.height - 300,
  24.       child: CupertinoTabScaffold(
  25.           backgroundColor: Colors.grey.withAlpha(11),
  26.           tabBar: _buildTabBar(),
  27.           tabBuilder: (_, index) => _buildContent(index)),
  28.     );
  29.   }
  31.   CupertinoTabBar _buildTabBar() => CupertinoTabBar(
  32.         currentIndex: _position,
  33.         onTap: (value) => setState(() => _position = value),
  34.         items: iconsMap.keys
  35.             .map((e) => BottomNavigationBarItem(
  36.                   icon: Icon(
  37.                     iconsMap[e],
  38.                   ),
  39.                   title: Text(e),
  40.                 ))
  41.             .toList(),
  42.         activeColor: Colors.blue,
  43.         inactiveColor: Color(0xff333333),
  44.         backgroundColor: Color(0xfff1f1f1),
  45.         iconSize: 25.0,
  46.       );
  48.   _buildContent(int index) => Container(
  49.       alignment: Alignment.center,
  50.       child: Text(iconsMap.keys.toList()[index]),
  51.     );
  52. }