在Row和Column中,如果子Widget超出屏幕范圍,則會(huì)報(bào)溢出錯(cuò)誤:

Row error

????????因?yàn)镽ow只有一行,超出了屏幕范圍也不會(huì)自動(dòng)折行,我們可以采用Warp來(lái)讓它折行,我們把超出屏幕范圍會(huì)自動(dòng)折行的布局稱為流式布局,Flutter中Wrap和Flow支持流式布局.

Wrap

Wrap中的接口和Flex有些相同的屬性,其表達(dá)的意義也是相同的:

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中有幾個(gè)獨(dú)有的屬性:
spacing:主軸方向上子Widget之間的間距;
runSpacing:縱軸方向上行或者列之間的間距;
runAlignment:縱軸方向上的對(duì)齊方式.

基本用法:

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