appbar导航
import 'package:flutter/material.dart';
import 'dart:ui'; 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 _controller;
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
void initState() {
super.initState();
_controller = TabController(length: 3, vsync: this);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Run for better future'),
bottom:TabBar(
tabs: <Widget>[
Tab(icon: Icon(Icons.accessibility),),
Tab(icon: Icon(Icons.description),),
Tab(icon: Icon(Icons.accessibility_new),),
],
controller: _controller,
),
),
body: TabBarView(
controller: _controller,
children: <Widget>[
Center(
child: Text(
'Realize your value with your life',
style: TextStyle(
color: Colors.green,
fontWeight: FontWeight.bold,
fontSize: 26,
),
),
),
Center(
child: Text(
'Play hard work hard',
style: TextStyle(
color: Colors.green,
fontWeight: FontWeight.bold,
fontSize: 26,
),
),
),
Center(
child: Text(
'Magic of everthing is hope',
style: TextStyle(
color: Colors.green,
fontWeight: FontWeight.bold,
fontSize: 26,
),
),
),
],
),
);
}
}
appbar导航的更多相关文章
- Flutter布局--appbar导航栏和状态栏
MaterialApp 先看下上图的具体用法:1. title:标题2. actions:表示右侧的按钮的动作3. leading:表示左侧的按钮的动作4. flexibleSpace:5. back ...
- Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航
Flutter中如何实现沉浸式透明Statusbar状态栏效果? 如下图:状态栏是指android手机顶部显示手机状态信息的位置.android 自4.4开始新加入透明状态栏功能,状态栏可以自定义颜色 ...
- 【Flutter】容器类组件之Scaffold、TabBar、底部导航
前言 一个完整的路由页可能会包含导航栏.抽屉菜单(Drawer)以及底部Tab导航菜单等.Flutter Material组件库提供了一些现成的组件来减少开发任务.Scaffold是一个路由页的骨架, ...
- dart实例
import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends S ...
- 07-容器类Widget
容器类Widget 容器类Widget一般只是包装其子Widget,对其添加一些修饰(补白或背景色等).变换(旋转或剪裁等).或限制(大小等) Padding Padding可以给其子节点添加补白(填 ...
- Flutter 简介(事件、路由、异步请求)
1. 前言 Flutter是一个由谷歌开发的开源移动应用软件开发工具包,用于为Android和iOS开发应用,同时也将是Google Fuchsia下开发应用的主要工具.其官方编程语言为Dart. 同 ...
- 背水一战 Windows 10 (40) - 控件(导航类): AppBar, CommandBar
[源码下载] 背水一战 Windows 10 (40) - 控件(导航类): AppBar, CommandBar 作者:webabcd 介绍背水一战 Windows 10 之 控件(导航类) App ...
- 【Flutter学习】基本组件之AppBar顶部导航栏
一,概述 AppBar 显示在app的顶部.AppBar包含5大部分,如下图: 二,构造函数及参数含义 构造函数 AppBar({ Key key, this.leading, //在标题前面显示的一 ...
- Flutter AppBar 自定义顶部导航按钮 图标、颜色 以及 TabBar 定义顶部 Tab 切换
Flutter AppBar 自定义顶部按钮图 标.颜色 属性 描述 leading 在标题前面显示的一个控件,在首页通常显示应用 的 logo;在其他界面通常显示为返回按钮 title 标题,通常显 ...
随机推荐
- 做webApp遇到的一些坑及解决方案
1.问题:手机端click事件会有大约300ms的延迟 原因:手机端事件touchstart-->touchmove-->touchend or touchcancel-->clic ...
- 洛谷P2447 [SDOI2010]外星千足虫(异或方程组)
题意 题目链接 Sol 异或高斯消元的板子题. bitset优化一下,复杂度\(O(\frac{nm}{32})\) 找最优解可以考虑高斯消元的过程,因为异或的特殊性质,每次向下找的时候找到第一个1然 ...
- node.js入门学习笔记整理
(1)node Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node与javaScript的区别在于,javaScript的顶层对象是window,而no ...
- vue-cli脚手架之build文件夹上半部
好,接下来一起分析分析配置文件^o^. build.js作用:命令npm run build的入口配置文件,主要用于生产环境. build.js中具体含义标注(vue-cli脚手架官方文件解释,大家可 ...
- Loadrunner 脚本开发-利用Loadrunner生成Web service测试脚本
脚本开发-利用Loadrunner生成Web service测试脚本 1.选择协议--Web Service,如下图 2.导入服务 入口1:点击Manage Services ->弹出窗中选择“ ...
- Web API与JWT认证
JWT(Json Web Token)定义了一种使用Json形式在网络间安全地传递信息的简洁开放的标准(RFC 7519).JWT使用数字签名确保信息是可信的. 一.Session认证和Token认 ...
- OneAPM大讲堂 | Java 异常日志记录最佳实践
[编者按]本文作者是 Casey Dunham.Casey 是一位具有 10 多年经验的专业软件开发人员,以其独特的方式应对应用安全问题而闻名.本文系国内 ITOM 管理平台 OneAPM 工程师编译 ...
- [20171205]uniq命令的输入输出.txt
[20171205]uniq命令的输入输出.txt --//前几天遇到XXD与通配符问题,链接http://blog.itpub.net/267265/viewspace-2147702/--//今天 ...
- python第三十一天-----类的封装、继承,多态.....
封装 封装最好理解了.封装是面向对象的特征之一,是对象和类概念的主要特性. 封装,也就是把客观事物封装成抽象的类,并且类可以把自己的数据和方法只让可信的类或者对象操作,对不可信的进行信息隐藏. cla ...
- SQLServer数据集合的交、并、差集运算
SQLServer2005通过intersect,union,except和三个关键字对应交.并.差三种集合运算. 他们的对应关系可以参考下面图示 相关测试实例如下: use tempdb go if ...