Flutter常用组件(Widget)解析-Scaffold
实现一个应用基本的布局结构。
举个栗子:
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: new CenterDemoPage() ,
);
}
} class CenterDemoPage extends StatefulWidget {
@override
createState() =>new CenterDemoPageState();
} class CenterDemoPageState extends State<CenterDemoPage> {
@override
Widget build(BuildContext context){
return new Scaffold(
appBar: new AppBar(
title: new Text('Scaffold Widget Demo'),
),
body: Center(
child: Text('scaffold'),
),
bottomNavigationBar: BottomAppBar(
child: Container(height: 50.0,),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
tooltip: 'Increment',
child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);
}
}
这个例子中的Scaffold包含了一个AppBar、BottomAppBar和一个FloatingActionButton,这个body的文本居中显示,并且底部导航栏的Add按钮通过FloatingActionButtonLocaton.centerDocked让其居中显示。
现在来看看Scaffold的几个重要属性:
1、appBar
appBar显示在Scaffold的顶部。
appBar: new AppBar(
title: new Text('Scaffold Widget Demo'),
centerTitle: true,
backgroundColor: Colors.red,
),
centerTitle:让文本居中显示。默认是居左显示
backgroundColor:导航栏背景颜色
2、backgroundColor 这个是整个Scaffold的背景颜色
3、body 主要内容的视图区域,在这个里面,展示的是你的核心内容
4、bottomNavigationBar 用于显示底部导航栏
5、floatingActionButton 浮动于body右上角的按钮
6、floatingActionButtonLocation 决定floatingActionButton按钮的位置
Flutter常用组件(Widget)解析-Scaffold的更多相关文章
- Flutter常用组件(Widget)解析-ListView
一个可滚动的列表组件 不管在哪,列表组件都尤为重要和常用. 首先来看个例子: import 'package:flutter/material.dart'; void main () => ru ...
- Flutter常用组件(Widget)解析-Container
一个组件它往往包含了一些常见的painting, positioning和sizing这样的小部件. Container相当于我们常用的div,在Flutter中用的非常多,现在来看看Containe ...
- Flutter常用组件(Widget)解析-Text
单一格式的文本. 文本组件是以字符串形式显示的单一格式,这个文本字符串可以是多行显示也可以是单独一行显示,主要取决于你的布局限制. 这样式内容是可选择的,如果你省略了,则会使用文本的默认样式来显示.如 ...
- Flutter常用组件(Widget)解析-Image
显示图片的组件 以下是几种加载图片路径方式: Image.asset 加载asset项目资源中的文件 Image.network 加载网络资源图片,通过url加载 Image.file 加载本地文件中 ...
- Flutter 常用组件
无状态组件(StatelessWidget)是不可变的,这意味着它的属性不能改变,所有的值都是最终的. 有状态组件(StatefulWidget)持有的状态可能在Widget生命周期中发生变化.实现一 ...
- Flutter常用布局组件
Flutter控件本身通常由许多小型.单用途的控件组成,结合起来产生强大的效果,例如,Container是一种常用的控件,由负责布局.绘画.定位和大小调整的几个控件组成,具体来说,Container是 ...
- Flutter 基础组件:Widget简介
概念 在Flutter中几乎所有的对象都是一个Widget.与原生开发中"控件"不同的是,Flutter中的Widget的概念更广泛,它不仅可以表示UI元素,也可以表示一些功能性的 ...
- Flutter学习笔记(9)--组件Widget
如需转载,请注明出处:Flutter学习笔记(9)--组件Widget 在Flutter中,所有的显示都是Widget,Widget是一切的基础,我们可以通过修改数据,再用setState设置数据(调 ...
- Ext 常用组件解析
Ext 常用组件解析 Panel 定义&常用属性 //1.使用initComponent Ext.define('MySecurity.view.resource.ResourcePanel' ...
随机推荐
- 7、完整版的strcpy函数
char * strcpy( char *strDest, const char *strSrc ) { assert( (strDest != NULL) && (strSrc != ...
- mysql外键(FOREIGNKEY)使用介绍
原文地址:http://www.2cto.com/database/201501/367791.html 一.基本概念 1.MySQL中“键”和“索引”的定义相同,所以外键和主键一样也是索引的一种.不 ...
- mysql 原理 ~ 常规锁
一 模式 RR模式二 mysql锁相关场景 1 有间隙的地方就可能有间隙锁,并非只有辅助索引的场景下才会存在gap lock,典型场景 id主键的范围查询 2 varchar的范围锁定原理和int ...
- Spring+CXF整合来管理webservice(服务器启动发布webservice)
Spring+CXF整合来管理webservice 实现步骤: 1. 添加cxf.jar 包(集成了Spring.jar.servlet.jar ),spring.jar包 ,serv ...
- 2017/05/02 java 基础 随笔
1.PrtSc键是截屏键 打开画图软件 ctrl+v就可以复制到 2.win7以上可以 在当前目录下shift+右键 3.junit和javaweb应用的main函数在哪里? java程序跑起 ...
- WebRTC架构和协议栈-zz
为了便于理解,我们来看一个最基本的三角形WebRTC架构(图4).在这个架构中,移动电话用“浏览器M”表示,笔记本电脑用“浏览器L”表示,通过Web服务器将它们连接起来.要建立一个实时媒体通讯,两台设 ...
- 修改BlackLowKey皮肤样式,增加占屏比
页面定制CSS代码 #home { margin: 0 auto; width: 100%; } #sideBar { min-height: 200px; padding: 0 5px 0 5px; ...
- js代码解析原则
js引擎在读取js代码时会进行两个步骤,第一个步骤是解释,第二个步骤是执行. 解释就是先通篇扫描所有的Js代码,然后把所有声明提升到顶端,第二步是执行,执行就是执行代码的操作. 例: 例子1: < ...
- SpringBoot三种配置Dubbo的方式
*必须首先导入dubbo-starter (1).使用SpringBoot配置文件(application.properties或application.yml) dubbo.application. ...
- Oracle把逗号分割的字符串转换为可放入in的条件语句的字符数列
Oracle把逗号分割的字符串转换为可放入in的条件语句的字符数列 前台传来的字符串:'589,321' SELECT*FROM TAB_A T1 WHERE T1.CODE IN ( SEL ...