Flutter iOS风格基础UI框架搭建

Fetures:

• 全使用iOS风格widget（CupertinoTabBar搭配CupertinoTabScaffold）
• tabBar上菜单可自由设置显示风格（包括图标、字体大小颜色）

Attention:

• 此入口类CupertinoTabScaffold内未设置navigationBar， navigationBar最好都在各自page页内设置，这样可自定制navigationBar上显示的不同元素。（如果在此入口类设置了navigationBar，各tab首页page的navigationBar上显示元素就会一致，个性化定制各page的navigationBar就需要加入更多的逻辑，建议navigationBar分散到各自的page页去实现）

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> {
  // 默认索引第一个tab
  int _tabIndex = 0;

  // 正常情况的字体样式
  final tabTextStyleNormal = new TextStyle(color: const Color(0xff969696));

  // 选中情况的字体样式
  final tabTextStyleSelect = new TextStyle(color: const Color(0xff63ca6c));

  // 底部菜单栏图标数组
  var tabImages;

  // 页面内容
  var _pages;

  // 菜单文案
  var tabTitles = ['推荐', '资讯', '发现', '我的'];

  // 路由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("发现"),
      new FirstPage()
    ];

  //获取菜单栏字体样式
  TextStyle getTabTextStyle(int curIndex) {
    if (curIndex == _tabIndex) {
      return tabTextStyleSelect;
    } else {
      return tabTextStyleNormal;
    }
  }

  // 获取图标
  Image getTabIcon(int curIndex) {
    if (curIndex == _tabIndex) {
      return tabImages[curIndex][1];
    }
    return tabImages[curIndex][0];
  }

  // 获取标题文本
  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(
            "这是第一个界面",
            style: new TextStyle(
              color: CupertinoColors.darkBackgroundGray,
              fontSize: 18,
            ),
          ),
        ),
      ),
    );
  }
}

其他类（EngwordsPage.dart、SamplePage.dart）都是如此的UI结构。

Effects：

capture1.png capture2.png capture3.png