效果图

main.dart

import 'package:flutter/material.dart';
import 'pages/index_page.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '百姓生活+',
home: IndexPage(),
theme: ThemeData.light(),
);
}
}

indexPage.dart

import 'package:flutter/material.dart';
import 'home_page.dart';
import 'category_page.dart';
import 'cart_page.dart';
import 'person_page.dart'; class IndexPage extends StatefulWidget {
@override
_IndexPageState createState() => _IndexPageState();
} class _IndexPageState extends State<IndexPage> { final List<BottomNavigationBarItem> bottomTabs = [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('首页')
),
BottomNavigationBarItem(
icon: Icon(Icons.category),
title: Text('分类')
),
BottomNavigationBarItem(
icon: Icon(Icons.shopping_cart),
title: Text('购物车')
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
title: Text('我的')
)
]; final List tabBodies = [
HomePage(),
CategoryPage(),
CartPage(),
PersonPage()
]; int currentIndex = 0; var currentPage; void initState(){
currentPage = tabBodies[currentIndex];
super.initState();
} @override
Widget build(BuildContext context) {
return Scaffold(
body: currentPage,
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: currentIndex,
items: bottomTabs,
onTap: (index){
setState(() {
currentIndex = index;
currentPage = tabBodies[index];
});
},
)
);
}
}

home_page.dart


import 'package:flutter/material.dart'; class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('HomePage')),
);
}
}

category_page.dart


import 'package:flutter/material.dart'; class CategoryPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('CategoryPage')),
);
}
}

cart_page.dart


import 'package:flutter/material.dart'; class CartPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('CartPage')),
);
}
}

person_page.dart


import 'package:flutter/material.dart'; class PersonPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('PersonPage')),
);
}
}

flutter tabbar创建与显示的更多相关文章

  1. MFC编程入门之十五(对话框:一般属性页对话框的创建及显示)

    属性页对话框包括向导对话框和一般属性页对话框两类,上一节讲了如何创建并显示向导对话框,本节将继续介绍一般属性页对话框的创建和显示. 实际上,一般属性页对话框的创建和显示过程和向导对话框是很类似的.将上 ...

  2. MFC编程入门之十二(对话框:非模态对话框的创建及显示)

    上一节讲了模态对话框及其弹出过程,本节接着讲另一种对话框--非模态对话框的创建及显示. 非模态对话框显示后,程序其他窗口仍然能正常运行,可以响应用户输入,还可以相互切换.上一讲中创建的Tip模态对话框 ...

  3. 创建、显示和删除保存的用户名和密码(cmdkey)

    创建,显示和删除保存的用户名和密码: cmdkey.exe /add:targetname /user:username /pass:password

  4. VS2010/MFC对话框:向导对话框的创建及显示

    向导对话框的创建及显示 本节将为大家演示如何创建向导对话框. 仍然以前面的“加法计算器”的例子为基础,在其中加入向导对话框,我们可以用它来说明加法计算器的使用方法,一步一步引导用户操作,这也是比较常见 ...

  5. VS2010/MFC对话框:一般属性页对话框的创建及显示

    一般属性页对话框的创建及显示 本节将介绍一般属性页对话框的创建和显示. 实际上,一般属性页对话框的创建和显示过程和向导对话框是很类似的.鸡啄米将上一节中的向导对话框进行少量修改,使其成为一般属性页对话 ...

  6. VS2010/MFC对话框:非模态对话框的创建及显示

    非模态对话框的创建及显示 上一节讲了模态对话框及其弹出过程,本节接着讲另一种对话框--非模态对话框的创建及显示. 已经说过,非模态对话框显示后,程序其他窗口仍能正常运行,可以响应用户输入,还可以相互切 ...

  7. 科学计算三维可视化---TVTK入门(创建和显示三维对象)

    一:创建一个基本的三维对象 (一)长方体操作 traits:就是TVTK对象的属性 (1)对象属性操作 >>> from tvtk.api import tvtk >>& ...

  8. VS2010/MFC编程入门之十五(对话框:一般属性页对话框的创建及显示)

    属性页对话框包括向导对话框和一般属性页对话框两类,上一节鸡啄米讲了如何创建并显示向导对话框,本节将继续介绍一般属性页对话框的创建和显示. 实际上,一般属性页对话框的创建和显示过程和向导对话框是很类似的 ...

  9. VS2010/MFC编程入门之十二(对话框:非模态对话框的创建及显示)

    上一节鸡啄米讲了模态对话框及其弹出过程,本节接着讲另一种对话框--非模态对话框的创建及显示. 鸡啄米已经说过,非模态对话框显示后,程序其他窗口仍能正常运行,可以响应用户输入,还可以相互切换.鸡啄米会将 ...

随机推荐

  1. ThinkPHP依赖注入

    D:\wamp64\www\thinkphp5.1\tp5.1\application\index\controller\Demo1.php文件 <?php namespace app\inde ...

  2. Delphi ComboBox组件

  3. centos 7 私有云盘 OwnCloud 安装搭建脚本

    #!/bin/bash #Build LAMP Server Conf mysql_secure_installation service mariadb restart systemctl enab ...

  4. php关于系统环境配置的一些函数

    disk_free_space()  :返回指定目录的可用空间(以字节为单位)

  5. vs code 保存显示无法写入文件的解决方法

    右键文件夹点击属性 选择安全 把当前用户权限都勾选上就可以了

  6. vuex , 简单入(liao)门(jie)

    vuex什么 ? 官方的说法就是 vuex是专门为vue.js应用程序开发的 状态管理模式 .并采用集中式存储 , 管理应用的所有组件的状态 ,并以相同的规则保证状态以一种可预估的方式发生变化. 自己 ...

  7. 吴恩达+neural-networks-deep-learning+第二周作业

    Logistic Regression with a Neural Network mindset v4 简单用logistic实现了猫的识别,logistic可以被看做一个简单的神经网络结构,下面是 ...

  8. 我在做评论功能时学到的js一些思路

    在提交评论的时候,如何判断是一级评论还是二级评论(因为都是通过一个文本域提交评论),思路:声明一个全局变量,如果是回复(二级评论)那么会触发点击回复事件,在这个事件的回调函数里给全局变量设置为true ...

  9. java8中规范的四大函数式接口

    java8中规范的四大函数式接口: 1.Consumer<T>   :消费型接口    void accept(T t); 2.Supplier<T>      :供给型接口  ...

  10. Java类路径的问题

    下面是eclipse中的文件组织形式. 下面是硬盘中文件的组织形式: src:中就是自己编写的没有编译的代码. target中是编译的Java中的class文件和一些不用编译的文件.这样也就明白了为什 ...