折行

在使用 Flex、Row和Colum时,如果子widget超出屏幕范围,则会报溢出错误

Wrap

Wrap 的主要作用是在子元素超过父元素的情况下进行换行, 避免溢出错误

Wrap({
  ...
  this.textDirection,
  this.direction = Axis.horizontal,
  this.alignment = WrapAlignment.start,
  this.crossAxisAlignment = WrapCrossAlignment.start,
  this.verticalDirection = VerticalDirection.down,
  this.spacing = 0.0,
  this.runAlignment = WrapAlignment.start,
  this.runSpacing = 0.0,
  List<Widget> children = const <Widget>[],
})

Wrap大部分属性都与Flex相同, Wrap有几个特有的属性:

  • spacing:主轴方向子widget的间距
  • runSpacing:纵轴方向的间距
  • runAlignment:纵轴方向的对齐方式

示例:

Wrap(
  spacing: 8.0, // 主轴(水平)方向间距
  runSpacing: 4.0, // 纵轴(垂直)方向间距
  alignment: WrapAlignment.center, //沿主轴方向居中
  children: <Widget>[
    new Chip(
      avatar: new CircleAvatar(backgroundColor: Colors.blue, child: Text('A')),
      label: new Text('Hamilton'),
    ),
    new Chip(
      avatar: new CircleAvatar(backgroundColor: Colors.blue, child: Text('M')),
      label: new Text('Lafayette'),
    ),
    new Chip(
      avatar: new CircleAvatar(backgroundColor: Colors.blue, child: Text('H')),
      label: new Text('Mulligan'),
    ),
    new Chip(
      avatar: new CircleAvatar(backgroundColor: Colors.blue, child: Text('J')),
      label: new Text('Laurens'),
    ),
  ],
)

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress