15-flutter Scaffold详解
Scaffold
是一个实现基本的material design 的布局结构
| appBar | 显示在界面顶部的一个 AppBar |
|---|---|
| body | 当前界面所显示的主要内容 Widget |
| floatingActionButton | Material 设计中所定义的 FAB，界面的主要功能按钮 |
| persistentFooterButtons | 固定在下方显示的按钮，比如对话框下方的确定、取消按钮 |
| drawer | 抽屉菜单控件 |
| backgroundColor | 内容的背景颜色，默认使用的是 ThemeData.scaffoldBackgroundColor 的值 |
| bottomNavigationBar | 显示在页面底部的导航栏 |
| resizeToAvoidBottomPadding | 控制界面内容 body 是否重新布局来避免底部被覆盖了，比如当键盘显示的时候，重新布局避免被键盘盖住内容。默认值为 true。 |
1 AppBar
class MyApp extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(appBar: myAppBar(),body: Text("data"),),);}
}// 创建一个AppBar
AppBar myAppBar(){return new AppBar(//标题title: new Text("自定义标题"),// 标题居中centerTitle: true,//按钮actions: <Widget>[new IconButton(icon: new Icon(Icons.favorite),onPressed: (){print("点击了小心心阿牛");},// 长按进行提示文字tooltip: '这是干什么操作的',),new IconButton(icon: new Icon(Icons.sentiment_dissatisfied),onPressed: (){print("第二个按钮");},// 长按进行提示文字tooltip: '这是干什么操作的',)],);
}
2 Drawer 抽屉
Drawer myDrawer(BuildContext context){return new Drawer(child: ListView(padding: EdgeInsets.all(5),children: <Widget>[// 抽屉头部DrawerHeader(decoration: BoxDecoration(color: Colors.lightBlueAccent,),child: Center(child: SizedBox(width: 80,height: 80,child: CircleAvatar(child: Icon(Icons.face),),),),),ListTile(title: Text("第一行"),leading: new CircleAvatar(child: new Icon(Icons.face),),onTap: (){Navigator.pop(context);},),ListTile(title: Text("第二行"),leading: new CircleAvatar(child: new Icon(Icons.fastfood),),onTap: (){Navigator.pop(context);},),],),);}
3 悬浮的按钮
Widget build(BuildContext context) {return MaterialApp(theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(appBar: myAppBar(),body: Text("data"),drawer: myDrawer(context),// 悬浮的按钮 在右下角floatingActionButton: new FloatingActionButton(tooltip: 'Add', // used by assistive technologieschild: new Icon(Icons.add),onPressed: null,),// 悬浮按钮的位置 中间 右边 左边，默认是右边floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,),);}
}4 底部的导航栏 bottomNavigationBar
class _BottomBarState extends State{int _currentIndex = 1;// 点击项目的回调void _onItemTapped(int index) {if(mounted) {setState(() {_currentIndex = index;});}}@overrideWidget build(BuildContext context) {return BottomNavigationBar(// BottomNavigationBarType 中定义的类型，有 fixed 和 shifting 两种类型type: BottomNavigationBarType.fixed, // BottomNavigationBarItem 中 icon 的大小iconSize: 24.0, // 当前所高亮的按钮indexcurrentIndex: _currentIndex, // 点击里面的按钮的回调函数，参数为当前点击的按钮 indexonTap: _onItemTapped, // 选中时候fixedColor: Colors.blue, items: <BottomNavigationBarItem> [BottomNavigationBarItem(title: Text("商场"), icon: Icon(Icons.local_grocery_store)),BottomNavigationBarItem(title: Text("航班"), icon: Icon(Icons.local_airport)),BottomNavigationBarItem(title: Text("旅行"), icon: Icon(Icons.card_travel)),BottomNavigationBarItem(title: Text("我的"), icon: Icon(Icons.apps)),],);}
}
相关文章：
成本管理系统开源_开源教科书如何降低大学成本
成本管理系统开源Over the past 10 years, the cost of textbooks in the US has increased by 88%. This has contributed to more than $1 trillion in total student loan debt, which Americans are struggling pay back.在过去的10年中，美国的教科书成本增加了…
OA项目12：系统管理之用户管理
首注：本学习教程为传智播客汤阳光讲师所公布的免费OA项目视频我的文字版实践笔记，本人用此来加强巩固自己开发知识，如有网友转载，请注明。谢谢。 一 之前在第8节时已经将User实体及映射文件建立好了，所以设计实体已…
16-flutter-Swiper 插件的使用
Flutter-Swiper 插件的使用 1 在pubspec.ymal 中去导入插件 dependencies:flutter:sdk: flutter# The following adds the Cupertino Icons font to your application.# Use with the CupertinoIcons class for iOS style icons.cupertino_icons: ^0.1.2flutter_swiper: ^1.1…
NPOI导Excel样式设置
一、创建一个Excel //创建一个工作簿 XSSFWorkbook workbook new XSSFWorkbook(); //创建一个页 ISheet sheet workbook.CreateSheet("sheet1"); //创建一行 IRow row sheet.CreateRow(0); //创建一列 ICell ce…
谢尔盖.布林的早期思想_谷歌联合创始人谢尔盖·布林（Sergey Brin）谈人工智能与自动化...
谢尔盖.布林的早期思想Here are three links worth your time:这是三个值得您花费时间的链接： Google cofounder Sergey Brin talks about AI, automation, and the future of education (34 minute watch) Google联合创始人谢尔盖布林(Sergey Brin)谈论人工智能&a…
17-flutter导航栏渐变效果
MediaQuery.removePadding 移除顶部的 padding import package:flutter/material.dart; // 导入swiper 组件 import package:flutter_swiper/flutter_swiper.dart;const APPBAR_SCROLL_OFFSET 200; class HomePage extends StatefulWidget {// 重写Create State 方法override…
链表之逆转链表
链表之逆转链表 传入一个Node指针，将它指向的链表进行逆置，返回逆置后的新链表，注意操作过程中不要额外申请空间，即在传入的链表中进行节点逆置. 代码： Node * reverse_list(Node *head){Node * preNULL;Node * curhea…
如何使用Redux-saga和ReactDnD测试React和Redux（哇！）
by Gregory Beaver通过格雷戈里海狸 如何使用Redux-saga和ReactDnD测试React和Redux(哇！) (How to test React and Redux with Redux-saga and ReactDnD (whew!)) 帮助程序和系统使测试更加容易 (Helpers and systems to make testing easier) This article is the…
18-flutter的Future和FutureBuilder
Future 表示接卸来某个时间的值或者错误，借助Future可以在flutter 总实现异步操作。 其本事是dart：async 包中的一个类，使用它的时候需要导入dart:async 包，Future 有两种状态。 pending 执行中completed 执行结束 ，…
js控制使div自动适应居中
一直都在想怎么样使弹出的DIV能在任何时候都是居中显示的，刚开始的时候是用CSS样式直接定义好层的位置，但是当页面很长的时候，或是浏览器窗口大小不是固定的时候就不能正确的显示，所以只好用JS来控制DIV的显示位置。首先再次详细解…
【poj3420】 Quad Tiling
http://poj.org/problem?id3420 (题目链接) 题意 给出$n*m$的网格，用$1*2$的方块覆盖有多少种方案。 Solution 数据很大，不能直接搞了，我们矩乘一下。0表示已放置，1表示未放置。dfs跑出一个$16*16$的转移矩阵，然后矩乘…
bokeh pandas_使用Pandas和Bokeh将Rolling Stone的500张最伟大专辑可视化
bokeh pandasby Gautham Koorma通过Gautham Koorma 使用Pandas和Bokeh将Rolling Stone的500张最伟大专辑可视化 (Rolling Stone’s 500 Greatest Albums Visualized Using Pandas and Bokeh) In 2003, Rolling Stones Magazine polled musicians, producers, and industry exe…
使用WinINet和WinHTTP实现Http訪问
使用WinINet和WinHTTP实现Http訪问 飘飘白云 l_zhaohui163.com 2007-11-30 Http訪问有两种方式，GET和POST，就编程来说GET方式相对简单点，它不用向server提交数据，在这个例程中我使用POST方式，提交数据value1与value2&a…
19-flutter的ListView 和 GridView的使用
ListView 的水平样式 和垂直样式 1 水平列表 import package:flutter/material.dart;const CITY_LIST ["北京","上海","广州","深圳","南京","郑州","武汉"];void main() > runApp(MyApp());clas…
linux下ndk编译命令行程序及配置
1.在http://developer.android.com/tools/sdk/ndk/index.html下载Android-ndk-r8e-linux-x86.tar.bz2，解压后把android-ndk-r8e添加到环境变量PATH中,例如， export PATH$PATH:/opt/studydisk/android-ndk-r8e 2.新建一个文件夹，如helloword&a…
vs2017数据可视化建模_介绍数据可视化社区调查2017
vs2017数据可视化建模by lars verspohl由拉斯韦斯波尔 介绍数据可视化社区调查2017 (Introducing the Data Visualization Community Survey 2017) Data visualization is a funny fish. It sort of stands on its own feet (or fins), but is also intimately entangled with…
20-flutter下拉刷新与上拉加载
1 RefreshIndicator 下拉刷新控件 下拉刷新的时候会回调 onRefresh 方法 RefreshIndicator(onRefresh: _handleRefresh,child: ListView(children: _buildList(),), ),2 上拉加载多 上拉加载更多的时候 override void initState() { super.initState();_scrollController.a…
PHP+redis实现超迷你全文检索
2014年10月31日 11:45:39 情景: 我们平台有好多游戏, 运营的同事在查询某一款游戏的时候, 目前使用的是html的select下拉列表的展现形式, 运营的同事得一个个去找,然后选中,耗时又费眼 效果: 输入"三国"或者"国三", 将自动列出所有包含"三国"的游…
Linux下的Shell编程（2）环境变量和局部变量
Shell Script是一种弱类型语言，使用变量的时候无需首先声明其类型。 局部变量在本地数据区分配内存进行存储，这个变量归当前的Shell所有，任何子进 程都不能访问本地变量。这些变量与环境变量不同，环境变量被存储在另一内存区&…
上拉电阻和下拉电阻_硬件基础：下拉电阻和上拉电阻如何工作
上拉电阻和下拉电阻by Taron Foxworth通过塔伦福克斯沃思(Taron Foxworth) 硬件基础：下拉电阻和上拉电阻如何工作 (Hardware fundamentals: how pull-down and pull-up resistors work) If you’ve ever wired up a button to an Arduino, you’ve come across thi…
时间序列学习笔记4
6. 重采样及频率转换 重采样（resample）表示将时间序列的频率进行转换的过程。可以分为降采样和升采样等。 pandas对象都有一个resample方法，可以进行频率转换。 In [5]: rng pd.date_range(1/1/2000, periods100, freqD)In [6]: ts Series(…
linux驱动编程入门实例
编辑 /*****hello.c*******/ #include <linux/init.h> #include <linux/module.h> #include <linux/kernel.h> MODULE_LICENSE("Dual BSD/GPL"); static int hello_init() { printk("<1>hello\n"); return 0; } static void hello…
iOS UIView快速添加事件
给UIView 做一个延展 // // UIViewSKTap.h // MeiGouYouPin // // Created by coder on 2019/10/29. // Copyright © 2019 AlexanderYeah. All rights reserved. // #import <UIKit/UIKit.h> NS_ASSUME_NONNULL_BEGIN typedef void(^TapBlock)(void); interfac…
node.js中模块_在Node.js中需要模块：您需要知道的一切
node.js中模块by Samer Buna通过Samer Buna 在Node.js中需要模块：您需要知道的一切 (Requiring modules in Node.js: Everything you need to know) Update: This article is now part of my book “Node.js Beyond The Basics”.更新：这篇文章现在是我…
Sublime Text3配置Node.js开发环境
下载Nodejs插件，下载zip压缩包后解压链接: http://pan.baidu.com/s/1hsBk60k 密码: jrcv打开Sublime Text3，点击菜单“首选项（N）” >“浏览插件（B）”打开“Packages”文件夹，并将第1部的Node…
修改mysql的root密码
use msyql; update user set passwordpassword(新密码) where userroot; flush privileges; quitnet stop mysql #如果提示 发生系统错误5，就用管理员身份启动cmd.exe 转载于:https://www.cnblogs.com/walter371/p/4065904.html
iOS 开发之便捷宏定义
#define URL(A/*str*/) [NSURL URLWithString:A]// 图片 #define IMAGE(A/*str*/) [UIImage imageNamed:A]// 快速转换字符串 #define LD_STR(A/*str*/) [NSString stringWithFormat:"%ld",A] #define F2_STR(A/*str*/) [NSString stringWithFormat:"%.2f"…
rspec 测试页面元素_如何使用共享示例使您的RSpec测试干燥
rspec 测试页面元素by Parth Modi由Parth Modi 如何使用共享示例使您的RSpec测试干燥 (How to DRY out your RSpec Tests using Shared Examples) “Give me six hours to chop down a tree and I will spend the first four sharpening the axe.” — Abraham Lincoln“ 给我…
Windows搭建以太坊的私有链环境
Windows搭建以太坊的私有链环境 1、下载Geth.exe 运行文件，并安装https://github.com/ethereum/go-ethereum/releases/下载后，只有一个Geth.exe的文件2、cmd进入按章目录运行：geth -help看看是否可用geth命令3、在Geth安装目录下放置初始化创…
前50个斐波那契数
它有一个递推关系，f(1)1f(2)1f(n)f(n-1)f(n-2),其中n>23f(n)f(n2)f(n-2)-------------------------------------------- F(1) 1 F(2) 1 F(3) 2 F(4) 3 F(5) 5 F(6) 8 F(7) 13 F(8) 21 F(9) 34 F(10) 55 F(11) 89 F(12) 144 F(13) 233 F(14) 377 F(…