轻松实现响应式布局：在 Flutter 中释放 FlexibleWrap 的强大力量

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: FlexibleWrap(
            direction: Axis.horizontal,
            spacing: 8.0,
            runSpacing: 4.0,
            children: <Widget>[
              // 生成列表项的简便方法
              ...List.generate(20, (index) {
                return Chip(
                  label: Text("Tag $index"),
                  backgroundColor: Colors.blue[100 + (index % 4) * 100],
                );
              }),
            ],
          ),
        ),
      ),
    );
  }
}

这段代码使用了FlexibleWrap来创建一个水平的标签列表，并在每个标签之间有间隔，在标签之间有额外的垂直间隔。它使用了List.generate方法来生成一个Chip列表，从而使代码更加简洁和高效。