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是一个路由页的骨架, ...
随机推荐
- Spring基础系列--AOP织入逻辑跟踪
原创作品,可以转载,但是请标注出处地址:https://www.cnblogs.com/V1haoge/p/9619910.html 其实在之前的源码解读里面,关于织入的部分并没有说清楚,那些前置.后 ...
- C# 在PPT幻灯片中创建图表
图表能够很直观的表现数据在某个时间段的变化趋势,或者呈现数据的整体和局部之间的相互关系,相较于大篇幅的文本数据,图表更增加了我们分析数据时选择的多样性,是我们挖掘数据背后潜在价值的一种更为有效地方式. ...
- 移动端web自适应适配布局解决方案
100%还原设计图,要注意: 看布局,分析结构. 感觉难点在于: 1.测量精度(ps测量数据): 2.文字的行高. 前段时间写个移动端适配的页面(刚接触这方面),查了一些资料,用以下方法能实现: 1. ...
- 01-css的引入方式
[转]01-css的引入方式 引入css方式(重点掌握) 行内样式 内接样式 外接样式 3.1 链接式 3.1 导入式 css介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述 ...
- Vue利用canvas实现移动端手写板
<template> <div class="hello"> <!--touchstart,touchmove,touchend,touchcance ...
- Git 最佳实践:分支管理
5月份,为统一团队git分支管理规范,刚开始准备自己写,在网上搜了下,发现不少不错的git分支管理实践.最后我为团队选择了这个git分支管理实践 A successful Git branching ...
- Linux(DeepInOS) 下 mysql 的安装与基本配置
索引: 目录索引 参看代码 GitHub: DeepIn(GNU/Linux) MySQL 一.安装 sudo apt-get install mysql-server 期间需要输入两次密码,root ...
- Kafka 特性
Kafka 特性 标签(空格分隔): Kafka 支持多个生产者 多个生成者连接Kafka来推送消息,这个和其他的消息队列功能基本上是一样的 支持多个消费者 Kafka支持多个消费者来读取同一个消息流 ...
- 目录命令(dir)
DIR 命令: // 描述: (Directory) 显示目录的文件和子目录的列表. // 语法: dir [<Drive>:][<Path>][<FileName> ...
- 虚拟机 与 host主机,无法ping通的问题
这个写的比较简单,先做以下记录 centos虚拟机安装到别的电脑上,因为linux中的程序需要向外有网络互通,所以需要重新设置ip 通过 ifconfig eth4 192.168.0.20 bro ...