前言
Flutter开发有一段时间了，其间遇到的一个问题就是Flutter基础组件API的查询，官方文档上虽然有英文的解释，但是没有具体调用的示例。网上自己查询又东拼西凑的。
中文注释方面也是没有一家较完全的的。
所以我把这些都整理在这里，方便查阅。
AlertDialog
文档：
AlertDialog({
Key key,
this.title, /// 标题
this.titlePadding, /// 标题padding
this.titleTextStyle, /// 标题style
this.content, ///内容
this.contentPadding = const EdgeInsets.fromLTRB(24.0, 20.0, 24.0, 24.0), /// padding
this.contentTextStyle, /// style
this.actions,/// 动作 widget 列表,
this.actionsPadding = EdgeInsets.zero,
this.actionsOverflowDirection, /// action 溢出 方向
this.actionsOverflowButtonSpacing, /// action 溢出水平间距离
this.buttonPadding, /// 按钮padding
this.backgroundColor, /// 背景色
this.elevation, /// 阴影
this.semanticLabel,
this.insetPadding = _defaultInsetPadding,
this.clipBehavior = Clip.none,
this.shape,
this.scrollable = false, /// 不可滚动,想要滚动需要嵌套SingleChildScrollView
})
示例：
Future<int> _getAlertDialog(BuildContext context) {
return showDialog<int>(
context: context,
builder: (context) => AlertDialog(
title: Text('Title'),
///如果内容过长,需要使用SingleChildScrollView
content: Scrollbar(
child: SingleChildScrollView(
physics: BouncingScrollPhysics(),
child: Text("这个是内容"),
),
),
actions: [
FlatButton(
child: Text('取消'),
onPressed: () => Navigator.of(context).pop(0),
),
FlatButton(
child: Text('确定'),
onPressed: () => Navigator.of(context).pop(1),
)
],
),
///点击dialog 外部是否消失
barrierDismissible: true);
}
官方API：AlertDialog-class
Align
示例：
Container(
height: 120.0,
width: 120.0,
color: Colors.blue[50],
child: Align(
alignment: Alignment.topRight,
child: FlutterLogo(
size: 60,
),
),
)
文档：
Align({
Key key,
this.alignment = Alignment.center, // 需要一个AlignmentGeometry类型的值，表示子组件在父组件中的起始位
this.widthFactor, // 是用于确定Align 组件本身宽高的属性；它们是两个缩放因子，会分别乘以子元素的宽、高，最终的结果就是Align 组件的宽高。如果值为null，则组件的宽高将会占用尽可能多的空间。
this.heightFactor,
Widget child,
})
官方API：Align-class
AppBar
示例：
Widget _appBarDemo1() {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
primary: true,//为false的时候会影响leading，actions、titile组件，导致向上偏移
textTheme: TextTheme(//设置AppBar上面各种字体主题色
title: TextStyle(color: Colors.red),
),
actionsIconTheme: IconThemeData(color: Colors.blue,opacity: 0.6),//设置导航右边图标的主题色，此时iconTheme对于右边图标颜色会失效
iconTheme: IconThemeData(color: Colors.black,opacity: 0.6),//设置AppBar上面Icon的主题颜色
brightness: Brightness.dark,//设置导航条上面的状态栏显示字体颜色
backgroundColor: Colors.amber,//设置背景颜色
shape: CircleBorder(side: BorderSide(color: Colors.red, width: 5, style: BorderStyle.solid)),//设置appbar形状
automaticallyImplyLeading: true,//在leading为null的时候失效
centerTitle: true,
title: Text('AppBar Demo'),
leading: IconButton(
icon: Icon(Icons.add),
onPressed: () {
print('add click....');
}
),
actions: <Widget>[
IconButton(icon: Icon(Icons.search), onPressed: (){print('search....');}),
IconButton(icon: Icon(Icons.history), onPressed: (){print('history....');}),
],
),
),
);
}
文档：
AppBar({
Key key,
this.leading,//导航条左侧需要展示的Widget
this.automaticallyImplyLeading = true,
this.title,//导航条的标题
this.actions,//导航条右侧要展示的一组widgets
this.flexibleSpace,
this.bottom,导航条底部需要展示的widget
this.elevation,
this.shape,//导航条样式
this.backgroundColor,//导航条背景色
this.brightness,//设置导航条上面的状态栏的dark、light状态
this.iconTheme,//导航条上的图标主题
this.actionsIconTheme,//导航条上右侧widgets主题
this.textTheme,//导航条上文字主题
this.primary = true,//为false的时候会影响leading，actions、titile组件，导致向上偏移
this.centerTitle,//导航条表示是否居中展示
this.titleSpacing = NavigationToolbar.kMiddleSpacing,
this.toolbarOpacity = 1.0,
this.bottomOpacity = 1.0,
})
官方API：AppBar-class
Button
示例：
FlatButton(
color: Colors.blue,
textColor: Colors.white, // 按钮文字颜色
highlightColor: Colors.blue[700], // 点击时，水波动画中水波的颜色
disabledTextColor: Colors.gray, //按钮禁用时的文字颜色
colorBrightness: Brightness.dark, // 按钮主题，默认浅色主题
splashColor: Colors.grey,
padding: // 按钮的填充
shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)), // 外形
child: Text("Submit"),
onPressed: () {},
)
官方API： FlatButton-class
Checkbox
示例：
new Checkbox(
value: this.check,
tristate: true, // 如果为 true，那么复选框的值可以是 true，false 或 null。
autofocus: true, // 当前作用域中的初始焦点
activeColor: Colors.blue, // 激活时的颜色
focusColor: Colors.blue, // 聚焦时的颜色
checkColor: Colors.blue, // 选中图标的颜色
hoverColor: Colors.blue, // hover时的颜色
materialTapTargetSize: MaterialTapTargetSize.padded // 配置tap目标的最小大小, 点击区域尺寸，padded：向四周扩展48px区域 shrinkWrap：控件区域
focusNode: focusNode,
onChanged: (bool val) {
this.setState(() {
this.check = !this.check;
});
},
),
官方文档：Checkbox-class
CircularProgressIndicator
示例：
CircularProgressIndicator(
value: 0.3,
strokeWidth: 4.0,
backgroundColor: Color(0xffff0000),
valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),
)
文档：
const CircularProgressIndicator({
Key key,
double value ,// 0~1的浮点数，用来表示进度多少;如果 value 为 null 或空，则显示一个动画，否则显示一个定值
Color backgroundColor, // 背景颜色
Animation<Color> valueColor,//animation类型的参数，用来设定进度值的颜色，默认为主题色
this.strokeWidth = 4.0,//进度条宽度
String semanticsLabel,
String semanticsValue,
})
官方API：CircularProgressIndicator-class
ClipOval 椭圆剪裁
文档：
const ClipOval({ Key key, this.clipper, this.clipBehavior = Clip.antiAlias, Widget child }) : super(key: key, child: child);
const ClipRRect({
Key key,
this.borderRadius,
this.clipper,
this.clipBehavior = Clip.antiAlias,
Widget child,
}) : assert(borderRadius != null || clipper != null),
assert(clipBehavior != null),
super(key: key, child: child);
const ClipRect({ Key key, this.clipper, this.clipBehavior = Clip.hardEdge, Widget child }) : super(key: key, child: child);
示例：
// 剪裁 clip
// 剪裁Widget 作用
// ClipOval 子组件为正方形时剪裁为内贴圆形，为矩形时，剪裁为内贴椭圆
// ClipRRect 将子组件剪裁为圆角矩形
// ClipRect 剪裁子组件到实际占用的矩形大小（溢出部分剪裁）
import 'package:flutter/material.dart';
class ClipTest extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 头像
Widget avatar = Image.asset('assets/images/avatar.png', width: 60,);
return Scaffold(
appBar: AppBar(
title: Text('剪裁'),
),
body: Column(
children: <Widget>[
// 不裁剪
avatar,
// 裁剪为圆形
ClipOval(child: avatar,),
// 裁剪为圆角矩形
ClipRRect(
borderRadius: BorderRadius.circular(5.0),
child: avatar,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Align(
alignment: Alignment.topLeft,
// 宽度设为原来的一半，另一半会溢出
widthFactor: .5,
),
Text('Hello world!', style: TextStyle(color: Colors.green),)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// 将溢出部分剪裁
ClipRect(
child: Align(
alignment: Alignment.topLeft,
widthFactor: .5,
child: avatar,
),
),
Text('Hello world!', style: TextStyle(color: Colors.green),)
],
),
DecoratedBox(
decoration: BoxDecoration(
color: Colors.red,
),
child: ClipRect(
// 使用自定义的clipper
clipper: MyClipTest(),
child: avatar,
),
)
],
),
);
}
}
// 自定义剪裁
class MyClipTest extends CustomClipper<Rect> {
@override
Rect getClip(Size size) => Rect.fromLTWH(10.0, 15.0, 40.0, 30.0);
@override
bool shouldReclip(CustomClipper<Rect> oldClipper) => false;
}
官方API：ClipOval-class
Column
示例：
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
textBaseline: TextBaseline.ideographic,
textDirection: TextDirection.rtl,
verticalDirection: VerticalDirection.up,
children: <Widget>[
Icon(Icons.opacity),
Icon(Icons.settings),
Container(
color: Colors.redAccent,
width: 100.0,
height: 100.0,
child: Text('data'),
),
Icon(Icons.ondemand_video),
],
)
文档：
Column({
Key key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,//子Widget在纵轴上的排列，全部子Widget从顶部开始展示
MainAxisAlignment.end//子Widget在纵轴上的排列，全部子Widget挨着底部展示
MainAxisAlignment.center//子Widget在纵轴上的排列，全部子widget在中间展示
MainAxisAlignment.spaceBetween//子Widget在纵轴上的排列，两两子widget之间间距相等，最上最下子widget挨着边展示
MainAxisAlignment.spaceAround//子Widget在纵轴上的排列，两两子widget之间间距相等，最上最下子widget离边的距离为两两子widget之间距离的一半
MainAxisAlignment.spaceAround//子Widget在纵轴上的排列，两两子widget之间间距相等，最上最下子widget离边的距离为两两子widget之间距离相等
MainAxisSize mainAxisSize = MainAxisSize.max,//设置Column占据的空间为最大
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.start,//设置全部子widget左边对齐
CrossAxisAlignment.end//设置全部子widget右边对齐
CrossAxisAlignment.stretch//设置全部子widget占据整个横轴（X）方向，拉伸对齐Column左右两边
CrossAxisAlignment.baseline,//相当于CrossAxisAlignment.start,但是需要配合textBaseline，不然会报错
TextDirection textDirection,//设置子widget的左右显示方位，只有在crossAxisAlignment为start、end的时候起作用；
VerticalDirection verticalDirection = VerticalDirection.down,//设置子Widget在纵轴（Y）的起始位置，down表示，第一个widget从开始位置展示，后面的跟着依次展示；相当于正序
VerticalDirection.up//表示第一个widget从末尾位置开始展示，后面的跟着依次展示，相当于倒序
TextBaseline textBaseline,//配合CrossAxisAlignment.baseline一起使用
List<Widget> children = const <Widget>[],//装在一组子widgets
})
官方API：Column-class
ConstrainedBox
尺寸限制类容器
示例：
ConstrainedBox(
constraints: BoxConstraints(
this.minWidth = 0.0, //最小宽度
this.maxWidth = double.infinity, //最大宽度
this.minHeight = 0.0, //最小高度
this.maxHeight = double.infinity //最大高度
),
child: Container(
height: 5.0,
child: redBox
),
)
官方API：ConstrainedBox-class
Container
容器
示例：
Container(
alignment: Alignment.center,//child子Widget距中展示
padding: EdgeInsets.all(20),//设置Container的内边距为20.0
margin: EdgeInsets.all(20.0),//设置Container的外边距为20.0
color: Colors.black,//设置背景色为黑色
width: 200.0,//设置宽度为200.0
height: 200.0,//设置高度为200.0
child: Text(//child填充为Text
'这是一个Container',//显示文字
textDirection: TextDirection.ltr,//文字从左到右显示
style: TextStyle(//Text样式
color: Colors.redAccent,//文字颜色
backgroundColor: Colors.black,//Text背景色
),),
)
文档：
Container({
Key key,
this.alignment, // Alignment,设置Container里面child的对齐方式
this.padding, // EdgeInsets,设置内边距
Color color, // 设置Container的背景色
Decoration decoration, // 设置Container的child后面的装饰
this.foregroundDecoration, // 设置Container的child前面的装饰
double width, // 设置Container的宽度
double height, // 设置Container的高度
BoxConstraints constraints, // 设置Container的子元素约束
this.margin, // EdgeInsets，设置外边距
this.transform, // 设置Container的转换矩阵
this.child, // Widget，设置Container的child
}
官方API：Container-class
DecoratedBox
DecoratedBox可以在其子组件绘制前(或后)绘制一些装饰（Decoration），如背景、边框、渐变等
示例：
DecoratedBox(
decoration: BoxDecoration(
gradient: LinearGradient(colors:[Colors.red,Colors.orange[700]]), //背景渐变
borderRadius: BorderRadius.circular(3.0), //3像素圆角
boxShadow: [ //阴影
BoxShadow(
color:Colors.black54,
offset: Offset(2.0,2.0),
blurRadius: 4.0
)
]
),
child: Padding(padding: EdgeInsets.symmetric(horizontal: 80.0, vertical: 18.0),
child: Text("Login", style: TextStyle(color: Colors.white),),
)
)
文档：
const DecoratedBox({
Decoration decoration, // 代表将要绘制的装饰，它的类型为Decoration
DecorationPosition position = DecorationPosition.background, // background 背景装饰 ｜ foreground 前景装饰
Widget child
})
BoxDecoration({
Color color, //颜色
DecorationImage image,//图片
BoxBorder border, //边框
BorderRadiusGeometry borderRadius, //圆角
List<BoxShadow> boxShadow, //阴影,可以指定多个
Gradient gradient, //渐变
BlendMode backgroundBlendMode, //背景混合模式
BoxShape shape = BoxShape.rectangle, //形状
})
官方API：DecoratedBox-class
Flex
示例：
class FlexDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Flex(
direction: Axis.horizontal,
direction: Axis.vertical,
children: <Widget>[
Container(
width: 90.0,
height: 100.0,
color: Colors.redAccent,
),
SizedBox(width: 6,),
Container(
width: 90.0,
height: 100.0,
color: Colors.greenAccent,
),
SizedBox(width: 6,),
Container(
width: 90.0,
height: 100.0,
color: Colors.blue,
),
SizedBox(width: 6,),
Container(
width: 90.0,
height: 100.0,
color: Colors.orange,
),
],
);
}
}
文档：
Flex({
Key key,
@required this.direction,//设置flex是在水平方向上设置
List<Widget> children = const <Widget>[],//一组子widgets
<!--剩余这些定义请查看有关Row和Column的相似定义描述-->
this.mainAxisAlignment = MainAxisAlignment.start,
this.mainAxisSize = MainAxisSize.max,
this.crossAxisAlignment = CrossAxisAlignment.center,
this.textDirection,
this.verticalDirection = VerticalDirection.down,
this.textBaseline,
})
官方API：Flex-class
Flow
示例：
import 'package:flutter/material.dart';
/*
* 流式布局
* 自定义FlowDelegate
* */
double boxSize = 80.0;
class FlowWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Flow(
delegate: MyFlowDelegate(),
children: List.generate(10, (index) {
return Box(index);
}),
);
}
/*一个带渐变颜色的正方形*/
Widget Box(index) => Container(
width: boxSize,
height: boxSize,
alignment: Alignment.center,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.orangeAccent, Colors.orange, Colors.deepOrange]),
),
child: Text(
index.toString(),
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
);
}
class MyFlowDelegate extends FlowDelegate {
@override
void paintChildren(FlowPaintingContext context) {
/*屏幕宽度*/
var screenW = context.size.width;
double padding = 5; //间距
double offsetX = padding; //x坐标
double offsetY = padding; //y坐标
for (int i = 0; i < context.childCount; i++) {
/*如果当前x左边加上子控件宽度小于屏幕宽度 则继续绘制 否则换行*/
if (offsetX + boxSize < screenW) {
/*绘制子控件*/
context.paintChild(i,
transform: Matrix4.translationValues(offsetX, offsetY, 0));
/*更改x坐标*/
offsetX = offsetX + boxSize + padding;
} else {
/*将x坐标重置为margin*/
offsetX = padding;
/*计算y坐标的值*/
offsetY = offsetY + boxSize + padding;
/*绘制子控件*/
context.paintChild(i,
transform: Matrix4.translationValues(offsetX, offsetY, 0));
}
}
}
@override
bool shouldRepaint(FlowDelegate oldDelegate) {
return true;
}
}
文档：
Flow({
Key key,
@required this.delegate, //布局委托，接收一个FlowDelegate类型的值
List<Widget> children = const <Widget>[], //要显示的子控件
})
官方API：Flow-class
Form
示例：
Form(
key: _formKey, // 设置globalKey，用于后面获取FormState
autovalidate: true, // 开启自动校验
onWillPop: Future .. , // 异步拦截路由返回。
onChanged: (v) {
print("onChange: $v");
}
child: ...
)
FormField
示例：
TextFormField(
decoration: InputDecoration(
hintText: '电话号码',
),
validator: (value) {
RegExp reg = new RegExp(r'^\d{11}$');
if (!reg.hasMatch(value)) {
return '请输入11位手机号码';
}
return null;
},
)
文档：
const FormField({
...
FormFieldSetter<T> onSaved, //保存回调
FormFieldValidator<T> validator, //验证回调
T initialValue, //初始值
bool autovalidate = false, //是否自动校验。
})
官方API：Form-class
GridView
文档：
GridView.builder({
Key key,
Axis scrollDirection = Axis.vertical, // 设置滚动的方向，horizontal（水平）或vertical（垂直）
bool reverse = false, // 是否翻转
ScrollController controller, // 用来控制滚动位置及监听滚动事件
bool primary,
ScrollPhysics physics,
bool shrinkWrap = false, // 是否根据子widget的总长度来设置GridView的长度
EdgeInsetsGeometry padding, // 间距
@required this.gridDelegate, // 控制子Widget如何进行布局
@required IndexedWidgetBuilder itemBuilder,
int itemCount,
bool addAutomaticKeepAlives = true,
bool addRepaintBoundaries = true,
bool addSemanticIndexes = true,
double cacheExtent,
int semanticChildCount,
})
示例：
GridView(
scrollDirection: Axis.vertical,
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 100, // 子控件最大宽度为100
childAspectRatio: 0.5, // 宽高比为1:2
crossAxisSpacing: 10,
mainAxisSpacing: 10,
),
padding: EdgeInsets.all(10),
children: List.generate(
20,
(index) {
return Box(index + 1);
},
),
);
官方API：GridView-class
Icon
示例：
String icons = "";
// accessible:  or 0xE914 or E914
icons += "\uE914";
// error:  or 0xE000 or E000
icons += " \uE000";
// fingerprint:  or 0xE90D or E90D
icons += " \uE90D";
Text(icons,
style: TextStyle(
fontFamily: "MaterialIcons",
fontSize: 24.0,
color: Colors.green
),
);
Icon(
IconData icon;//系统库中的图标文件
double size;//图标的尺寸
Color color;//绘制图标时使用的颜色
String semanticLabel;//图标的语义标签
TextDirection textDirection;//用于渲染图标的文本方向
)
官方图标库：material-icons 文档：Icon-class
IconButton
文档：
IconButton(
double iconSize: 24.0;//图标尺寸
EdgeInsetsGeometry padding: const EdgeInsets.all(8.0);//内边距
AlignmentGeometry alignment: Alignment.center;//对齐方式
Widget icon;//图标控件
Color color;//颜色
Color highlightColor;//按钮按下时的颜色
Color splashColor;//点击后扩散动画的颜色
Color disabledColor;//按钮不可用时的颜色
VoidCallback onPressed;//点击或以其他方式激活按钮时调用的回调
String tooltip;//描述按下按钮时将发生的操作的文本
)
示例：
IconButton(
icon: Icon(Icons.description),
onPressed: () {
print('点击了icon $index');
},
)
官方API： IconButton-class
Image
示例：
Image(
image: AssetImage("images/avatar.png"),
width: 100.0,
height: 100.0,
color: Colors.blue, //图片的混合色值
colorBlendMode: BlendMode.difference, // 指定混合模式
repeat: ImageRepeat.repeatY, // 平铺 repeatY / repeatX / noRepeat
fit: BoxFit.fill, // 缩放模式 fill / contain / cover / fitWidth / fitHeight / scaleDown / none
alignment: Alignment.center, //对齐方式
);
文档：
Image(
ImageProvider<dynamic> image; //要显示的图像（Image()）
String name, //图片路径（Image.asset()）
AssetBundle bundle, //图片资源（Image.asset()）
File file; //文件路径（Image.file()）
String src; //图片地址url（Image.network()）
Uint8List bytes Uint8List; //获取的ImageStream，如sdk中从网络转Uint8List（Image.memory()）
String semanticLabel; //图像的语义描述
bool excludeFromSemantics; //是否从语义中排除此图像，默认false
double scale; //比例
double width; //宽度
double height; //高度
Color color; //颜色，如果不为null，则通过colorBlendMode属性将此颜色与图像混合
BlendMode colorBlendMode; //混合模式
BoxFit fit; //图像的显示模式
AlignmentGeometry alignment; //对齐方式，默认Alignment.center
ImageRepeat repeat; //重复方式，默认ImageRepeat.noRepeat
Rect centerSlice; //九宫格拉伸
bool matchTextDirection; //是否以文本方向绘制图片，默认false
bool gaplessPlayback; //当图像更改时，是继续显示旧图像（true）还是简单地显示任何内容（false），默认false
FilterQuality filterQuality; //筛选质量，默认FilterQuality.low
String package, //包名（Image.asset()）
Map<String, String> headers; //参数可用于通过图像请求发送自定义HTTP标头（Image.network()）
)
官方API：Image-class
LinearProgressIndicator
示例：
LinearProgressIndicator(
value: 0.3,
valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),
backgroundColor: Color(0xff00ff00),
)
文档：
const LinearProgressIndicator({
Key key,
double value, // 0~1的浮点数，用来表示进度多少;如果 value 为 null 或空，则显示一个动画，否则显示一个定值
Color backgroundColor, // 背景颜色
Animation<Color> valueColor, // animation类型的参数，用来设定进度值的颜色，默认为主题色
String semanticsLabel,
String semanticsValue,
})
官方API：LinearProgressIndicator-class
ListView
文档：
ListView(
IndexedWidgetBuilder itemBuilder; //子条目布局（ListView.builder(),ListView.separated()）
IndexedWidgetBuilder separatorBuilder; //（ListView.separated()）
SliverChildDelegate childrenDelegate; //为ListView提供子代的委托（ListView.custom()）
int itemCount; //item数量（ListView.bu ilder(),ListView.separated()）
List<Widget> children: const <Widget>[], //子条目布局（ListView()）
int semanticChildCount,//子条目数量
Axis scrollDirection: Axis.vertical;//滚动方向
bool reverse: falsel;//是否反转滚动方向
ScrollController controller;//滚动控制器
bool primary;//如果为true，即使滚动视图没有足够的内容来实际滚动，滚动视图也是可滚动的。否则，默认情况下，只有具有足够内容的用户才能滚动视图，取决于physics属性
ScrollPhysics physics;//滚动视图应如何响应用户输入
bool shrinkWrap: false;//是否应该由正在查看的内容确定scrollDirection中滚动视图的范围
EdgeInsetsGeometry padding;//内边距
double itemExtent;//滚动方向上的范围
bool addAutomaticKeepAlives: true;//是否将每个子项包装在AutomaticKeepAlive中
bool addRepaintBoundaries: true;//是否将每个子项包装在RepaintBoundary中
bool addSemanticIndexes: true;//是否将每个子项包装在IndexedSemantics中
double cacheExtent;//滚动缓存区像素
DragStartBehavior dragStartBehavior: DragStartBehavior.start;//确定处理拖动开始行为的方式
)
示例：
body: new Scrollbar(
// ListView.builder写法
child: new ListView.builder(
// 无分割线
itemBuilder: (context, item) {
return buildListData(context, titleItems[item], iconItems[item], subTitleItems[item]);
},
// 有分割线
itemBuilder: (context, item) {
return new Container(
child: new Column(
children: <Widget>[
buildListData(context, titleItems[item], iconItems[item], subTitleItems[item]),
new Divider()
],
),
);
},
itemCount: iconItems.length, // 数据长度
),
),
官方API：ListView-class
Padding
示例：
class PaddingTestRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Padding(
//上下左右各添加16像素补白
padding: EdgeInsets.all(16.0),
child: Column(
//显式指定对齐方式为左对齐，排除对齐干扰
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
//左边添加8像素补白
padding: const EdgeInsets.only(left: 8.0),
child: Text("Hello world"),
),
Padding(
//上下各添加8像素补白
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Text("I am Jack"),
),
Padding(
// 分别指定四个方向的补白
padding: const EdgeInsets.fromLTRB(20.0,.0,20.0,20.0),
child: Text("Your friend"),
)
],
),
);
}
}
文档：
Padding({
...
EdgeInsetsGeometry padding, // 开发中，我们一般都使用EdgeInsets类，
Widget child,
})
EdgeInsets({
fromLTRB(double left, double top, double right, double bottom), // 分别指定四个方向的填充
all(double value), // 所有方向均使用相同数值的填充。
only({left, top, right ,bottom }), // 可以设置具体某个方向的填充(可以同时指定多个方向)。
symmetric({ vertical, horizontal }) // 用于设置对称方向的填充，vertical指top和bottom，horizontal指left和right。
})
官方API：Padding-class
Positioned
示例：
Stack(
alignment:Alignment.center ,
fit: StackFit.expand, //未定位widget占满Stack整个空间
children: <Widget>[
Positioned(
left: 18.0,
child: Text("I am Jack"),
),
Container(child: Text("Hello world",style: TextStyle(color: Colors.white)),
color: Colors.red,
),
Positioned(
top: 18.0,
child: Text("Your friend"),
)
],
)
文档：
const Positioned({
Key key,
this.left, // 左边距
this.top, // 上边距
this.right, // 右边距
this.bottom, // 下边距
this.width, // 需要定位元素的宽度
this.height, // 需要定位元素的高度
@required Widget child,
})
官方API：Positioned-class
RaisedButton
文档：
RaisedButton(
requiredVoidCallback onPressed; //点击或以其他方式激活按钮时调用的回调
ValueChanged<bool> onHighlightChanged; //由底层InkWell小部件的InkWell.onHighlightChanged 回调调用
ButtonTextTheme textTheme; //文本主题
Color textColor; //文本颜色
Color disabledTextColor; //按钮不可用时的文本颜色
Color color; //按钮颜色
Color disabledColor; //按钮不可用时的颜色
Color highlightColor; //按钮按下时的颜色
Color splashColor; //点击后扩散动画的颜色
Brightness colorBrightness; //用于此按钮的主题亮度
double elevation; //凸出的高度
double highlightElevation; //按下按钮时凸出的高度
double disabledElevation; //按钮不可用时凸出的高度
EdgeInsetsGeometry padding; //内边距
ShapeBorder shape; //按钮材质的形状
Clip clipBehavior: Clip.none; //剪裁
MaterialTapTargetSize materialTapTargetSize; //配置点击目标的最小尺寸
Duration animationDuration; //动画的持续时间
Widget child; //子控件（RaisedButton()）
Widget icon; //图标（RaisedButton.icon()）
Widget label;//文本（RaisedButton.icon()）
)
示例：
RaisedButton(
onPressed: () {},
child: Text("textColor文本的颜色，color背景颜色，highlightColor按钮按下的颜色"),
textColor: Color(0xffff0000),
color: Color(0xfff1f1f1),
highlightColor: Color(0xff00ff00),
)
官方API：RaisedButton-class
Row
示例：
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Icon(Icons.opacity),
Icon(Icons.settings),
Container(
color: Colors.redAccent,
width: 100.0,
height: 100.0,
child: Text('data'),
),
Icon(Icons.ondemand_video),
],
)
文档：
Row({
Key key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,//将子Widget放置在什么位置
MainAxisAlignment.start，从左边开始布局
MainAxisAlignment.end，从右边开始布局
MainAxisAlignment.center，从中间开始布局
MainAxisAlignment.spaceBetween，相邻两个widget之间的距离相等
MainAxisAlignment.spaceAround，子widget平均分配空间，最左最又的组件离边的边距，为两个widget边距的一半，具体请自行设置查看效果
MainAxisAlignment.spaceEvenly，子widget平均分配空间，包括最左最右的widget离边的空间
MainAxisSize mainAxisSize = MainAxisSize.max,//设置Row在主轴上应该占据多少空间
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,//子元素应该如何沿着横轴放置，默认中间对齐
CrossAxisAlignment.satrt//设置子元素上边对齐
CrossAxisAlignment.end//设置子元素下边对齐
CrossAxisAlignment.stretch//每个子元素的上下对齐Row的上下边，相当于是拉伸操作
CrossAxisAlignment.baseline,//相当于CrossAxisAlignment.start,但是需要配合textBaseline，不然会报错
TextDirection textDirection,//设置子widget的左右显示方位，只有在crossAxisAlignment为start、end的时候起作用；
VerticalDirection verticalDirection = VerticalDirection.down,//设置垂直方向上的方向，通常用于Column中,在Row中使用的话，会影响子widget是上边距对齐，还是下边距对齐，跟 CrossAxisAlignment.end， CrossAxisAlignment.start相互影响，选择使用
TextBaseline textBaseline,//配合CrossAxisAlignment.baseline一起使用
List<Widget> children = const <Widget>[],//存放一组子widget
}
官方API：Row-class
Scaffold
继承关系 Object > Diagnosticable > DiagnosticableTree > Widget > StatefulWidget > Scaffold
实现基本设计视觉布局结构。支撑整个界面的内容，也是继承于Widget,一个控件。
文档:
Scaffold({
Key: key,
PreferredSizeWidget: appBar, // 一个设计应用程序栏。
Widget Body, // 内容控件
Widget floatingActionButton, // 浮动按钮FloatingActionButton
FloatingActionButtonLocation floatingActionButtonLocation.endFloat， // 浮动按钮放置的位置 centerFloat | endDocked | centerDocked | endFloat，
FloatingActionButtonAnimator floatingActionButtonAnimator, // 浮动按钮动画：FloatingActionButtonAnimator.scaling
List<Widget> persistentFooterButtons, // 底部控件二
Widget Drawer, // 左滑布局 ,主动调用： Scaffold.of(context).openDrawer();
Widget endDrawer, // 右滑布局 ,主动调用： Scaffold.of(context).openEndDrawer();
Widget bottomNavigationBar, // 底部控件三
Widget bottomSheet, // 底部控件一
Color backgroundColor, // 背景颜色
bool resizeToAvoidBottomPadding = true, // 是否调整主体的大小以避免键盘遮挡部分布局
bool primary = true, // 是否填充顶部（状态栏）
})
示例：
Scaffold(
appBar: AppBar(
leading: null,
automaticallyImplyLeading: false,
title: Text(widget.title),
actions: <Widget>[
IconButton(
icon: Icon(Icons.ac_unit),
onPressed: () {},
),
new PopupMenuButton<String>(
itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
new PopupMenuItem(child: new Text("我的")),
new PopupMenuItem(child: new Text("设置")),
new PopupMenuItem(child: new Text("钱包")),
]
)
],
elevation: 10,
shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0),side: new BorderSide(
style: BorderStyle.none,
)),
backgroundColor:Colors.green,
brightness: Brightness.light,
iconTheme: IconTheme.of(context).copyWith(color: Colors.black),
actionsIconTheme: IconTheme.of(context).copyWith(color: Colors.black),
textTheme: Theme.of(context).textTheme.apply(fontSizeFactor: 1.2),
primary: true,
centerTitle: true,
titleSpacing: 10,
toolbarOpacity: 1.0,
bottomOpacity : 0.5,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Hello Flutter',
),
],
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
tooltip: 'Increment',
foregroundColor: Colors.cyanAccent,
backgroundColor: Colors.green,
focusColor: Colors.red,
hoverColor: Colors.black,
onPressed: _showMessage,
shape :const CircleBorder(),
clipBehavior: Clip.none,
focusNode: _node,
isExtended: true,
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
persistentFooterButtons: <Widget>[
Text('取消'),
Text('确定')
],
drawer: new Drawer(
child: new UserAccountsDrawerHeader(
accountName: new Text(
"Flutter",
),
accountEmail: new Text(
"Flutter@gmail.com",
),
),
),
bottomNavigationBar:BottomNavigationBar(
items:[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text(
'首页',
),
),
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text(
'社区',
),
),
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text(
'我的',
),
),
],
currentIndex:0,
),
bottomSheet: Text('底部弹出框'),
primary: true,
drawerDragStartBehavior: DragStartBehavior.down,
extendBody: true,
drawerScrimColor: Color.fromARGB(50, 0, 0, 0),
);
官方API：Scaffold-class
Scrollable 可滚动组件
文档：
Scrollable({
Key key,
///滚动方向
this.axisDirection = AxisDirection.down,
///滚动控制器和事件监听
///在源码中是这样介绍的 ScrollController.initialScrollOffset 控制初始滚动的位置
///ScrollController.keepScrollOffset 控制是否应该自动在[PageStorage]中保存并恢复其滚动位
///置
///ScrollController.offset 用来读取当前滚动位置
this.controller,
///决定widget 在用户完成拖拽后的动画响应默认情况下会更护不同环境设置不同的变量
///ClampingScrollPhysics android 使用的水波纹效果
///BouncingScrollPhysics：iOS下弹性效果 如果android 想要实现这个效果
///子布局高度的综合必须大于listview 的实际高度度即viewport
this.physics,
/// 用于生成子布局 类似android 中adapter 的getItem 方法
@required this.viewportBuilder,
///
this.incrementCalculator,
/// 是否公开在语义数中,便于类似talkback的软件识别
this.excludeFromSemantics = false,
///语义子集数
this.semanticChildCount,
///处理拖动开始行为的方式与时机
///有两个值 DragStartBehavior.start DragStartBehavior.down
///从字面理解就 start是从拖动开始,down是从触摸事件按下开始
this.dragStartBehavior = DragStartBehavior.start,
})
ScrollView
文档：
const ScrollView({
Key key,
///Scrollable属性,用来设置滑动的主轴方向
this.scrollDirection = Axis.vertical,
///是否按照阅读方向相反的方向滑动
this.reverse = false,
///Scrollable属性,控制器用来监听滚动和设置滚动距离
this.controller,
/// 指是否使用widget树中默认的PrimaryScrollController；当滑动方向为垂直方向
///（scrollDirection值为Axis.vertical）并且没有指定controller时，primary默认为true
///看到 属性介绍primary 如果为真的时候即使他没有足够的高度来实际滚动他也会滚动,
///但是要求 controller 为 null ,但是我哦试验了一下没有作用
bool primary,
///Scrollable 属性,完成拖拽后的动画响应
ScrollPhysics physics,
///如果滚动视图不收缩换行，则滚动视图将展开到scrollDirection中允许的最大大小。
///如果滚动视图在scrollDirection中具有无限约束，则shrinkWrap必须为true
/// 貌似这个属性可以解决listview嵌套的问题,但是这样更为消耗性能
this.shrinkWrap = false,
this.center,
///当scrollOffset = 0，第一个child在viewport的位置（0 <= anchor <= 1.0），
///0.0在开始，1.0在尾部，0.5在中间,只有
this.anchor = 0.0,
///缓存区域大小
this.cacheExtent,
///Scrollable 属性 语义子集数
this.semanticChildCount,
///Scrollable 属性,开始响应拖拽的时机
this.dragStartBehavior = DragStartBehavior.start,
this.keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
})
官方API：Scrollable-class
Stack
示例：
Stack(
alignment: AlignmentDirectional.center,
textDirection: TextDirection.rtl,
fit: StackFit.passthrough,
children: <Widget>[
Container(
color: Colors.redAccent,
width: 100.0,
height: 100.0,
child: Text('data'),
),
Icon(Icons.settings),
Positioned(
top: 10,
left: 60,
child: Icon(Icons.settings)
),
Icon(Icons.opacity),
Icon(Icons.ondemand_video),
],
)
文档：
Stack({
Key key,
this.alignment = AlignmentDirectional.topStart,//设置子Widget开始展示的位置，从顶部开始展示
AlignmentDirectional.topCenter//从顶部中间开始展示
AlignmentDirectional.topEnd//从顶部结束位置展示
AlignmentDirectional.centerStart//从中间开始位置开始展示
AlignmentDirectional.center//从正中间展示
AlignmentDirectional.centerEnd//从中间结束位置展示
AlignmentDirectional.bottomStart//从底部开始位置展示
AlignmentDirectional.bottomCenter//从底部中间位置展示
AlignmentDirectional.bottomEnd//从底部结束位置展示
this.textDirection,//设置子widget的左右显示方位
this.fit = StackFit.loose,//设置没有通过positioned包裹的子widget的size，loose表示，以他子widget最大的size展示
StackFit.expand//stack的size等于他父widget的size
this.overflow = Overflow.clip,子widget超出stack时的截取方式，参考Text的溢出截取方式
List<Widget> children = const <Widget>[],//一组子widgets
})
官方文档：Stack-class
Switch
示例 + 文档：
new Switch(
value: this.check, // bool 切换按钮的值。
activeColor: Colors.blue, // 激活时原点颜色
activeThumbImage: ImageProvider, // 图片激活时的效果。
activeTrackColor: Colors.blue, // 激活时横条的颜色。
inactiveThumbColor: Colors.black, // 非激活时原点的颜色
inactiveThumbImage: ImageProvider, // 非激活原点的图片效果。
inactiveTrackColor: Colors.black, // 非激活时横条的颜色。
onChanged: (bool val) {
this.setState(() {
this.check = !this.check;
});
},
)
官网API： Switch-class
TabBar
示例：
TabBar(
onTap: (int index){
print('Selected......$index');
},
unselectedLabelColor: Colors.grey, // 设置未选中时的字体颜色，tabs里面的字体样式优先级最高
unselectedLabelStyle: TextStyle(fontSize: 20), // 设置未选中时的字体样式，tabs里面的字体样式优先级最高
labelColor: Colors.black, // 设置选中时的字体颜色，tabs里面的字体样式优先级最高
labelStyle: TextStyle(fontSize: 20.0), // 设置选中时的字体样式，tabs里面的字体样式优先级最高
isScrollable: true, // 允许左右滚动
indicatorColor: Colors.red, // 选中下划线的颜色
indicatorSize: TabBarIndicatorSize.label, // 选中下划线的长度，label时跟文字内容长度一样，tab时跟一个Tab的长度一样
indicatorWeight: 6.0, // 选中下划线的高度，值越大高度越高，默认为2。0
indicator: BoxDecoration(), // 用于设定选中状态下的展示样式
tabs: [
Text('精选',style: TextStyle(
color: Colors.green,
fontSize: 16.0
),),
Text('猜你喜欢',style: TextStyle(
color: Colors.indigoAccent,
fontSize: 16.0
),),
Text('母婴'),
Text('儿童'),
Text('女装'),
]
),
文档：
const TabBar({
Key key,
@required this.tabs, // 必须实现的，设置需要展示的tabs，最少需要两个
this.controller,
this.isScrollable = false, // 是否需要滚动，true为需要
this.indicatorColor, // 选中下划线的颜色
this.indicatorWeight = 2.0, // 选中下划线的高度，值越大高度越高，默认为2
this.indicatorPadding = EdgeInsets.zero,
this.indicator, // 用于设定选中状态下的展示样式
this.indicatorSize, // 选中下划线的长度，label时跟文字内容长度一样，tab时跟一个Tab的长度一样
this.labelColor, // 设置选中时的字体颜色，tabs里面的字体样式优先级最高
this.labelStyle, // 设置选中时的字体样式，tabs里面的字体样式优先级最高
this.labelPadding,
this.unselectedLabelColor, // 设置未选中时的字体颜色，tabs里面的字体样式优先级最高
this.unselectedLabelStyle, // 设置未选中时的字体样式，tabs里面的字体样式优先级最高
this.dragStartBehavior = DragStartBehavior.start,
this.onTap, // 点击事件
})
官方API：TabBar-class
Text
示例：
Text("Hello world",
style: TextStyle(
color: Colors.blue,
fontSize: 18.0,
height: 1.2,
fontFamily: "Courier",
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
background: new Paint()..color=Colors.yellow,
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.dashed,
),
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
maxLines: 1,
);
文档：
Text(
String data; // 文本内容（Text()）
TextSpan textSpan; // 文本内容（Text.rich()）
TextStyle style; // 文本样式
StrutStyle strutStyle; // 段落样式
TextAlign textAlign; // 本文对其方式
TextDirection textDirection; // 文本方向
Locale locale; // 选择区域特定字形的语言环境
bool softWrap; // 是否自动换行
TextOverflow overflow; // 如何处理文本溢出
double textScaleFactor; // 每个逻辑像素的字体像素数
int maxLines; // 文本的最大行数，如果文本超过给定的行数，则会根据overflow字段截断
String semanticsLabel; // 文本的替代语义标签
)
官方API: Text-class
TextField
示例：
TextField(
autofocus: true, // 自动聚焦
obscureText: false, // 是否隐藏正在编辑的文本，如用于输入密码的场景等，文本内容会用“•”替换。
focusNode: focusNode,
textAlign = TextAlign.start, // 输入框内编辑文本在水平方向的对齐方式。
style: TextStyle(), // 正在编辑的文本样式
maxLines: 1, // 输入框的最大行数，默认为1；如果为null，则无行数限制。
maxLength: 30, // 代表输入框文本的最大长度，设置后输入框右下角会显示输入的文本计数
maxLengthEnforced: true, // 决定当输入文本长度超过maxLength时是否阻止输入，为true时会阻止输入，为false时不会阻止输入但输入框会变红。
onSubmitted: (ValueChanged<String> value) {}, // 输入完成回调
onEditingComplete: () {}, // 输入完成回调
inputFormatters: [WhitelistingTextInputFormatter(new RegExp("[a-z]"))], // 正则白名单校验 附一
enable: false, // 是否禁用
cursorWidth: 20.0, // 光标宽度
cursorRadius:
decoration: InputDecoration(
labelText: "用户名",
hintText: "用户名或邮箱",
prefixIcon: Icon(Icons.person)
),
),
文档：
TextField(
TextEditingController controller; // 文本编辑控制器
FocusNode focusNode; // 定义此窗口小部件的键盘焦点
InputDecoration decoration; // 在文本字段周围显示的装饰
TextInputType keyboardType; // 用于编辑文本的键盘类型
TextInputAction textInputAction; // 用于键盘的操作按钮类型
TextCapitalization textCapitalization; // 配置平台键盘如何选择大写或小写键盘,默认TextCapitalization.none
TextStyle style; // 文本样式
StrutStyle strutStyle; // 用于垂直布局的支柱样式
TextAlign textAlign; // 对齐方式,默认TextAlign.start
TextDirection textDirection, // 文本的方向性
bool autofocus; // 是否自动获取焦点,默认false
bool obscureText; // 是否隐藏文本（密码）,默认false
bool autocorrect; // 是否启用自动更正,默认true
int maxLines; // 最大行,默认1
int minLines; // 最小行
bool expands; // 是否将此窗口小部件的高度调整为填充其父级,默认false
int maxLength; // 最大长度
bool maxLengthEnforced; // 如果为true，则阻止该字段允许超过maxLength个 字符,默认true
ValueChanged<String> onChanged; // 当用户启动对TextField值的更改时调用：当他们插入或删除文本时
VoidCallback onEditingComplete; // 当用户提交可编辑内容时调用（例如，用户按下键盘上的“完成”按钮）
ValueChanged<String> onSubmitted; // 当用户指示他们已完成编辑字段中的文本时调用
List<TextInputFormatter> inputFormatters; // 可选的输入验证和格式覆盖
bool enabled; // 是否可用
double cursorWidth; // 光标的宽度,默认2.0
Radius cursorRadius; // 光标的圆角度
Color cursorColor; // 光标颜色
Brightness keyboardAppearance; // 键盘的外观
EdgeInsets scrollPadding; // 此值控制在滚动后TextField将位于Scrollable边缘的距离,默认EdgeInsets.all(20.0)
DragStartBehavior dragStartBehavior; // 确定处理拖动开始行为的方式,默认DragStartBehavior.start
bool enableInteractiveSelection; // 如果为true，则长按此TextField将显示剪切/复制/粘贴菜单，并且点击将移动文本插入符号
GestureTapCallback onTap; // 当用户点击此文本字段时调用
InputCounterWidgetBuilder buildCounter; // 生成自定义InputDecorator.counter小部件的回调
ScrollPhysics scrollPhysics; // 确定Scrollable小部件的物理特性
)
附一：
- WhitelistingTextInputFormatter 白名单校验，也就是只允许输入符合规则的字符
- BlacklistingTextInputFormatter 黑名单校验，除了规定的字符其他的都可以输入
- LengthLimitingTextInputFormatter 长度限制，跟maxLength作用类似
官方API：TextField-class
Transform
示例：
Container(
color: Colors.black,
child: new Transform(
alignment: Alignment.topRight, // 相对于坐标系原点的对齐方式
transform: new Matrix4.skewY(0.3), // 沿Y轴倾斜0.3弧度
child: new Container(
padding: const EdgeInsets.all(8.0),
color: Colors.deepOrange,
child: const Text('Apartment for rent!'),
),
),
);
平移：
DecoratedBox(
decoration:BoxDecoration(color: Colors.red),
// 默认原点为左上角，左移20像素，向上平移5像素
child: Transform.translate(
offset: Offset(-20.0, -5.0),
child: Text("Hello world"),
),
)
旋转：
DecoratedBox(
decoration:BoxDecoration(color: Colors.red),
child: Transform.rotate(
// 旋转90度
angle: math.pi/2 ,
child: Text("Hello world"),
),
)；
缩放：
DecoratedBox(
decoration:BoxDecoration(color: Colors.red),
child: Transform.scale(
scale: 1.5, // 放大到1.5倍
child: Text("Hello world")
)
);
layout 旋转：
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
DecoratedBox(
decoration: BoxDecoration(color: Colors.red),
// 将Transform.rotate换成RotatedBox
child: RotatedBox(
quarterTurns: 1, // 旋转90度(1/4圈)
child: Text("Hello world"),
),
),
Text("你好", style: TextStyle(color: Colors.green, fontSize: 18.0),)
],
),
官方API：Transform-class
Wrap
示例：
class WrapDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Wrap(
direction: Axis.vertical,
direction: Axis.horizontal,
spacing: 16.0, // 在direction: Axis.horizontal的时候指左右两个Widget的间距,在direction: Axis.vertical的时候指上下两个widget的间距
runSpacing: 16.0,// 在direction: Axis.horizontal的时候指上下两个Widget的间距,在direction: Axis.vertical的时候指左右两个widget的间距
alignment: WrapAlignment.start,
crossAxisAlignment: WrapCrossAlignment.start,
textDirection: TextDirection.ltr,
verticalDirection: VerticalDirection.up,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Container(
alignment: Alignment.center,
width: 86.0,
height: 36.0,
color: Colors.orange,
child: Text('历史记录1'),
),
),
ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Container(
alignment: Alignment.center,
width: 86.0,
height: 36.0,
color: Colors.redAccent,
child: Text('历史记录2'),
),
),
ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Container(
alignment: Alignment.center,
width: 86.0,
height: 36.0,
color: Colors.blue,
child: Text('历史记录3'),
),
),
ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Container(
alignment: Alignment.center,
width: 86.0,
height: 36.0,
color: Colors.greenAccent,
child: Text('历史记录4'),
),
),
ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Container(
alignment: Alignment.center,
width: 86.0,
height: 36.0,
color: Colors.amber,
child: Text('历史记录5'),
),
),
ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Container(
alignment: Alignment.center,
width: 86.0,
height: 36.0,
color: Colors.indigoAccent,
child: Text('历史记录6'),
),
),
],
);
}
}
文档：
Wrap({
Key key,
this.direction = Axis.horizontal, // 设置水平局部还是垂直布局
this.alignment = WrapAlignment.start, // 设置元素的其实位置，
this.spacing = 0.0, // 在direction: Axis.horizontal的时候指左右两个Widget的间距,在direction: Axis.vertical的时候指上下两个widget的间距
this.runAlignment = WrapAlignment.start, // 设置widget与widget在水平或者垂直轴上的间距
WrapAlignment.start // 每一行（列）子Widget在纵（横）轴上的排列，全部子Widget从顶部开始展示
WrapAlignment.end // 每一行（列）子Widget在纵（横）轴上的排列，全部子Widget挨着底部展示
WrapAlignment.center // 每一行（列）子Widget在纵（横）轴上的排列，全部子widget在中间展示
WrapAlignment.spaceBetween // 每一行（列）子Widget在纵（横）轴上的排列，两两子widget之间间距相等，最上最下子widget挨着边展示
WrapAlignment.spaceAround // 每一行（列）子Widget在纵（横）轴上的排列，两两子widget之间间距相等，最上最下子widget离边的距离为两两子widget之间距离的一半
WrapAlignment.spaceAround // 每一行（列）子Widget在纵（横）轴上的排列，两两子widget之间间距相等，最上最下子widget离边的距离为两两子widget之间距离相等
this.runSpacing = 0.0, // 在direction: Axis.horizontal的时候指上下两个Widget的间距,在direction: Axis.vertical的时候指左右两个widget的间距
this.crossAxisAlignment = WrapCrossAlignment.start, // 水平排列时控制全部子widgets的上部对齐，垂直排列时控制全部子widgets的左边对齐
WrapCrossAlignment.end // 水平排列时控制全部子widgets的下部对齐，垂直排列时控制全部子widgets的又边对齐
WrapCrossAlignment.center // 设置每一行的子Widgets剧中对齐
this.textDirection, // 设置每一行（列）的展示
textDirection: TextDirection.ltr // 设置每一行（列）的子Widgets从左到右（从上到下）正常显示，正序排列
textDirection: TextDirection.rtl // 设置每一行（列）的子Widgets倒序显示
this.verticalDirection = VerticalDirection.down, // 设置行列widgets的展示，正常显示
VerticalDirection.up // 倒序展示，比如，在direction: Axis.horizontal时有1、2、3行widgets，设置为up后，展示为3、2、1
List<Widget> children = const <Widget>[], // 一组子widgets
})
官方API：Wrap-class
END
持续更新，修修补补。
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！