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 标题,通常显 ...
随机推荐
- 【Mybatis】多对多实例
①创建数据库和表,数据库为mytest,表为users.orders和users_orders DROP TABLE IF EXISTS users; CREATE TABLE users( id I ...
- 封装方法公共文件common.js
/** * Created by Administrator on 2017/3/24. */ /** * 格式化日期 * @param dt 日期对象 * @returns {string} 返回值 ...
- 【代码笔记】Web-HTML-框架
一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- “由于无法验证发行者,所以WINDOWS已经阻止此软件”的解决方法
Vista 和 Windows7 系统都很注重系统的安全性,在提高安全性的同时,也给我们某些应用带来不便,例如需要安装插件或证书,可能会弹出“由于无法验证发行者,所以WINDOWS已经阻止此软件”的相 ...
- AngularJS ui-router刷新子页面路由
网上有各种刷新子页面路由的方法,但是不知道为什么放到我的页面就不行了,尴尬! 网上的方法有: <a href="#" ui-sref="app.toMenu&quo ...
- 听说你还不会用Dagger2?Dagger2 For Android最佳实践教程
前言 Dagger2是现在非常火的一个依赖注入框架,目前由Google维护,在Github上面已经有12K star了.Dagger2的入门门槛其实是比较高的,据了解,目前有很多Android工程师对 ...
- 解决ArrayList线程不安全
前些天做项目时,程序出现意外的问题,经后来分析是使用ArrayList这个线程不安全的方法导致 解决这个问题通常有两种方法(个人认为) 一:使用synchronized关键字,这个大家应该都很熟悉了, ...
- Video.js web视频播放器
免费视频播放器videojs中文教程 Video.js是一款web视频播放器,支持html5和flash两种播放方式.更多关于video.js的介绍,可以访问官方网站介绍,我之前也写过一篇关于vide ...
- plsql备份表---只是表---不包含表数据
写这个的同时还在备份,表的数据进度很慢,数据太大了. 用的工具是plsql 导出表:点击 tool工具 ---> export user object 导出用户目标 ----> ...
- Java中常用的字节流和字符流
IO流(输入流.输出流) 字节流.字符流 1.字节流: InputStream.OutputStream InputStream抽象了应用程序读取数据的方式: OutputStream抽象了应用程序写 ...