Flutter-Wrap的使用說明
Wrap可以進(jìn)行水平方向或者垂直方向上的布局,在一行或者一列現(xiàn)實(shí)不完所有的widgets的時(shí)候假夺，能夠根據(jù)當(dāng)前寬度或者高度自動換行唤殴。
Wrap的定義
Wrap定義的屬性不多，查看如下：
Wrap({
Key key,
this.direction = Axis.horizontal,//設(shè)置水平局部還是垂直布局
this.alignment = WrapAlignment.start,//設(shè)置元素的其實(shí)位置捐下，
this.spacing = 0.0,//在direction: Axis.horizontal的時(shí)候指左右兩個(gè)Widget的間距,在direction: Axis.vertical的時(shí)候指上下兩個(gè)widget的間距
this.runAlignment = WrapAlignment.start,//設(shè)置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的時(shí)候指上下兩個(gè)Widget的間距,在direction: Axis.vertical的時(shí)候指左右兩個(gè)widget的間距
this.crossAxisAlignment = WrapCrossAlignment.start,//水平排列時(shí)控制全部子widgets的上部對齊桌粉，垂直排列時(shí)控制全部子widgets的左邊對齊
WrapCrossAlignment.end//水平排列時(shí)控制全部子widgets的下部對齊，垂直排列時(shí)控制全部子widgets的又邊對齊
WrapCrossAlignment.center//設(shè)置每一行的子Widgets劇中對齊
this.textDirection,//設(shè)置每一行（列）的展示
textDirection: TextDirection.ltr//設(shè)置每一行（列）的子Widgets從左到右（從上到下）正常顯示衙四，正序排列
textDirection: TextDirection.rtl////設(shè)置每一行（列）的子Widgets倒序顯示
this.verticalDirection = VerticalDirection.down,//設(shè)置行列widgets的展示铃肯，正常顯示
VerticalDirection.up//倒序展示，比如传蹈，在direction: Axis.horizontal時(shí)有1押逼、2步藕、3行widgets，設(shè)置為up后宴胧，展示為3漱抓、2表锻、1
List<Widget> children = const <Widget>[],//一組子widgets
})
Wrap的簡單使用
可以把Wrap當(dāng)作搜索歷史的展示用恕齐，代碼如下：
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的時(shí)候指左右兩個(gè)Widget的間距,在direction: Axis.vertical的時(shí)候指上下兩個(gè)widget的間距
runSpacing: 16.0,//在direction: Axis.horizontal的時(shí)候指上下兩個(gè)Widget的間距,在direction: Axis.vertical的時(shí)候指左右兩個(gè)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'),
),
),
],
);
}
}
這里模擬有6條搜索歷史記錄，依次進(jìn)行排列瞬逊；運(yùn)行起來展示效果如下：
wrap_history.jpg
wrap的verticalDirection和textDirection的詳細(xì)說明使用
wrap的verticalDirection和textDirection的詳細(xì)說明使用1显歧、
現(xiàn)在先看一組正常的展示，也就是說：
textDirection: TextDirection.ltr,
verticalDirection: VerticalDirection.down,
代碼如下：
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的時(shí)候指左右兩個(gè)Widget的間距,在direction: Axis.vertical的時(shí)候指上下兩個(gè)widget的間距
runSpacing: 16.0,//在direction: Axis.horizontal的時(shí)候指上下兩個(gè)Widget的間距,在direction: Axis.vertical的時(shí)候指左右兩個(gè)widget的間距
alignment: WrapAlignment.spaceEvenly,
crossAxisAlignment: WrapCrossAlignment.end,
textDirection: TextDirection.ltr,
verticalDirection: VerticalDirection.down,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Container(
alignment: Alignment.center,
width: 86.0,
height: 360.0,
color: Colors.orange,
child: Text('歷史記錄1'),
),
),
ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Container(
alignment: Alignment.center,
width: 106.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: 360.0,
color: Colors.blue,
child: Text('歷史記錄3'),
),
),
ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Container(
alignment: Alignment.center,
width: 106.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: 106.0,
height: 36.0,
color: Colors.indigoAccent,
child: Text('歷史記錄6'),
),
),
],
);
}
}
運(yùn)行效果确镊，可以看出士骤，每一行的widgets都是從左到右正常序列展示的
wrap_normal.jpg
wrap的verticalDirection和textDirection的詳細(xì)說明使用2、
現(xiàn)在設(shè)置倒序展示的wrap中子widgets
textDirection: TextDirection.rtl,
verticalDirection: VerticalDirection.up,
演示代碼：
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的時(shí)候指左右兩個(gè)Widget的間距,在direction: Axis.vertical的時(shí)候指上下兩個(gè)widget的間距
runSpacing: 16.0,//在direction: Axis.horizontal的時(shí)候指上下兩個(gè)Widget的間距,在direction: Axis.vertical的時(shí)候指左右兩個(gè)widget的間距
alignment: WrapAlignment.spaceEvenly,
crossAxisAlignment: WrapCrossAlignment.end,
textDirection: TextDirection.rtl,
verticalDirection: VerticalDirection.up,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Container(
alignment: Alignment.center,
width: 86.0,
height: 360.0,
color: Colors.orange,
child: Text('歷史記錄1'),
),
),
ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Container(
alignment: Alignment.center,
width: 106.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: 360.0,
color: Colors.blue,
child: Text('歷史記錄3'),
),
),
ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Container(
alignment: Alignment.center,
width: 106.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: 106.0,
height: 36.0,
color: Colors.indigoAccent,
child: Text('歷史記錄6'),
),
),
],
);
}
}
對于上面的代碼蕾域，僅做了很小的改動拷肌，運(yùn)行展示效果如下：
wrap_notNormal.jpg
從運(yùn)行效果上可以看出：
textDirection: TextDirection.rtl,控制著每一行的widgets的倒序排列，
verticalDirection: VerticalDirection.up,控制著以行為單位的widgets的倒序展示旨巷。
備注：在后續(xù)的使用過程中巨缘，請根據(jù)實(shí)際場景使用Wrap這個(gè)Widget。
