Flutter——Wrap組件（流式布局）

Wrap 可以實現流布局，單行的 Wrap 跟 Row 表現幾乎一致，單列的 Wrap 則跟 Row 表現幾乎一致。但 Row 與 Column 都是單行單列的，Wrap 則突破了這個限制，mainAxis 上空間不足時，則向 crossAxis 上去擴展顯示。

 

Wrap組件的常用屬性：

屬性	說明
direction	主軸的方向，默認水平
alignment	主軸的對其方式
spacing	主軸方向上的間距
textDirection	文本方向
verticalDirection	定義了 children 擺放順序，默認是 down，見Flex組件相關屬性介紹。
runAlignment	run 的對齊方式。run 可以理解為新的行或者列，如果是水平方向布局的話，run 可以理解為新的一行
runSpacing	run 的間距

 

 

import 'package:flutter/material.dart';
import 'res/listData.dart';

void main() {
  runApp(MaterialApp(
    title: "WrapWidget",
    home: MyApp(),
  ));
}


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:Wrap(
        spacing: 10.0,
        alignment: WrapAlignment.spaceEvenly,
        runSpacing: 10.0,
        children: <Widget>[
          MyButton("第1集"),
          MyButton("第2集第2集"),
          MyButton("第3集"),
          MyButton("第4集第4集"),
          MyButton("第5集"),
          MyButton("第6集"),
          MyButton("第7集"),
          MyButton("第8集第8集第8集"),
          MyButton("第9集"),
        ],
      )
    );
  }
}


class MyButton extends StatelessWidget {
  final String text;
  MyButton(this.text);

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text(this.text),
      textColor: Theme.of(context).accentColor,
      onPressed: (){},
    );
  }

}