15-flutter Scaffold详解

Scaffold

是一个实现基本的material design 的布局结构

appBar	显示在界面顶部的一个 AppBar
body	当前界面所显示的主要内容 Widget
floatingActionButton	Material 设计中所定义的 FAB，界面的主要功能按钮
persistentFooterButtons	固定在下方显示的按钮，比如对话框下方的确定、取消按钮
drawer	抽屉菜单控件
backgroundColor	内容的背景颜色，默认使用的是 ThemeData.scaffoldBackgroundColor 的值
bottomNavigationBar	显示在页面底部的导航栏
resizeToAvoidBottomPadding	控制界面内容 body 是否重新布局来避免底部被覆盖了，比如当键盘显示的时候，重新布局避免被键盘盖住内容。默认值为 true。

1 AppBar

class MyApp extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(appBar: myAppBar(),body: Text("data"),),);}
}// 创建一个AppBar
AppBar myAppBar(){return new AppBar(//标题title: new Text("自定义标题"),// 标题居中centerTitle: true,//按钮actions: <Widget>[new IconButton(icon: new Icon(Icons.favorite),onPressed: (){print("点击了小心心阿牛");},// 长按进行提示文字tooltip: '这是干什么操作的',),new IconButton(icon: new Icon(Icons.sentiment_dissatisfied),onPressed: (){print("第二个按钮");},// 长按进行提示文字tooltip: '这是干什么操作的',)],);
}

2 Drawer 抽屉

Drawer myDrawer(BuildContext context){return new Drawer(child: ListView(padding: EdgeInsets.all(5),children: <Widget>[// 抽屉头部DrawerHeader(decoration: BoxDecoration(color: Colors.lightBlueAccent,),child: Center(child: SizedBox(width: 80,height: 80,child: CircleAvatar(child: Icon(Icons.face),),),),),ListTile(title: Text("第一行"),leading: new CircleAvatar(child: new Icon(Icons.face),),onTap: (){Navigator.pop(context);},),ListTile(title: Text("第二行"),leading: new CircleAvatar(child: new Icon(Icons.fastfood),),onTap: (){Navigator.pop(context);},),],),);}

3 悬浮的按钮

  Widget build(BuildContext context) {return MaterialApp(theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(appBar: myAppBar(),body: Text("data"),drawer: myDrawer(context),// 悬浮的按钮 在右下角floatingActionButton: new FloatingActionButton(tooltip: 'Add', // used by assistive technologieschild: new Icon(Icons.add),onPressed: null,),// 悬浮按钮的位置 中间 右边 左边，默认是右边floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,),);}
}

4 底部的导航栏 bottomNavigationBar

class _BottomBarState extends State{int _currentIndex = 1;// 点击项目的回调void _onItemTapped(int index) {if(mounted) {setState(() {_currentIndex = index;});}}@overrideWidget build(BuildContext context) {return BottomNavigationBar(// BottomNavigationBarType 中定义的类型，有 fixed 和 shifting 两种类型type: BottomNavigationBarType.fixed, // BottomNavigationBarItem 中 icon 的大小iconSize: 24.0, // 当前所高亮的按钮indexcurrentIndex: _currentIndex, // 点击里面的按钮的回调函数，参数为当前点击的按钮 indexonTap: _onItemTapped, // 选中时候fixedColor:  Colors.blue, items: <BottomNavigationBarItem> [BottomNavigationBarItem(title:  Text("商场"), icon:  Icon(Icons.local_grocery_store)),BottomNavigationBarItem(title:  Text("航班"), icon:  Icon(Icons.local_airport)),BottomNavigationBarItem(title:  Text("旅行"), icon:  Icon(Icons.card_travel)),BottomNavigationBarItem(title:  Text("我的"), icon:  Icon(Icons.apps)),],);}
}

15-flutter Scaffold详解相关推荐

Flutter Widget详解
Flutter Widget详解 Widget是Flutter应用程序用户界面的基本构建块.每个Widget都是用户界面一部分的不可变声明. 与其他将视图.控制器.布局和其他属性分离的框架不同,Flu ...
【5年Android从零复盘系列之二十】Android自定义View(15)：Matrix详解(图文)【转载】
[转载]本文转载自麻花儿wt 的文章<android matrix 最全方法详解与进阶(完整篇)> [5年Android从零复盘系列之二十]Android自定义View(15):Matri ...
学习笔记-Flutter 动画详解（一）
Flutter 动画详解(一) 本文主要介绍了动画的原理相关概念,对其他平台的动画做了一个简要的梳理,并简要的介绍了Flutter动画的一些知识. 1. 动画介绍动画对于App来说,非常的重要.很多 ...
Flutter Text详解
示例 API Text,很常用的一个Widget:用于显示简单样式文本,它包含一些控制文本显示样式的一些属性 text构造方法源码: /// If the [style] argument is nu ...
qt及qt quick开发实战精解_Qt5实战001：Qt 5.15下载安装详解
什么是QT Qt是一个款跨平台的C++图形用户界面应用程序开发框架,支持包括不限于Windows.Linux.Mac OS X.Android.iOS.WinCE.Unix等平台.Qt 可以绘制漂亮的 ...
Python游戏工具包---Pygame最常用的15个模块详解（附pdf版本）
↑ 点击上方 "一行数据" 关注 + 星标 ~ 每周送书,绝不错过本文不查错,三连送书最近很多读者想学习使用python来制作游戏,其中最经典的工具包就是Pygame ,如果单 ...
吃透Chisel语言.15.Chisel模块详解（二）——Chisel模块嵌套和ALU实现
Chisel模块详解(二)--Chisel模块嵌套和ALU实现稍微复杂点的硬件设计就需要用嵌套的模块层级来构建了,上一篇文章中实现的计数器其实就是个例子,计数器内部嵌套了一个寄存器.一个Mux和一个 ...
Flutter ListView详解
ListView详解 ListView常用构造 ListView ListView 默认构建效果 ListView ListTile ListTile 属性 ListTile 使用效果 ListV ...
[flutter专题]详解AppBar小部件
大家好,我是坚果,公众号"坚果前端" AppBar 应用栏是各种应用程序中最常用的组件之一.它可用于容纳搜索字段.以及在页面之间导航的按钮,或者只是页面标题.由于它是一个如此常用的 ...
Scaffold 详解
一.主要的属性说明 appBar:显示在界面顶部的一个 AppBar body:当前界面所显示的主要内容 floatingActionButton: 在 Material 中定义的一个功能按钮. pe ...

15-flutter Scaffold详解

Scaffold

1 AppBar

2 Drawer 抽屉

3 悬浮的按钮

4 底部的导航栏 bottomNavigationBar

15-flutter Scaffold详解相关推荐

最新文章

热门文章