Flutter入门基础（九）- 搭建tabbar

1：效果如下

WechatIMG2 1.png

下载地址

用iOSer的角度来说，我们要创建的是底部tabbarController的建设。对于flutter在搭建的时候有比较常用的有两种情况
1：home节点试试一个dart页面
2：home节点是一个bottomNavigationBar

2：下面是工程的目录环境

NOTICE:我把工程的建设文件统一放到app文件下，里面有bottomNavigationBar的设置，和MateriaApp的设置。还有网络设置的类库

WechatIMG3.jpeg

3：程序启动配置

main函数启动
这里直接使用app_scene.dart函数，可直接调用

import 'package:flutter/material.dart';
import 'package:mine_sold/app/app_scene.dart';

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

4: 设置home节点

MaterialApp 设置一个主题色，和iOS在设置tabbar对应她vc的类似。home节点需要添加对应bottomNavigationBar，添加对应tabbar内容。

注意添加tabbar的数量至少要大于等于2！！！！
注意添加tabbar的数量至少要大于等于2！！！！
注意添加tabbar的数量至少要大于等于2！！！！
（重要的事情要说三遍）

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:mine_sold/app/root_scene.dart';

class AppScene extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title:'MINE',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Colors.white,
        dividerColor: Colors.red,
        scaffoldBackgroundColor: Colors.red,
        textTheme: TextTheme(body1: TextStyle(color: Colors.red))
      ),
      home: RootScene(),
    );
  }
}

5: 添加tabbar的BottomNavigationBarItem

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:mine_sold/home/home_scene.dart';
import 'package:mine_sold/mine/mine_scene.dart';

class RootScene extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => RootSceneState();
}

class RootSceneState extends State<RootScene> {

  int _tabIndex = 0;
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context){
    return Scaffold(
      body: IndexedStack(
        children: <Widget>[
          HomeScene(),
          MineScene()
        ],
        index: _tabIndex,
      ),
      bottomNavigationBar: CupertinoTabBar(
        backgroundColor: Colors.white,
        activeColor: Colors.red,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Image.asset('img/tab_me_n.png'), title: Text('书架')),
          BottomNavigationBarItem(icon: Image.asset('img/tab_me_p.png'), title: Text('我的')),
        ],
        currentIndex: _tabIndex,
        onTap: (index) {
          setState(() {
            _tabIndex = index;
          });
        },
      ),
    );
  }
}

1:可以看到有一个_tabindex变量，和一个currentIndex这一对key和value.这就是来控制选中哪一个item的设置。
2:点击事件-就是onTap(index){},可获取当前点击的索引给_tabIndex即可。
3:更新UI
也看和settimeout函数一样，可在主线中刷新的功能

setState(() {
         _tabIndex = index;
   });

• 如有问题可添加QQ群:234812704
• 欢迎各位一块学习，提高逼格！
• 也可以添加洲洲哥的微信公众号

可以来微信公众号（洲洲哥）后台给我留言。 快来扫码关注我们吧！

公众号二维码