Flutter开发-Layout -流式布局(Wrap)

Flutter开发

发布日期: 2019-06-18

文章字数: 348

阅读时长: 1 分

阅读次数:

群组
Flutter,iOS,Android,Python等,闲聊工作&技术&问题;
个人主页:https://waitwalker.cn
telegram群链接:https://t.me/joinchat/Ej0o0A1ntlq5ZFIMzzO5Pw

在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