1.backgroundColor属性

backgroundColor属性用于设定当前页面内容的背景色，默认使用的是ThemeData.scaffoldBackgroundColor 。

2.appBar属性（顶部标题栏）

appBar属性用于定义应用程序的顶部标题栏，显示在Scaffold的顶部区域。该属性值为AppBar类型组件，AppBar组件包含下表所示的常用属性用于设定顶部标题栏显示的效果。

属性名	类型	默认值	功能说明
leading	Widget	null	设置一个标题左侧显示的组件，如返回按钮
title	Widget	null	设置当前页面的标题名
actions	List< Widgst >	null	设施标题右侧显示的多个组件，如搜索按钮等
bottom	PreferredSizeWidget	null	设置一个在ToolBar标题栏下显示的Tab导航栏
backgroundcolor	Color	ThemeData.primaryColor	设置背景色
brightness	Brightness	ThemeData.primaryColorBrightness	设置AppBar的亮度（包括白色和黑色两种主题）
iconTheme	IconThemeData	ThemeData.primaryIconTheme	设置AppBar上图标的颜色、透明度和尺寸信息
textTheme	TextTheme	ThemeData.primaryTextTheme	设置AppBar上的文字样式
centerTitle	bool	TRUE	设置标题显示是否居中
flexibleSpace	Widget	null	设置一个显示在AppBar下的组件

appBar: AppBar(backgroundColor: Colors.red, //标题背景色title: Text("首页"),centerTitle: true, //调整标题处于中心位置// leading:Icon(Icons.person),//左侧图标iconTheme: IconThemeData(color: Colors.white, size: 30, opacity: 50),//右侧图标actions: [IconButton(onPressed: () {//点击事件print("我的");Navigator.pushNamed(context, '注册'); //需要修改-------------------},icon: Icon(Icons.search))],),

3.body属性（页面的主体部分）

body属性用于设定当前页面所显示的主要内容，它主要由多个Widget元素组成。

4.bottomNavigationBar属性（底部导航栏）

bottomNavigationBar属性用于定义应用程序的底部导航栏，主要由按钮加文字组成，可以实现点击按钮切换不同的页面，显示在Scaffold的底部区域。
该属性值为BottomNavigationBar类型组件，BottomNavigationBar组件包含下表所示的常用属性。

属性名	类型	功能说明
currentIndex	int	设置用于切换按钮的当前索引值
fixedColor	Color	设置选中按钮的颜色，如没有指定，则用系统主题色
iconSize	double	设置按钮图标大小
items	List< BottomNavigationBarItem>	设置底部导航栏按钮集，每一项是一个BottomNavigationBarItem，由icon图标及title文本属性组成
onTap	ValueChanged< int >	设置按下某一个按钮的回调事件，需要根据返回的索引值设置当前索引值

  //底部导航栏bottomNavigationBar: BottomNavigationBar(items: <BottomNavigationBarItem>[BottomNavigationBarItem(icon: Icon(Icons.home), label: "主页"),BottomNavigationBarItem(icon: Icon(Icons.add_a_photo), label: "拍照打卡"),BottomNavigationBarItem(icon: Icon(Icons.chat), label: "聊天"),//BottomNavigationBarItem(icon: Icon(Icons.person), label: "我的"),],//按下按钮的事件onTaponTap: (value) {print(value);select = value;},currentIndex: select, //当前选中的按钮type: BottomNavigationBarType.fixed,),

实现效果：

5.drawer属性（抽屉式左侧边栏）

drawer属性用于定义应用程序的左侧侧边栏，通常与ListView组件组合使用。Drawer组件包含下表所示的常用属性。

属性名	类型	默认值	功能说明
child	Widget		设置左侧侧边栏需要放置的可显示对象
elevation	double	16	设置.Material Design中组件的z坐标顺序

Drawer组件可以用DrawerHeader和UserAccountsDrawerHeader这两个组件添加头部效果。下面介绍UserAccountsDrawerHeader属性如下表。

//抽屉式左侧边栏drawer: Drawer(child: ListView(children: [UserAccountsDrawerHeader(accountName: Text('熊二',style: TextStyle(fontSize: 23,fontWeight: FontWeight.bold)),accountEmail: Text('2545996018@qq.com'),currentAccountPicture: CircleAvatar(backgroundImage: AssetImage("images/熊二.png") //圆形头像),onDetailsPressed: () {},otherAccountsPictures: [//二维码显示new Container(child: Image.asset("images/二维码.jpg"),)],),ListTile(leading: Icon(Icons.account_box), title: Text('账号管理')),ListTile(leading: Icon(Icons.location_on), title: Text('打卡记录')),ListTile(leading: Icon(Icons.phone), title: Text('手机号码')),ListTile(leading: Icon(Icons.message), title: Text('消息通知')),ListTile(leading: Icon(Icons.fastfood),title: Text('我的收藏'),),ListTile(leading: Icon(Icons.help), title: Text('帮助中心')),ListTile(leading: Icon(Icons.exit_to_app),title: Text('退出'),subtitle: Text('切换账号'),//点击事件回到登录页面onTap: () {Navigator.pushNamed(context, '注册');}),],),),

实现效果：

6.floatingActionButton属性

foatingActionButton属性用于定义应用程序页面上悬停在内容上面的一个圆形图标按钮，用以展示对应程序中的主要动作。该属性值为FloatingActionButton类型组件, FloatingActionButton组件包含下表所示的常用属性用于设定圆形图标的样式。

      floatingActionButton: FloatingActionButton(child: Icon(Icons.add_a_photo),tooltip: '拍照打卡',foregroundColor: Colors.white,backgroundColor: Colors.red,elevation: 10,highlightElevation: 20,onPressed: (){print('正在拍照！');},),floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,

实现效果：

Flutter中的Scaffold相关推荐

Flutter中的Scaffold组件
概述在开始说明Scaffold组件之前,先大致讲述一下Material Design风格.Material Design也成为纸墨设计风格,是由Google退出的全新的设计语言,这种设计语言旨在为手 ...
Flutter中Scaffold布局的使用详解及实例代码
Flutter中Scaffold布局的使用详解及实例代码 Scaffold实现了基本的Material布局.只要是在Material中定义了的单个界面显示的布局控件元素,都可以使用Scaffold来绘 ...
Flutter 中键盘弹起时，Scaffold 发生了什么变化
最近刚好有网友咨询一个问题,那就顺便借着这个问题给大家深入介绍下 Flutter 中键盘弹起时,Scaffold 的内部发生了什么变化,让大家更好理解 Flutter 中的输入键盘和 Scaffold ...
flutter中的生命周期函数
前言:生命周期是一个组件加载到卸载的整个周期,熟悉生命周期可以让我们在合适的时机做该做的事情, flutter中的State生命周期和android以及React Native的生命周期类似. 先看一 ...
在Flutter中嵌入Native组件的正确姿势
引言在漫长的从Native向Flutter过渡的混合工程时期,要想平滑地过渡,在Flutter中使用Native中较为完善的控件会是一个很好的选择.本文希望向大家介绍AndroidView的使用方式 ...
Flutter开发之Scaffold 脚手架的使用（39）
本篇文章学习Flutter入门进阶之旅(十六)Scaffold 脚手架并修改了部分代码增加了自定义的触发drawer.endDrawer的按钮和方法增加了自定义tab的图片和文本的功能涉及了on ...
mvp 在 flutter 中的应用
在 Android 应用程序开发过程中,我们经常会用到一些所谓的架构方法,如:mvp,mvvm,clean等.之所以这些方法会被推崇是因为他们可以大大的解耦我们的代码的功能模块,让我们的代码在项目中后 ...
在 Flutter 中使用 NavigationRail 和 BottomNavigationBar
在 Flutter 中使用 NavigationRail 和 BottomNavigationBar 作者:坚果公众号:"大前端之旅" 华为云享专家,InfoQ签约作者,阿里云专 ...
Flutter 中获取地理位置[Flutter专题61]
大家好,我是坚果,公众号"坚果前端" Flutter 中获取地理位置如今,发现用户位置是移动应用程序非常常见且功能强大的用例.如果您曾经尝试过在 Android 中实现位置,您就 ...

Flutter中的Scaffold

文章目录

1.backgroundColor属性

2.appBar属性（顶部标题栏）

3.body属性（页面的主体部分）

4.bottomNavigationBar属性（底部导航栏）

实现效果：

5.drawer属性（抽屉式左侧边栏）

实现效果：

6.floatingActionButton属性

实现效果：

Flutter中的Scaffold相关推荐

最新文章

热门文章