12、封装一个常用app框架

封装的一个 BottomTabBar组件

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

class BottomTabBar extends StatefulWidget {
  @override
  _TabBarState createState() => new _TabBarState(
      this.normalIcons,
      this.selectedIcons,
      this.titles,
      this.pages,
      this.normalColor,
      this.selectedColor,
      this.fontSize);

  BottomTabBar(
      {Key key,
      this.normalIcons,
      this.selectedIcons,
      this.titles,
      this.pages,
      this.normalColor = Colors.grey,
      this.selectedColor = Colors.green,
      this.fontSize = 10.0})
      : assert(normalIcons != null),
        assert(selectedIcons != null),
        assert(titles != null),
        assert(pages != null),
        super(key: key);

  final List<Widget> normalIcons;
  final List<Widget> selectedIcons;
  final List<String> titles;
  final List<Widget> pages;
  final Color normalColor;
  final Color selectedColor;
  final double fontSize;
}

class _TabBarState extends State<BottomTabBar> {
  final List<Widget> normalIcons;
  final List<Widget> selectedIcons;
  final List<String> titles;
  final List<Widget> pages;
  final Color normalColor;
  final Color selectedColor;
  final double fontSize;

  int _tabIndex = 0;

  _TabBarState(this.normalIcons, this.selectedIcons, this.titles, this.pages,
      this.normalColor, this.selectedColor, this.fontSize);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(titles[_tabIndex],
            style: new TextStyle(color: Colors.white)),
      ),
      body: new IndexedStack(
        children: pages,
        index: _tabIndex,
      ),
      bottomNavigationBar: new CupertinoTabBar(
        items: () {
          List<BottomNavigationBarItem> items = [];
          for (int i = 0; i < normalIcons.length; i++) {
            items.add(new BottomNavigationBarItem(
                icon: i == _tabIndex ? selectedIcons[i] : normalIcons[i],
                title: new Text(titles[i],
                    style: new TextStyle(
                        fontSize: fontSize))));
          }
          return items;
        }(),
        activeColor: selectedColor,
        inactiveColor: normalColor,
        currentIndex: _tabIndex,
        onTap: (index) {
          setState(() {
            _tabIndex = index;
          });
        },
      ),
    );
  }
}

BottomTabBar的使用

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'pages/DiscoveryPage.dart';
import 'pages/MyInfoPage.dart';
import 'pages/NewsListPage.dart';
import 'pages/TweetsListPage.dart';
import 'BottomTabBar.dart';


void main() {
  List<Widget> selectedIcons = [
    new Image.asset(
        'images/ic_nav_news_actived.png', width: 20.0, height: 20.0),
    new Image.asset(
        'images/ic_nav_tweet_actived.png', width: 20.0, height: 20.0),
    new Image.asset(
        'images/ic_nav_discover_actived.png', width: 20.0, height: 20.0),
    new Image.asset('images/ic_nav_my_pressed.png', width: 20.0, height: 20.0)
  ];
  List<Widget> normalIcons = [
    new Image.asset('images/ic_nav_news_normal.png', width: 20.0, height: 20.0),
    new Image.asset(
        'images/ic_nav_tweet_normal.png', width: 20.0, height: 20.0),
    new Image.asset(
        'images/ic_nav_discover_normal.png', width: 20.0, height: 20.0),
    new Image.asset('images/ic_nav_my_normal.png', width: 20.0, height: 20.0)
  ];

  List<Widget> pages = [
    new NewsListPage(),
    new TweetsListPage(),
    new DiscoveryPage(),
    new MyInfoPage()
  ];

  runApp(new MaterialApp(title: 'tabbar',
      theme: new ThemeData(primaryColor: Colors.green),
      home: new BottomTabBar(
        normalIcons: normalIcons,
        selectedIcons: selectedIcons,
        pages: pages,
        titles: ['资讯', '动态', '发现', '我的'],
        normalColor: Colors.grey,
        selectedColor: Colors.green,
        fontSize: 10.0,
      )));
}

效果

Simulator Screen Shot - iPhone X - 2018-08-16 at 19.02.02.png

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    爱运动爱学习阅读 15,360评论 3 114
  • 内在差异外在体现
    陈东Growth阅读 47评论 0 0
  • 我如果爱你——绝不像攀援的凌霄花借你的高枝炫耀自己 我如果爱你——绝不学痴情的鸟儿为绿荫重复单调的歌曲 也不止像泉...
    随风老童阅读 159评论 0 1
  • 这个故事或许不是那么动听,或许不是那么生动,可故事中的我,经历着不想经历的人生。 如同大多数大学生一样,即将毕业的...
    Ammonia_阅读 271评论 0 1
  • 这几天感觉好累,身心俱疲。可能是因为连续工作、周末没有休息的原因。以前,别说周末加班,就是连续加两个通宵的班,也不...
    兰桂腾芳阅读 177评论 0 2
  • 首先,Promise并不是发源于javascript,它最早被提出于E语言中. 那到底什么是Promise,它是抽...
    baiying阅读 237评论 4 2