流式布局

本文介绍Flutter的Wrap组件，详细介绍了组件的定义和用法。

Wrap

用 Row 的时候可以发现子元素不会自动换行，这时候就需要 Wrap 了；

• 定义

  Wrap({
    this.direction = Axis.horizontal,
    // 主轴方向的对齐方式
    this.alignment = WrapAlignment.start,
    // 主轴方向子widget的间距
    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>[],
  })
  

• 示例

  import 'package:flutter/material.dart';
  
  void main(List<String> args) {
    runApp(const ModelBox());
  }
  
  
  class ModelBox extends StatelessWidget {
    const ModelBox({Key? key}): super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Box Model'),
          ),
          body: Wrap(
            spacing: 10,
            runSpacing: 20,
            alignment: WrapAlignment.spaceAround,
            runAlignment: WrapAlignment.center,
            children: const [
              FlutterLogo(size: 80),
              FlutterLogo(size: 80),
              FlutterLogo(size: 80),
              FlutterLogo(size: 80),
              FlutterLogo(size: 80),
              FlutterLogo(size: 80),
            ],
          )
        ),
      );
    }
  }