Flutter中Scaffold布局的使用详解及实例代码

Scaffold实现了基本的Material布局。只要是在Material中定义了的单个界面显示的布局控件元素，都可以使用Scaffold来绘制。

继承关系：Object > Diagnosticable > DiagnosticableTree > Widget > StatefulWidget > Scaffold。

源码

/// See also:
///
///  * [AppBar], which is a horizontal bar typically shown at the top of an app
///    using the [appBar] property.
///  * [BottomAppBar], which is a horizontal bar typically shown at the bottom
///    of an app using the [bottomNavigationBar] property.
///  * [FloatingActionButton], which is a circular button typically shown in the
///    bottom right corner of the app using the [floatingActionButton] property.
///  * [Drawer], which is a vertical panel that is typically displayed to the
///    left of the body (and often hidden on phones) using the [drawer]
///    property.
///  * [BottomNavigationBar], which is a horizontal array of buttons typically
///    shown along the bottom of the app using the [bottomNavigationBar]
///    property.
///  * [SnackBar], which is a temporary notification typically shown near the
///    bottom of the app using the [ScaffoldState.showSnackBar] method.
///  * [BottomSheet], which is an overlay typically shown near the bottom of the
///    app. A bottom sheet can either be persistent, in which case it is shown
///    using the [ScaffoldState.showBottomSheet] method, or modal, in which case
///    it is shown using the [showModalBottomSheet] function.
///  * [ScaffoldState], which is the state associated with this widget.
///  * <https://material.io/design/layout/responsive-layout-grid.html>
class Scaffold extends StatefulWidget {/// Creates a visual scaffold for material design widgets.const Scaffold({Key key,this.appBar, //通常显示在应用程序顶部的水平条this.body, // 当前界面所显示的主要内容。this.floatingActionButton, //悬浮按钮，右下角按钮this.floatingActionButtonLocation,//悬浮按钮位置this.floatingActionButtonAnimator, //悬浮按钮在[floatingActionButtonLocation]出现/消失动画this.persistentFooterButtons,//在底部呈现一组button，显示于[bottomNavigationBar]之上，[body]之下this.drawer,//一个垂直面板，显示于左侧，初始处于隐藏状态，“抽屉”菜单效果this.endDrawer,this.bottomNavigationBar,//出现于底部的一系列水平按钮，实现底部类似tabBar效果this.bottomSheet,//底部持久化提示框this.backgroundColor,//内容背景颜色this.resizeToAvoidBottomPadding,//弃用，使用[resizeToAvoidBottomInset]this.resizeToAvoidBottomInset,//重新计算布局空间大小this.primary = true,//是否填充顶部（状态栏）this.drawerDragStartBehavior = DragStartBehavior.start,this.extendBody = false,this.extendBodyBehindAppBar = false,this.drawerScrimColor,this.drawerEdgeDragWidth,this.drawerEnableOpenDragGesture = true,this.endDrawerEnableOpenDragGesture = true,}) : assert(primary != null),assert(extendBody != null),assert(extendBodyBehindAppBar != null),assert(drawerDragStartBehavior != null),super(key: key);

Scaffold主要的属性说明

appBar：显示在界面顶部的一个 AppBar。
body：当前界面所显示的主要内容。
floatingActionButton：在Material中定义的一个功能按钮。
persistentFooterButtons：固定在下方显示的按钮。
drawer：一个垂直面板，显示于左侧，初始处于隐藏状态，“抽屉”菜单效果。
bottomNavigationBar：显示在底部的导航栏按钮栏。
backgroundColor：背景颜色。
resizeToAvoidBottomPadding：控制界面内容body是否重新布局来避免底部被覆盖了，比如当键盘显示的时候，重新布局避免被键盘盖住内容，默认值为 true。

示例代码

我们将以一个实例来说明Scaffold的使用方式。

class _MyHomePageState extends State<MyHomePage> {int bottomSelect = 0;List<String> tabNames = ["主页", "图片", "我的"];String currentTab = "主页";@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Colors.green,//设置标题栏的背景颜色title: new Title(child:new Text('这是一个标题',style: new TextStyle(fontSize: 20.0,color: Colors.white,),),color: Colors.white,),centerTitle: true,//设置标题居中elevation: 10.0,//设置标题栏下面阴影的高度leading: new Builder(builder: (BuildContext context){return new GestureDetector(//设置事件child: new Icon(//设置左边的图标Icons.account_circle,//设置图标内容color: Colors.white,//设置图标的颜色),onTap:(){Scaffold.of(context).showSnackBar(new SnackBar(content: new Text('点击')));},onLongPress: (){Scaffold.of(context).showSnackBar(new SnackBar(content: new Text('长按')));},onDoubleTap: (){Scaffold.of(context).showSnackBar(new SnackBar(content: new Text('双击')));},);}),brightness:Brightness.light,//设置状态栏的字体颜色(白色/黑色)primary: true,//是否设置内容避开状态栏actions: <Widget>[new Padding(child: new Icon(Icons.add,color: Colors.white),padding: EdgeInsets.all(10.0),),],),body: ListView.builder(itemCount: listCount,itemBuilder: (context, index) {return new Card(child: new ListTile(leading: new Icon(Icons.phone),title: new Text("卜大爷 $currentTab $index"),subtitle: new Text("010-12345678"),trailing: new Icon(Icons.arrow_forward_ios),contentPadding: EdgeInsets.symmetric(horizontal: 20.0),));}),//底部固定的widgetpersistentFooterButtons: <Widget>[new Icon(Icons.add_shopping_cart),],//侧边栏drawer: new Drawer(child:ListView.builder(itemCount: listCount,itemBuilder: (context, index) {return new Card(child: new ListTile(leading: new Icon(Icons.phone),title: new Text("我是抽屉菜单 $index"),subtitle: new Text("010-12345678"),trailing: new Icon(Icons.arrow_forward_ios),contentPadding: EdgeInsets.symmetric(horizontal: 20.0),));})),//底部导航栏bottomNavigationBar: new BottomNavigationBar(currentIndex: bottomSelect,//默认选中的位置fixedColor: Colors.green,//选中的颜色items:<BottomNavigationBarItem>[new BottomNavigationBarItem(icon:new Icon(Icons.home,),activeIcon: new Icon(//选中显示的iconIcons.home,),title: new Text(tabNames[0],),),new BottomNavigationBarItem(icon:new Icon(Icons.picture_in_picture,),title: new Text(tabNames[1],),),new BottomNavigationBarItem(icon:new Icon(Icons.account_box,),title: new Text(tabNames[2],),),] ,onTap: (int index){setState(() {bottomSelect = index;currentTab = tabNames[index];print(index.toString());});},),);}int listCount = 10;//当前列表显示的子item数量
}

Flutter中Scaffold布局的使用详解及实例代码相关推荐

python随机数程序源码_Python 实现随机数详解及实例代码
Python3实现随机数 random是用于生成随机数的,我们可以利用它随机生成数字或者选择字符串. random.seed(x)改变随机数生成器的种子seed. 一般不必特别去设定seed,Pyth ...
java super实例_java Super 用法详解及实例代码
java Super 用法详解及实例代码发布于 2021-1-8| 复制链接摘记: java Super 用法详解 1)有人写了个很好的初始化属性的构造函数,而你仅仅想要在其中添加另一些自己新建 ...
Java 线程池详解及实例代码
转载自 Java 线程池详解及实例代码这篇文章主要介绍了Java 线程池的相关资料,并符实例代码,帮助大家学习参考,需要的朋友可以参考下线程池的技术背景在面向对象编程中,创建和销毁对象是很费时 ...
mysql 字段 as_mysql 字段as详解及实例代码
mysql 字段使用as 在mysql中,select查询可以使用AS关键字为查询的字段起一个别名,该别名用作表达式的列名,并且别名可以在GROUP BY,ORDER BY或HAVING等语句中使用. ...
一文数学数模-相关性分析(二)斯皮尔曼相关(spearman)相关性分析一文详解+python实例代码
前言相关性分析算是很多算法以及建模的基础知识之一了,十分经典.关于许多特征关联关系以及相关趋势都可以利用相关性分析计算表达.其中常见的相关性系数就有三种:person相关系数,spearman相关系 ...
JavaScript 身份证号有效验证详解及实例代码
这篇文章主要介绍了JavaScript 身份证号有效验证详解及实例代码的相关资料,需要的朋友可以参考下 JavaScript验证身份证号 1 2 3 4 5 6 7 8 9 10 11 12 13 1 ...
坐标移动c语言,C语言坐标移动详解及实例代码
搜索热词题目描述开发一个坐标计算工具, A表示向左移动,D表示向右移动,W表示向上移动,S表示向下移动.从(0,0)点开始移动,从输入字符串里面读取一些坐标,并将最终输入结果输出到输出文件里面. ...
Java 初始化代码块_Java中初始化块详解及实例代码
Java中初始化块详解在Java中,有两种初始化块:静态初始化块和非静态初始化块. 静态初始化块:使用static定义,当类装载到系统时执行一次.若在静态初始化块中想初始化变量,那仅能初始化类变量, ...
java中的setattribute_JSP request.setAttribute()详解及实例
javascript request.setAttribute()详解 request.setAttribute()怎么用的? JSP1代码 String [] test=new String[2]; ...

Flutter中Scaffold布局的使用详解及实例代码

Flutter中Scaffold布局的使用详解及实例代码

源码

Scaffold主要的属性说明

示例代码

Flutter中Scaffold布局的使用详解及实例代码相关推荐

最新文章

热门文章