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

群组
欢迎加入群组,闲聊工作&技术&问题等

在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


 上一篇
Flutter开发-Layout -层叠布局(Stack和Positioned) Flutter开发-Layout -层叠布局(Stack和Positioned)
群组欢迎加入群组,闲聊工作&技术&问题等         层叠布局也可以称为相对布局,子Widget根据父容器的相对位置来确定布局,好比iOS
2019-06-18
下一篇 
Flutter开发-Layout -弹性布局(Flex和Expanded) Flutter开发-Layout -弹性布局(Flex和Expanded)
群组欢迎加入群组,闲聊工作&技术&问题等 Flex        Flex弹性,从字面意义可以理解具有伸缩性,它允许子Widget按照一定的比
2019-06-18
  目录