iOS-Flutter入门基础(九)- 搭建tabbar

热门标签

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

1:效果如下

iOS-Flutter入门基础(九)- 搭建tabbar
WechatIMG2 1.png

下载地址

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

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

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

iOS-Flutter入门基础(九)- 搭建tabbar
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配置for Mac -- VSCode
Flutter入门基础(一)-Label
Flutter入门基础(二)-Button
Flutter入门基础(三)-TextFile登录页
Flutter入门基础(四)-imageview
Flutter入门基础(五)-UITableView
Flutter入门基础(六)-UITableView(二)添加headerView
Flutter入门基础(七)-路由
Flutter入门基础(八)-push页面跳转
Flutter入门基础(九)- 搭建tabbar

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

标签:

未经允许不得转载:作者:SheaYang, 转载或复制请以 超链接形式 并注明出处 技术Dog|博客
原文地址:《iOS-Flutter入门基础(九)- 搭建tabbar》 发布于2019-09-26

分享到:
赞(0) 打赏

评论 抢沙发

2 + 6 =


iOS-Flutter入门基础(九)- 搭建tabbar

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.0主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。

登录

忘记密码 ?