Flutter开发之——多组件布局容器-Wrap，细节决定成败

在Flutter中，Wrap组件可以用来实现当子组件数量过多，而屏幕宽度不足以容纳所有子组件时，可以将子组件按照一定的规则自动换行显示。这样可以避免水平滚动，使布局更加适应屏幕尺寸。

以下是一个简单的Wrap组件使用示例：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Wrap(
            spacing: 8.0, // 主轴方向上的间距
            runSpacing: 4.0, // 交叉轴方向上的间距
            children: <Widget>[
              Chip(label: Text('Chip 1')),
              Chip(label: Text('Chip 2')),
              Chip(label: Text('Chip 3')),
              // ... 更多Chip组件
            ],
          ),
        ),
      ),
    );
  }
}

在这个例子中，Wrap组件包含了多个Chip组件。当Wrap内的子组件宽度总和超过屏幕宽度时，子组件会自动换行显示。spacing属性定义了同一行内各子组件之间的间距，runSpacing属性定义了每行之间的间距。