Flutter 流式布局wrap实现颜色标签选择器

以下是一个简化的代码示例，展示了如何使用Flutter的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: ColorSelector(),
        ),
      ),
    );
  }
}
 
class ColorSelector extends StatefulWidget {
  @override
  _ColorSelectorState createState() => _ColorSelectorState();
}
 
class _ColorSelectorState extends State<ColorSelector> {
  List<Color> colors = [
    Colors.red,
    Colors.green,
    Colors.blue,
    // ... 其他颜色
  ];
 
  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 8.0, // 主轴方向上的空间
      runSpacing: 4.0, // 交叉轴方向上的空间
      children: colors.map((color) => ColorTag(color: color)).toList(),
    );
  }
}
 
class ColorTag extends StatelessWidget {
  final Color color;
 
  const ColorTag({Key key, this.color}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(8.0),
      padding: EdgeInsets.all(4.0),
      decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.circular(4.0),
      ),
    );
  }
}

这段代码定义了一个名为ColorSelector的有状态小部件，它使用Wrap来布局一行中可能有多个颜色标签。每个ColorTag都是一个小部件，它使用Container来显示颜色，并且可以通过点击选择。通过调整spacing和runSpacing属性，可以控制颜色标签之间的空间。