flutter tabbar创建与显示
效果图
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创建与显示的更多相关文章
- MFC编程入门之十五(对话框:一般属性页对话框的创建及显示)
属性页对话框包括向导对话框和一般属性页对话框两类,上一节讲了如何创建并显示向导对话框,本节将继续介绍一般属性页对话框的创建和显示. 实际上,一般属性页对话框的创建和显示过程和向导对话框是很类似的.将上 ...
- MFC编程入门之十二(对话框:非模态对话框的创建及显示)
上一节讲了模态对话框及其弹出过程,本节接着讲另一种对话框--非模态对话框的创建及显示. 非模态对话框显示后,程序其他窗口仍然能正常运行,可以响应用户输入,还可以相互切换.上一讲中创建的Tip模态对话框 ...
- 创建、显示和删除保存的用户名和密码(cmdkey)
创建,显示和删除保存的用户名和密码: cmdkey.exe /add:targetname /user:username /pass:password
- VS2010/MFC对话框:向导对话框的创建及显示
向导对话框的创建及显示 本节将为大家演示如何创建向导对话框. 仍然以前面的“加法计算器”的例子为基础,在其中加入向导对话框,我们可以用它来说明加法计算器的使用方法,一步一步引导用户操作,这也是比较常见 ...
- VS2010/MFC对话框:一般属性页对话框的创建及显示
一般属性页对话框的创建及显示 本节将介绍一般属性页对话框的创建和显示. 实际上,一般属性页对话框的创建和显示过程和向导对话框是很类似的.鸡啄米将上一节中的向导对话框进行少量修改,使其成为一般属性页对话 ...
- VS2010/MFC对话框:非模态对话框的创建及显示
非模态对话框的创建及显示 上一节讲了模态对话框及其弹出过程,本节接着讲另一种对话框--非模态对话框的创建及显示. 已经说过,非模态对话框显示后,程序其他窗口仍能正常运行,可以响应用户输入,还可以相互切 ...
- 科学计算三维可视化---TVTK入门(创建和显示三维对象)
一:创建一个基本的三维对象 (一)长方体操作 traits:就是TVTK对象的属性 (1)对象属性操作 >>> from tvtk.api import tvtk >>& ...
- VS2010/MFC编程入门之十五(对话框:一般属性页对话框的创建及显示)
属性页对话框包括向导对话框和一般属性页对话框两类,上一节鸡啄米讲了如何创建并显示向导对话框,本节将继续介绍一般属性页对话框的创建和显示. 实际上,一般属性页对话框的创建和显示过程和向导对话框是很类似的 ...
- VS2010/MFC编程入门之十二(对话框:非模态对话框的创建及显示)
上一节鸡啄米讲了模态对话框及其弹出过程,本节接着讲另一种对话框--非模态对话框的创建及显示. 鸡啄米已经说过,非模态对话框显示后,程序其他窗口仍能正常运行,可以响应用户输入,还可以相互切换.鸡啄米会将 ...
随机推荐
- ThinkPHP依赖注入
D:\wamp64\www\thinkphp5.1\tp5.1\application\index\controller\Demo1.php文件 <?php namespace app\inde ...
- Delphi ComboBox组件
- centos 7 私有云盘 OwnCloud 安装搭建脚本
#!/bin/bash #Build LAMP Server Conf mysql_secure_installation service mariadb restart systemctl enab ...
- php关于系统环境配置的一些函数
disk_free_space() :返回指定目录的可用空间(以字节为单位)
- vs code 保存显示无法写入文件的解决方法
右键文件夹点击属性 选择安全 把当前用户权限都勾选上就可以了
- vuex , 简单入(liao)门(jie)
vuex什么 ? 官方的说法就是 vuex是专门为vue.js应用程序开发的 状态管理模式 .并采用集中式存储 , 管理应用的所有组件的状态 ,并以相同的规则保证状态以一种可预估的方式发生变化. 自己 ...
- 吴恩达+neural-networks-deep-learning+第二周作业
Logistic Regression with a Neural Network mindset v4 简单用logistic实现了猫的识别,logistic可以被看做一个简单的神经网络结构,下面是 ...
- 我在做评论功能时学到的js一些思路
在提交评论的时候,如何判断是一级评论还是二级评论(因为都是通过一个文本域提交评论),思路:声明一个全局变量,如果是回复(二级评论)那么会触发点击回复事件,在这个事件的回调函数里给全局变量设置为true ...
- java8中规范的四大函数式接口
java8中规范的四大函数式接口: 1.Consumer<T> :消费型接口 void accept(T t); 2.Supplier<T> :供给型接口 ...
- Java类路径的问题
下面是eclipse中的文件组织形式. 下面是硬盘中文件的组织形式: src:中就是自己编写的没有编译的代码. target中是编译的Java中的class文件和一些不用编译的文件.这样也就明白了为什 ...