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的更多相关文章

  1. TabBar + TabBarView导航风格

    import 'package:flutter/material.dart'; import 'News.dart'; import 'Video.dart'; import 'Chat.dart'; ...

  2. Flutter - TabBar导航栏切换后,状态丢失

    上一篇讲到了 Flutter - BottomNavigationBar底部导航栏切换后,状态丢失 里面提到了TabBar,这儿专门再写一下吧,具体怎么操作,来不让TabBar的状态丢失.毕竟大家99 ...

  3. Flutter - BottomNavigationBar底部导航栏切换后,状态丢失

    如果你用过BottomNavigationBar.TabBar.还有Drawer,你就会发现,在切换页面之后,原来的页面状态就会丢失. 要是上一页有一个数据列表,很多数据,你滚动到了下头,切换页面后, ...

  4. Flutter学习笔记(16)--Scaffold脚手架、AppBar组件、BottomNavigationBar组件

    如需转载,请注明出处:Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解 今天的内容是Scaffold脚手架.AppBar组件.BottomNavigationBa ...

  5. Flutter BottomNavigationBar 组件

    BottomNavigationBar 是底部导航条,可以让我们定义底部 Tab 切换,bottomNavigationBar是 Scaffold 组件的参数. BottomNavigationBar ...

  6. flutter 自定义tabbar 给tabbar添加背景功能

    flutter 自带的tabbar BottomNavigationBar有长按水波纹效果,不可以添加背景图片功能,如果有这方面的需求,就需要自定义tabbar了 自定义图片 我们使用BottomAp ...

  7. BottomNavigationBar 自定义 底部导航条

    在flutter中,BottomNavigationBar 是底部导航条,可以让我们定义底部 Tab 切换,bottomNavigationBar是 Scaffold 组件的参数. BottomNav ...

  8. 【Flutter学习】基本组件之BottomNavigationBar底部导航栏

    一,概述 BottomNavigationBar即是底部导航栏控件,显示在页面底部的设计控件,用于在试图切换,底部导航栏包含多个标签.图标或者两者搭配的形式,简而言之提供了顶级视图之间的快速导航. 二 ...

  9. 【Flutter】容器类组件之Scaffold、TabBar、底部导航

    前言 一个完整的路由页可能会包含导航栏.抽屉菜单(Drawer)以及底部Tab导航菜单等.Flutter Material组件库提供了一些现成的组件来减少开发任务.Scaffold是一个路由页的骨架, ...

随机推荐

  1. 【ASP.NET Core快速入门】(一)环境安装

    下载.NET Core SDK 下载地址:https://www.microsoft.com/net/download/windows https://www.microsoft.com/net/le ...

  2. web前端安全

    之前对web前端安全进行了总结,想给大家分享一下,有不对的地方,大家多多交流,由于写在了PPT上,只好给大家一张一张粘上来,希望大家不要在意,了解知识为主

  3. springmvc 项目完整示例01 需求与数据库表设计 简单的springmvc应用实例 web项目

    一个简单的用户登录系统 用户有账号密码,登录ip,登录时间 打开登录页面,输入用户名密码 登录日志,可以记录登陆的时间,登陆的ip 成功登陆了的话,就更新用户的最后登入时间和ip,同时记录一条登录记录 ...

  4. JavaScript用法

    JavaScript 用法 JavaScript 语句,会在页面加载时执行. <body> 中的 JavaScript <!DOCTYPE html> <html> ...

  5. Mysql中的WITH ROLLUP用法

    1.WITH ROLLUP:在group分组字段的基础上再进行统计数据. 例子:首先在name字段上进行分组,然后在分组的基础上进行某些字段统计,表结构如下: CREATE TABLE `test` ...

  6. 【转】Android 开发规范(完结版)

    摘要 1 前言 2 AS 规范 3 命名规范 4 代码样式规范 5 资源文件规范 6 版本统一规范 7 第三方库规范 8 注释规范 9 测试规范 10 其他的一些规范 1 前言 为了有利于项目维护.增 ...

  7. Bable实现由ES6转译为ES5

    Babel是一个广泛使用的转码器,可以将ES6代码转译为ES5代码,从而在现有环境下执行. 举例说明: 转译前(ES6格式)代码如下: let User = { name : '张三', age : ...

  8. JavaScript 为什么要有 Symbol 类型?

    Symbols 是 ES6 引入了一个新的数据类型 ,它为 JS 带来了一些好处,尤其是对象属性时. 但是,它们能为我们做些字符串不能做的事情呢? 在深入探讨 Symbol 之前,让我们先看看一些 J ...

  9. bootstrap思考一

    bootstrap是一种热门的Web前端流行框架,如果要兼容PC端.手机端和响应式布局,那他一定是我的首选.bootstrap内容很多,功能强大,其中最好入门也是很重要的就是他的栅格系统.他有四个典型 ...

  10. 【20190305】CSS-响应式图片:srcset+sizes,picture,svg

    响应式图片可以根据不同的设备屏幕大小从而选择加载不同的图片,从而节省带宽.实现响应式图片有三种方法:srcset+sizes属性.picture标签.svg 1. srcset+sizes srcse ...