在Row和Column中,如果子Widget超出屏幕范围,则会报溢出错误:
Row error
因为Row只有一行,超出了屏幕范围也不会自动折行,我们可以采用Warp来让它折行,我们把超出屏幕范围会自动折行的布局称为流式布局,Flutter中Wrap和Flow支持流式布局.
Wrap
Wrap中的接口和Flex有些相同的属性,其表达的意义也是相同的:
Wrap({
Key key,
this.direction = Axis.horizontal,
this.alignment = WrapAlignment.start,
this.spacing = 0.0,
this.runAlignment = WrapAlignment.start,
this.runSpacing = 0.0,
this.crossAxisAlignment = WrapCrossAlignment.start,
this.textDirection,
this.verticalDirection = VerticalDirection.down,
List<Widget> children = const <Widget>[],
})
Wrap中有几个独有的属性:
spacing:主轴方向上子Widget之间的间距;
runSpacing:纵轴方向上行或者列之间的间距;
runAlignment:纵轴方向上的对齐方式.
基本用法:
Wrap(
spacing: 30.0,
runAlignment: WrapAlignment.center,
runSpacing: 10.0,
children: <Widget>[
Text("Flutter",
style: TextStyle(fontSize: 15.0),
),
RaisedButton(
child: Text("Button"),
),
Text("Increment Flutter",
style: TextStyle(fontSize: 25.0),
),
RaisedButton(
child: Text("Button"),
),
Text("Increment Flutter",
style: TextStyle(fontSize: 10.0),
),
RaisedButton(
child: Text("Button"),
),
Text("Increment Flutter",
style: TextStyle(fontSize: 12.0),
),
RaisedButton(
child: Text("Button"),
),
Text("Increment Flutter",
style: TextStyle(fontSize: 24.0),
),
RaisedButton(
child: Text("Button"),
),
Text("Increment Flutter",
style: TextStyle(fontSize: 10.0),
),
],
),
Wrap