Flutter 中的 Wrap 小部件：全面指南

在Flutter中，Wrap小部件是一个可以排列子元素以构成一个线性布局的小部件，但如果子元素的宽度超过了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小部件。通过设置spacing属性，我们可以控制Chip在水平方向上的间距；通过设置runSpacing属性，我们可以控制Chip在垂直方向上的间距。这样，当Wrap的宽度不足以容纳更多的Chip时，Chip会自动移动到新的一行中。