TabBar用到bottomNavigationBar
import 'package:flutter/material.dart';
import 'homepage.dart';
import 'lastpage.dart';
import 'secondpage.dart';
import 'thirdpage.dart'; void main()=>runApp(MyApp()); class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
} class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
} class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin{
TabController _tabController;
@override
void initState() {
// TODO: implement initState
_tabController=TabController(length: 4, vsync: this);
super.initState();
}
@override
void dispose() {
// TODO: implement dispose
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: Container(
color: Colors.lime,
child: TabBar(
controller: _tabController,
indicatorColor:Colors.orange,
unselectedLabelColor:Colors.white,
labelColor: Colors.orange,
tabs: <Widget>[
Tab(text: '业界动态',icon: Icon(Icons.update),),
Tab(text: 'WIDGET',icon: Icon(Icons.settings),),
Tab(text: '组件收藏',icon: Icon(Icons.favorite),),
Tab(text: '关于手册',icon: Icon(Icons.book),),
],
),
),
appBar: AppBar(
title: Text('雷克萨斯'),
),
body: TabBarView(
controller: _tabController,
children: <Widget>[
MainPage(),
SecondPage(),
ThirdPage(),
LastPage(),
],
),
);
}
}
TabBar用到bottomNavigationBar的更多相关文章
- TabBar + TabBarView导航风格
import 'package:flutter/material.dart'; import 'News.dart'; import 'Video.dart'; import 'Chat.dart'; ...
- Flutter - TabBar导航栏切换后,状态丢失
上一篇讲到了 Flutter - BottomNavigationBar底部导航栏切换后,状态丢失 里面提到了TabBar,这儿专门再写一下吧,具体怎么操作,来不让TabBar的状态丢失.毕竟大家99 ...
- Flutter - BottomNavigationBar底部导航栏切换后,状态丢失
如果你用过BottomNavigationBar.TabBar.还有Drawer,你就会发现,在切换页面之后,原来的页面状态就会丢失. 要是上一页有一个数据列表,很多数据,你滚动到了下头,切换页面后, ...
- Flutter学习笔记(16)--Scaffold脚手架、AppBar组件、BottomNavigationBar组件
如需转载,请注明出处:Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解 今天的内容是Scaffold脚手架.AppBar组件.BottomNavigationBa ...
- Flutter BottomNavigationBar 组件
BottomNavigationBar 是底部导航条,可以让我们定义底部 Tab 切换,bottomNavigationBar是 Scaffold 组件的参数. BottomNavigationBar ...
- flutter 自定义tabbar 给tabbar添加背景功能
flutter 自带的tabbar BottomNavigationBar有长按水波纹效果,不可以添加背景图片功能,如果有这方面的需求,就需要自定义tabbar了 自定义图片 我们使用BottomAp ...
- BottomNavigationBar 自定义 底部导航条
在flutter中,BottomNavigationBar 是底部导航条,可以让我们定义底部 Tab 切换,bottomNavigationBar是 Scaffold 组件的参数. BottomNav ...
- 【Flutter学习】基本组件之BottomNavigationBar底部导航栏
一,概述 BottomNavigationBar即是底部导航栏控件,显示在页面底部的设计控件,用于在试图切换,底部导航栏包含多个标签.图标或者两者搭配的形式,简而言之提供了顶级视图之间的快速导航. 二 ...
- 【Flutter】容器类组件之Scaffold、TabBar、底部导航
前言 一个完整的路由页可能会包含导航栏.抽屉菜单(Drawer)以及底部Tab导航菜单等.Flutter Material组件库提供了一些现成的组件来减少开发任务.Scaffold是一个路由页的骨架, ...
随机推荐
- leetcode — populating-next-right-pointers-in-each-node
/** * * Source : https://oj.leetcode.com/problems/populating-next-right-pointers-in-each-node/ * Sou ...
- Mac下charles安装及配置
一.下载地址 https://www.charlesproxy.com/download/ 激活码 Registered Name: https://zhile.io License Key: 488 ...
- .Net语言 APP开发平台——Smobiler学习日志:在应用中添加WeiXin组件
最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 控件说明 WeiXin组件. 效果演示 1. 分享好友 2. 分享朋友圈 图1 图2 ...
- [MySQL] 测试where group by order by的索引问题
1. select * from test where a=xx group by b order by c 如何加索引 CREATE TABLE `index_test` ( `id` int ...
- Eureka相关知识点
本文讲述的是 Eureka server, 服务提供者.消费者的一些概念和配置说明. Eureka Server 服务注册中心 Eureka的高可用设计 Eureka侧重点是AP,高可用;Eureka ...
- JAVA设计模式——开篇
设计模式很重要,重要性我就不再复述了.最主要的是,通常我们在写一定量代码后,常用的方法什么的都熟悉后,想再提高代码能力,我找到的最好的方法还是去学习,理解设计模式.不理解设计模式,看一些开源框架和ja ...
- 随意下载:afinal jar
刚才用到afinal,下载jar包到处要积分啥的,我花钱下载了,现在免费给兄弟们 链接: https://pan.baidu.com/s/1BmB-06ui1D2BfooUCi6xKg 提取码: m3 ...
- .net core 验证 Options 参数
.net core 中通过 PostConfigure 验证 Options 参数 Intro 在 .net core 中配置项推荐用 Options 来实现,有一些参数可能必须是用由用户来配置,不能 ...
- 测试系统工程师TSE需要具备的四项能力
文/杨学明 如今,国内所有的研发型的公司都有测试部门,无论测试团队大小,都有测试组长,测试经理,测试工程师等头衔,但随着产品和业务的质量要求越来越高,产品的市场竞争越来越激烈,公司领导对产品测试的要求 ...
- 【已解决】checkout 配置无效的问题可以进来看下
在日常工作中,我们经常会遇到要更新一个项目,但是由于更改了配置,需要将这些配置commit或者checkout,但是有的同学不想commit怎么办呢,只能通过checkout,那么问题又来了,改了很多 ...