iOS-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;
   });

Flutter入门基础(十)- 图解修改应用名称及图标

人已赞赏
iOS文章

iOS深入了解ReactiveCocoa的使用(一)

2019-9-26 14:05:03

iOS文章

iOS深入了解ReactiveCocoa的使用(二)

2019-9-26 15:05:53

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索