Wigets学习之流式布局

Wrap

创建一个可以换行的布局，即：一行放不下自动换行

• children：子部件
• direction：排列方式，默认为Axis.horizontal(横向)
• alignment：横轴对齐方式
• runAlignment：交叉轴对齐方式
• crossAxisAlignment：子部件在交叉轴的对齐方式
• spacing：交叉轴间隙
• runSpacing：横轴间隙
• textDirection：文本排列方式

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  final List<Widget> list = List.generate(
      8,
      (index) => Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ));

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('流式布局'),
        ),
        body: Wrap(
          spacing: 12,
          runSpacing: 12,
          alignment: WrapAlignment.spaceAround,
          crossAxisAlignment: WrapCrossAlignment.center,
          children: list,
        ),
      ),
    );
  }
}

Flow

创建一个流式布局

此部件过于复杂，需要自实现子部件的位置转换，但是性能好灵活。目前不曾遇见使用场景，以后用过了再更新此部件文档