Fetures:

• 全使用iOS風(fēng)格widget（CupertinoTabBar搭配CupertinoTabScaffold）
• tabBar上菜單可自由設(shè)置顯示風(fēng)格（包括圖標(biāo)、字體大小顏色）

Attention:

• 此入口類(lèi)CupertinoTabScaffold內(nèi)未設(shè)置navigationBar， navigationBar最好都在各自page頁(yè)內(nèi)設(shè)置，這樣可自定制navigationBar上顯示的不同元素。（如果在此入口類(lèi)設(shè)置了navigationBar，各tab首頁(yè)page的navigationBar上顯示元素就會(huì)一致，個(gè)性化定制各page的navigationBar就需要加入更多的邏輯，建議navigationBar分散到各自的page頁(yè)去實(shí)現(xiàn)）

main.dart

import 'package:flutter/cupertino.dart';
import 'package:myapp/src/EngwordsPage.dart';
import 'package:myapp/src/SamplePage.dart';
import 'package:myapp/src/FirstPage.dart';
import 'package:myapp/src/ListPage.dart';

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyMainState createState() => new _MyMainState();
}

class _MyMainState extends State<MyApp> {
  // 默認(rèn)索引第一個(gè)tab
  int _tabIndex = 0;

  // 正常情況的字體樣式
  final tabTextStyleNormal = new TextStyle(color: const Color(0xff969696));

  // 選中情況的字體樣式
  final tabTextStyleSelect = new TextStyle(color: const Color(0xff63ca6c));

  // 底部菜單欄圖標(biāo)數(shù)組
  var tabImages;

  // 頁(yè)面內(nèi)容
  var _pages;

  // 菜單文案
  var tabTitles = ['推薦', '資訊', '發(fā)現(xiàn)', '我的'];

  // 路由map
  Map<String, WidgetBuilder> _routes = new Map();

  // 生成image組件
  Image getTabImage(path) {
    return new Image.asset(path, width: 20.0, height: 20.0);
  }

  void initData() {
    if (tabImages == null) {
      tabImages = [
        [
          getTabImage('assets/images/ic_nav_news_normal.png'),
          getTabImage('assets/images/ic_nav_news_actived.png')
        ],
        [
          getTabImage('assets/images/ic_nav_tweet_normal.png'),
          getTabImage('assets/images/ic_nav_tweet_actived.png')
        ],
        [
          getTabImage('assets/images/ic_nav_discover_normal.png'),
          getTabImage('assets/images/ic_nav_discover_actived.png')
        ],
        [
          getTabImage('assets/images/ic_nav_my_normal.png'),
          getTabImage('assets/images/ic_nav_my_pressed.png')
        ]
      ];
    }

    _pages = [
      new EngwordsPage(),
      new SamplePage(),
      new ListWidget("發(fā)現(xiàn)"),
      new FirstPage()
    ];

  //獲取菜單欄字體樣式
  TextStyle getTabTextStyle(int curIndex) {
    if (curIndex == _tabIndex) {
      return tabTextStyleSelect;
    } else {
      return tabTextStyleNormal;
    }
  }

  // 獲取圖標(biāo)
  Image getTabIcon(int curIndex) {
    if (curIndex == _tabIndex) {
      return tabImages[curIndex][1];
    }
    return tabImages[curIndex][0];
  }

  // 獲取標(biāo)題文本
  Text getTabTitle(int curIndex) {
    return new Text(
      tabTitles[curIndex],
      style: getTabTextStyle(curIndex),
    );
  }

  // 獲取BottomNavigationBarItem
  List<BottomNavigationBarItem> getBottomNavigationBarItem() {
    List<BottomNavigationBarItem> list = new List();
    for (int i = 0; i < 4; i++) {
      list.add(new BottomNavigationBarItem(
          icon: getTabIcon(i), title: getTabTitle(i)));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    initData();
    return new CupertinoApp(
      title: "Demo",
      theme: new CupertinoThemeData(
        primaryColor: CupertinoColors.darkBackgroundGray,
      ),
      routes: _routes,
      home: new CupertinoTabScaffold(
        tabBar: CupertinoTabBar(
          items: getBottomNavigationBarItem(),
          currentIndex: _tabIndex,
          onTap: (index) {
            setState(() {
              _tabIndex = index;
            });
          },
        ),
        tabBuilder: (BuildContext context, int index) {
          return CupertinoTabView(
            builder: (BuildContext context) {
              return CupertinoPageScaffold(
                child: _pages[index],
                // navigationBar: CupertinoNavigationBar(
                //   middle: Text(tabTitles[index]),
                //   trailing: _trailingButtons[index],
                // ),
              );
            },
          );
        },
      ),
    );
  }
}

FirstPage.dart

import 'package:flutter/cupertino.dart';

class FirstPage extends StatefulWidget {
  @override
  FirstPageState createState() => new FirstPageState();
}

class FirstPageState extends State<FirstPage> {
  final rt = new CupertinoButton(
      child: new Image.asset("assets/images/nav_close.png"),
      onPressed: () {
        print("right clicked");
      },
    );
  
  @override
  Widget build(BuildContext context) {
    return new CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text("First"),
        trailing: rt,
        border: Border.all(width: 0, color: CupertinoColors.darkBackgroundGray),
      ),
      child: new Container(
        child: new Center(
          child: new Text(
            "這是第一個(gè)界面",
            style: new TextStyle(
              color: CupertinoColors.darkBackgroundGray,
              fontSize: 18,
            ),
          ),
        ),
      ),
    );
  }
}

其他類(lèi)（EngwordsPage.dart、SamplePage.dart）都是如此的UI結(jié)構(gòu)。

Effects：

capture1.png

capture2.png

capture3.png