实现一个应用基本的布局结构。

举个栗子:

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的更多相关文章

  1. Flutter常用组件(Widget)解析-ListView

    一个可滚动的列表组件 不管在哪,列表组件都尤为重要和常用. 首先来看个例子: import 'package:flutter/material.dart'; void main () => ru ...

  2. Flutter常用组件(Widget)解析-Container

    一个组件它往往包含了一些常见的painting, positioning和sizing这样的小部件. Container相当于我们常用的div,在Flutter中用的非常多,现在来看看Containe ...

  3. Flutter常用组件(Widget)解析-Text

    单一格式的文本. 文本组件是以字符串形式显示的单一格式,这个文本字符串可以是多行显示也可以是单独一行显示,主要取决于你的布局限制. 这样式内容是可选择的,如果你省略了,则会使用文本的默认样式来显示.如 ...

  4. Flutter常用组件(Widget)解析-Image

    显示图片的组件 以下是几种加载图片路径方式: Image.asset 加载asset项目资源中的文件 Image.network 加载网络资源图片,通过url加载 Image.file 加载本地文件中 ...

  5. Flutter 常用组件

    无状态组件(StatelessWidget)是不可变的,这意味着它的属性不能改变,所有的值都是最终的. 有状态组件(StatefulWidget)持有的状态可能在Widget生命周期中发生变化.实现一 ...

  6. Flutter常用布局组件

    Flutter控件本身通常由许多小型.单用途的控件组成,结合起来产生强大的效果,例如,Container是一种常用的控件,由负责布局.绘画.定位和大小调整的几个控件组成,具体来说,Container是 ...

  7. Flutter 基础组件:Widget简介

    概念 在Flutter中几乎所有的对象都是一个Widget.与原生开发中"控件"不同的是,Flutter中的Widget的概念更广泛,它不仅可以表示UI元素,也可以表示一些功能性的 ...

  8. Flutter学习笔记(9)--组件Widget

    如需转载,请注明出处:Flutter学习笔记(9)--组件Widget 在Flutter中,所有的显示都是Widget,Widget是一切的基础,我们可以通过修改数据,再用setState设置数据(调 ...

  9. Ext 常用组件解析

    Ext 常用组件解析 Panel 定义&常用属性 //1.使用initComponent Ext.define('MySecurity.view.resource.ResourcePanel' ...

随机推荐

  1. 7、完整版的strcpy函数

    char * strcpy( char *strDest, const char *strSrc ) { assert( (strDest != NULL) && (strSrc != ...

  2. mysql外键(FOREIGNKEY)使用介绍

    原文地址:http://www.2cto.com/database/201501/367791.html 一.基本概念 1.MySQL中“键”和“索引”的定义相同,所以外键和主键一样也是索引的一种.不 ...

  3. mysql 原理 ~ 常规锁

    一 模式 RR模式二 mysql锁相关场景  1 有间隙的地方就可能有间隙锁,并非只有辅助索引的场景下才会存在gap lock,典型场景 id主键的范围查询  2 varchar的范围锁定原理和int ...

  4. Spring+CXF整合来管理webservice(服务器启动发布webservice)

    Spring+CXF整合来管理webservice    实现步骤:      1. 添加cxf.jar 包(集成了Spring.jar.servlet.jar ),spring.jar包 ,serv ...

  5. 2017/05/02 java 基础 随笔

    1.PrtSc键是截屏键   打开画图软件  ctrl+v就可以复制到 2.win7以上可以  在当前目录下shift+右键 3.junit和javaweb应用的main函数在哪里? java程序跑起 ...

  6. WebRTC架构和协议栈-zz

    为了便于理解,我们来看一个最基本的三角形WebRTC架构(图4).在这个架构中,移动电话用“浏览器M”表示,笔记本电脑用“浏览器L”表示,通过Web服务器将它们连接起来.要建立一个实时媒体通讯,两台设 ...

  7. 修改BlackLowKey皮肤样式,增加占屏比

    页面定制CSS代码 #home { margin: 0 auto; width: 100%; } #sideBar { min-height: 200px; padding: 0 5px 0 5px; ...

  8. js代码解析原则

    js引擎在读取js代码时会进行两个步骤,第一个步骤是解释,第二个步骤是执行. 解释就是先通篇扫描所有的Js代码,然后把所有声明提升到顶端,第二步是执行,执行就是执行代码的操作. 例: 例子1: < ...

  9. SpringBoot三种配置Dubbo的方式

    *必须首先导入dubbo-starter (1).使用SpringBoot配置文件(application.properties或application.yml) dubbo.application. ...

  10. Oracle把逗号分割的字符串转换为可放入in的条件语句的字符数列

    Oracle把逗号分割的字符串转换为可放入in的条件语句的字符数列   前台传来的字符串:'589,321' SELECT*FROM TAB_A T1 WHERE  T1.CODE  IN ( SEL ...