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 标题,通常显 ...
随机推荐
- Why is one loop so much slower than two loops?
Question: Suppose a1, b1, c1, and d1 point to heap memory and my numerical code has the following co ...
- C#特性之数据类型
这篇文章主要通过演示类在不同发展中的不通过定义方法,来向读者表述它们之间的区别和联系. 在C#1时代,我们喜欢这样定义类: public class Product { private string ...
- windows使用笔记-安装64位windows7家庭普通版的方法
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 从msdn网站:http://msdn.itellyou.cn/ 下载<cn_windows_7_ultimate_wit ...
- 纯css抖动效果
HTML: <button class="shake">按钮</button> CSS: .shake{ width: 120px; height: 33p ...
- [VUE ERROR] Duplicate keys detected: 'tab-user'. This may cause an update error.
错误消息如图: 如果你看到此错误消息,则说明 v-for 指令的 key值 重复了,只需修改你的 key值 让其不会重复即可.
- Login case
第一步:画UI,代码如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" ...
- Java并发编程(五)Lock
一.synchronized的缺陷 synchronized是java中的一个关键字,也就是说是Java语言内置的特性.那么为什么会出现Lock呢? 在上面一篇文章中,我们了解到如果一个代码块被syn ...
- recovery log直接输出到串口
我们在调试recovery升级的时候,我们经常需要查看recovery的log,google的原始逻辑中,recovery的log并非直接输出到串口,我们需要输入命令才能获取,我们有三种方式: 第一种 ...
- mv,rm等命令出现unrecognized option提示的解决方法
出现这个提示,一般是由于命令操作的文件名最前面有"--"字符, 让命令误以为是--开头的长选项 解决: 命令后加上"--", shell把 -- 之后的参数当做 ...
- NAudio音频文件转换
1.NuGet安装 NAudio,项目及demo的网址:https://github.com/naudio/NAudio Encode to MP3, WMA and AAC with MediaFo ...