SafeArea
- 顾名思义，安全区域，指的是除app的导航栏以及状态栏等区域，如果页面没有这个，写的内容可能会上到状态栏，下到导航栏，里面的属性一般用不到
Scaffold
- 相当于对每个页面一些常用的内容的封装，包含appBar(顶部标题栏)，bottomNavigationBar(app底部标题栏)，floatingActionButton(浮动按钮)，draw(抽屉模式，会默认将appbar的leading的点击事件设置为打开抽屉)，body(app内容)等
Scaffold常用属性解析
- appBar
- leading：appBar的左边按钮，默认是返回，如果自定义图片后需要自己设置下返回事件，代码示例：
- title：标题内容。
- centerTitle：标题是否居中，默认false，靠左
- bottom：标题栏下方的View，一般可放个tabbar，以实现多页面切换效果
界面展示效果
image.png
代码示例
appBar: AppBar(
leading: IconButton(
icon: LoadAssetImage(imgPath + 'icon_left_black_24px',
width: 24, height: 24),
onPressed: () {
Navigator.maybePop(context);
},
),
backgroundColor: Colors.white,
centerTitle: true,
title: Text(
'Profile', //LAN
style: TextStyle(fontSize: 18, color: Colors.black),
),
),
- bottomNavigationBar
- items：直接放多个BottomNavigationBarItem子类的条目去实现批量重复布局，类似于原生的radiogroup+radiobutton，配合currentIndex，selectedItemColor等属性去使用
- shape：可配合child属性，对导航栏上面的界面实现任意布局，相当于原生里用layout等布局去手动实现效果
注：配合floatingActionButton可实现底部按钮凹陷效果，此时需要设置个floatingActionButtonLocation组件，该组件跟floatingActionButton平级
页面展示效果：
image.png
示例代码
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
),
],
currentIndex: 0,
selectedItemColor: Colors.amber[800],
// onTap: _onItemTapped,
),
页面展示效果：
image.png
示例代码：
bottomNavigationBar: BottomAppBar(
shape: const CircularNotchedRectangle(),
child: Row(
children: [
IconButton(icon: Icon(Icons.home)),
SizedBox(),
IconButton(icon: Icon(Icons.business))
],
mainAxisAlignment: MainAxisAlignment.spaceAround,
)
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
Container
- 最常用的容器，可定义宽高，内间距外间距，设置边框线(border),对齐方式(alignment)等属性
示例代码：
Container(
color: Colours.dark_gray_f1,
alignment: Alignment.centerLeft,
padding: EdgeInsets.only(left: 15),
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(25.0)),
border: new Border.all(width: 1, color: Colors.red),
),
height: 30,
child: Text(
itle,
style: TextStyle(fontSize: 13, color: Colours.dark_black_666),
),
);
GestureDetector
- 手势识别器，可给任意控件增加点击事件onTap(){},当你发现条目使用了这个包装后，空白处无法点击需要增加该属性 behavior: HitTestBehavior.opaque
示例代码如下:
GestureDetector(
behavior: HitTestBehavior.opaque,
child: Container(),
onTap: () {
//do something
}
)
Expanded
- 展开widget，一般用在Row，Column里，可将不确定高度的组件自适应展开
ListView
- 列表，可当ScrollView使用，批量创建列表的时候用ListView.separated(itemBuilder:,separatorBuilder:,itemCount:)，itemBuilder是每个条目的样式，separatorBuilder是分割线的样式，itemCount是条目数量，如果每个条目需要手动创建的话就用ListView(children: [])，如果不能完全展示，就手动指定高度，或者使用Expanded来把他展开
示例代码(仅提供separated方式实现)：
ListView.separated(
itemBuilder: (BuildContext context, int index) =>_buildBankCardItem(cardData[index], controllers[index]),
eparatorBuilder: (BuildContext context, int index) =>Container(),
itemCount: cardData == null ? 0 : cardData.length
)
Tabbar
- 可放在appbar的bottom里(请翻阅前面的appbar模块)，也可直接放在appbar中间(不写title，直接使用appbar里的flexibleSpace属性)，常用属性有controller，isScrollable(是否可滚动)，tabs(具体的tab集合)，indicatorColor(指示器颜色)，indicatorWeight(指示器高度)，indicatorPadding(指示器内间距)，indicator(自定义指示器样式)，indicatorSize(指示器宽度)，labelColor(文本颜色)，labelStyle(文本样式)，labelPadding(文本内边距)，unselectedLabelColor(未选中文本的颜色)，unselectedLabelStyle(未选中文本的样式)，onTap(回调监听)
body里可用TabBarView形成联动效果
页面效果展示:
image.png
示例代码：
appBar: AppBar(
flexibleSpace: Container(
alignment: Alignment.center,
child: TabBar(
controller: _tabController,
labelColor: Colours.purple_color,
unselectedLabelColor: Colours.black_333,
indicatorColor: Colours.purple_color,
labelStyle: TextStyle(fontSize: 16),
tabs: [
Tab(
text:'Deposit',
),
Tab(
text: 'Transfer',
)
],
isScrollable: true,
),
),
backgroundColor: Colours.white_color,
)
TextField
- 输入框，常用属性controller，focusNode，decoration(装饰器)，onChanged(内容变化监听)，obscureText(是否隐藏文本，密码隐藏时候可用)，keyboardType(键盘类型)，textInputAction(键盘右下角的按钮)，maxLength(最大长度，设置后会有默认计数器)
- 重点说下decoration:InputDecoration，InputDecoration常用属性:counter(自定义计数器)，
- 图标：icon(左侧外图标)，prefixIcon(左侧内图标)，suffixIcon(右侧内图标)
- textCapitalization(首字母大小写)：worlds(单词首字母大写)，sentences(句子的首字母大写)，characters(所有字母大写)，none(默认无)
- 提示文字：labelText(悬浮提示)，errorText(错误提示)，helperText(帮助提示文字)，hintText(默认提示)，
- 去掉下划线：decoration: InputDecoration.collapsed(),或者decoration:null(该方式没有提示文字)
- 边框：border:InputBorder.none，UnderlineInputBorder(下划线)，OutlineInputBorder(外边框)，
- 关闭软键盘：focusNode.unFocus()，
- 重点说下decoration:InputDecoration，InputDecoration常用属性:counter(自定义计数器)，
showCupertinoDialog
- 显示IOS风格的弹框CupertinoAlertDialog
- 常用属性content(弹框的具体样式，可使用自带的CupertinoAlertDialog，也可使用自定义布局)，actions(点击事件，里面可放CupertinoDialogAction数组)
页面效果展示：
image.png
示例代码:
showCupertinoDialog(context: widgetContext,builder: (context) {
return CupertinoAlertDialog(
title: Text('确认删除'),
actions: [
CupertinoDialogAction(
child: Text('确认'),
onPressed: () {
Navigator.of(context).pop();
},
),
CupertinoDialogAction(
child: Text('取消'),
isDestructiveAction: true,
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
页面效果展示：
image.png
示例代码：
showCupertinoDialog(context: widgetContext,builder: (context) {
return CupertinoAlertDialog(
title: Text('请评价'),
content: Text('\n我们很重视您的评价！'),
actions: [
CupertinoDialogAction(
child: Text('非常好'),
onPressed: () {
Navigator.of(context).pop();
},
),
CupertinoDialogAction(
child: Text('一般'),
onPressed: () {
Navigator.of(context).pop();
},
),
CupertinoDialogAction(
child: Text('非常差'),
isDestructiveAction: true,
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
showGeneralDialog
- 居中弹框
showModalBottomSheet
- 底部弹框
自定义dialog
页面显示效果：
image.png
示例代码：
import 'package:flutter/material.dart';
class LoadingDialog extends Dialog {
String text;
LoadingDialog({Key key, @required this.text}) : super(key: key);
@override
Widget build(BuildContext context) {
return new Material(
//创建透明层
type: MaterialType.transparency, //透明类型
child: new Center(
//保证控件居中效果
child: new SizedBox(
width: 100.0,
height: 100.0,
child: new Container(
decoration: ShapeDecoration(
color: Color(0xffffffff),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(8.0),
),
),
),
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new CircularProgressIndicator(),
new Padding(
padding: const EdgeInsets.only(
top: 20.0,
),
child: new Text(
text,
style: new TextStyle(fontSize: 12.0),
),
),
],
),
),
),
),
);
}
}
