flutter Bottom Navigation

Bottom Navigation Bar

先看下官方文档以及demo，然后动手做一些修改，完成一个接地气的demo

• 官方文档 BottomNavigationBar class

• demo链接Using Bottom Navigation Bar

跑完demo会发觉tabBar很粗糙，而我们一般想要的却是那种icon在上标题在下的效果，那该如何修改呢？为了更好的开发，先新建四个目录，按照模块放置对应的文件。

image image

在app目录下新建文件app_tabBar,导入对应的头文件。cupertino 是一种iOS的风格组件，本篇中我们只用到CupertinoTabBar

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

主体代码

@override
  Widget build(BuildContext context) {
    if (!isFinishSetup) {
      return Container();
    }
    return Scaffold(
      body:  IndexedStack(
        children: <Widget>[Home(),Discover(),Me()],
        index: _tabIndex,
      ),
      bottomNavigationBar: CupertinoTabBar(
        backgroundColor: Colors.white,
        activeColor: Colors.orange,
        items:  <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: getTabIcon(0), title: Text('首页')),
          BottomNavigationBarItem(icon: getTabIcon(1), title: Text('发现')),
          BottomNavigationBarItem(icon: getTabIcon(2), title: Text('我的')),
        ],
        currentIndex: _tabIndex,
        onTap: (index) {
          setState(() {
            _tabIndex = index;
          });
        },
      ),
    );
  }

写完run一下：页面切换正常，但tabBar只显示字体没有icon，这时需要我们在pubspec.yaml 里面设置下资源路径（很奇怪，好像需要每张图片都要添加，烦死，暂时还不知有什么技巧可以解决这个问题QAQ～～～）

  assets:
  - img/tab_home_normal.png
  - img/tab_discover_normal.png
  - img/tab_me_normal.png
  - img/tab_home_select.png
  - img/tab_discover_select.png
  - img/tab_me_select.png

图片资源的命名规则是:在该目录下新建子文件夹命名为n.0x, 其中该子文件夹里面的像素为n倍.如果在使用Image.asset时，不考虑像素，可以直接设置大小

Image.asset(_tabImages[index],width: 20.0,height: 20.0);

####### 完整代码

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_app_hello/home/home.dart';
import 'package:flutter_app_hello/discover/discover.dart';
import 'package:flutter_app_hello/me/me.dart';

class AppTabBar extends  StatefulWidget {
  @override
  State<StatefulWidget> createState() => AppTabBarState();
}

class AppTabBarState extends State<AppTabBar>{
  int _tabIndex = 0;
  bool isFinishSetup = false;
  List<String> _tabImages = [
    'img/tab_home_normal.png',
    'img/tab_discover_normal.png',
    'img/tab_me_normal.png',
  ];
  List<String> _tabSelectedImages = [
    'img/tab_home_select.png',
    'img/tab_discover_select.png',
    'img/tab_me_select.png',
  ];

  @override

  void initState() {
    super.initState();
    setupApp();
  }
  @override
  void dispose() {
    super.dispose();
  }
  setupApp() async {
    setState(() {
      //to do
      isFinishSetup = true;
    });
  }

  @override

  Widget build(BuildContext context) {
    if (!isFinishSetup) {
      return Container();
    }
    return Scaffold(
      body:  IndexedStack(
        children: <Widget>[Home(),Discover(),Me()],
        index: _tabIndex,
      ),
      bottomNavigationBar: CupertinoTabBar(
        backgroundColor: Colors.white,
        activeColor: Colors.orange,
        items:  <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: getTabIcon(0), title: Text('首页')),
          BottomNavigationBarItem(icon: getTabIcon(1), title: Text('发现')),
          BottomNavigationBarItem(icon: getTabIcon(2), title: Text('我的')),
        ],
        currentIndex: _tabIndex,
        onTap: (index) {
          setState(() {
            _tabIndex = index;
          });
        },
      ),
    );
  }

  Image getTabIcon(int index) {
    if (index == _tabIndex) {
      return Image.asset(_tabSelectedImages[index],width: 20.0,height: 20.0);
    } else {
      return  Image.asset(_tabImages[index],width: 20.0,height: 20.0);
    }
  }
}

import 'package:flutter/material.dart';
import 'package:flutter_app_hello/app/app_tabBar.dart';

void main() {
  runApp(AppHello());
}

class AppHello extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'XXXX',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new AppTabBar(),
    );
  }
}

image