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是一个路由页的骨架, ...
随机推荐
- C语言数组操作和指针操作谁更高效
在上一篇博文 代码优化小技巧(持续更新......) 第三条关于数组和指针谁更高效, 意犹未尽, 决定单独拉出一篇来讲 1. 数组和指针操作对比 #include <stdio.h> i ...
- 如何限制用户仅通过HTTPS方式访问OSS?
一.当前存在的问题 当前OSS支持用户使用HTTPS/HTTP协议访问Bucket.但由于HTTP存在安全漏洞.大型企业客户都要求使用HTTPS方式访问OSS,并且拒绝HTTP访问请求. 目前OSS可 ...
- ServletRequest HttpServletRequest 请求方法 获取请求参数 请求转发 请求包含 请求转发与重定向区别 获取请求头字段
ServletRequest 基本概念 JavaWeb中的 "Request"对象 实际为 HttpServletRequest 或者 ServletRequest, ...
- 痞子衡嵌入式:常用的数据差错控制技术(3)- 和校验(Checksum)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家讲的是嵌入式里数据差错控制技术-和校验. 在系列前一篇文章里,痞子衡给大家介绍了比较简单的校验法-奇偶校验,该校验法主要是针对byte传输校验而 ...
- Valgrind简介
Valgrind是一款用于内存调试.内存泄漏检测以及性能分析的软件开发工具.
- 第62章 EntityFramework支持 - Identity Server 4 中文文档(v1.0.0)
为IdentityServer中的配置和操作数据扩展点提供了基于EntityFramework的实现.EntityFramework的使用允许任何EF支持的数据库与此库一起使用. 这个库的仓库位于这里 ...
- GC垃圾回收
我们在开发需求的时候,可能很少关注到垃圾回收,因为我们绝大多数的时候都是使用的托管资源,托管资源的内存回收.net已经帮我们做了,但是.net的内存回收不是实时的,所以我们还是要关注下.net的垃圾回 ...
- 利用scrollintoview方法模拟聊天室收到新消息
这段时间再写一个聊天的功能,基本的原理已经通了,剩下的就是细化功能和实现了.原理通了不代表就能解决了这个问题,今天就遇到了一个小问题,就是在接收到新的消息以后,最新的消息不能显示在消息区域,而是跑到了 ...
- 前端入门16-JavaScript进阶之EC和VO
声明 本系列文章内容全部梳理自以下几个来源: <JavaScript权威指南> MDN web docs Github:smyhvae/web Github:goddyZhao/Trans ...
- Redis过期策略
一.设置过期时间 expire key time(以秒为单位) -- 这是最常用的方式 setex(String key, int seconds, String value) -- 字符串独有的方式 ...