flutter组件之Scaffold用法

Scaffold介绍：

Scaffold：Material Design布局结构的基本实现。

提供展示抽屉（drawers，比如：侧边栏）、通知（snack bars） 以及 底部按钮（bottom sheets）。

也就是说， MaterialApp 的 child 是 Scaffold Widget。

Scaffold主要属性：

主要的属性如下：

---

appBar：显示在界面顶部的一个 AppBar

body：当前界面所显示的主要内容

floatingActionButton： 在 Material 中定义的一个功能按钮。

persistentFooterButtons：固定在下方显示的按钮。

drawer：侧边栏控件

bottomNavigationBar：显示在底部的导航栏按钮栏。

backgroundColor：背景颜色

resizeToAvoidBottomPadding： 控制界面内容 body

是否重新布局来避免底部被覆盖了，比如当键盘显示的时候，重新布局避免被键盘盖住内容。默认值为 true。

extendBodyBehindAppBar：默认false，从导航栏下面开始布局，true为从屏幕最顶部开始布局

@override

Widgetbuild(BuildContext context) {

return Scaffold(

appBar: _appBar(),

    extendBodyBehindAppBar:false,

  );

}

AppBar_appBar() {

return AppBar(

title:Text(

'设置',

      style:TextStyle(color: Colors.black,fontSize:20,fontWeight: FontWeight.bold)

),

    backgroundColor: Colors.white,

    elevation:0.0,//阴影值

  );

}

Scaffold - AppBar，参考：AppBar详解

AppBar({ 

Key key, 

this.leading, //widget类型，即可任意设计样式，表示左侧leading区域，通常为icon，如返回icon 

this.automaticallyImplyLeading = true, // 如果leading!=null，该属性不生效；如果leading==null且为true，左侧leading区域留白；如果leading==null且为false，左侧leading区域扩展给title区域使用 

this.title,//widget类型，即可任意设计样式，表示中间title区域，通常为标题栏 

this.actions,// List类型，即可任意设计样式，表示右侧actions区域，可放置多个widget，通常为icon，如搜索icon、菜单icon 

this.flexibleSpace, 

this.bottom, //PreferredSizeWidget类型，appbar底部区域，通常为Tab控件 

this.elevation, //阴影高度，默认为4 this.shape,//ShapeBorder 类型，表示描边形状 

this.backgroundColor, //Color类型，背景色 

this.brightness,//Brightness类型，表示当前appbar主题是亮或暗色调，有dark和light两个值，可影响系统状态栏的图标颜色 

this.iconTheme, //IconThemeData类型，可影响包括leading、title、actions中icon的颜色、透明度，及leading中的icon大小。 

this.actionsIconTheme, 

this.textTheme,// TextTheme类型，文本主题样式，可设置appbar中文本的许多样式，如字体大小、颜色、前景色、背景色等... 

this.primary = true,//true时，appBar会以系统状态栏高度为间距显示在下方；false时，会和状态栏重叠，相当于全屏显示。 

this.centerTitle, // boolean 类型，表示标题是否居中显示 

this.titleSpacing = NavigationToolbar.kMiddleSpacing,//title区域水平方向与leading和actions的间距(padding) 

this.toolbarOpacity = 1.0,//toolbar区域透明度 

this.bottomOpacity = 1.0,//bottom区域透明度 } 

AppBar - leading用法

leading: IconButton(

    onPressed:_backAction,

    icon:Image.asset('images/backIcon.png',width:20,height:20),

),

void _backAction(){

   print("点我返回按钮");

}