Flutter流式布局 #

Wrap({
  Key? key,
  Axis direction = Axis.horizontal,
  WrapAlignment alignment = WrapAlignment.start,
  double spacing = 0.0,
  WrapAlignment runAlignment = WrapAlignment.start,
  double runSpacing = 0.0,
  WrapCrossAlignment crossAxisAlignment = WrapCrossAlignment.start,
  TextDirection? textDirection,
  VerticalDirection verticalDirection = VerticalDirection.down,
  Clip clipBehavior = Clip.none,
  List<Widget> children = const <Widget>[],
})

Wrap(
  children: [
    Chip(label: Text('Tag 1')),
    Chip(label: Text('Tag 2')),
    Chip(label: Text('Tag 3')),
    Chip(label: Text('Tag 4')),
    Chip(label: Text('Tag 5')),
  ],
)

Wrap(
  direction: Axis.horizontal,
  children: [...],
)

Wrap(
  direction: Axis.vertical,
  children: [...],
)

Wrap(
  spacing: 8,
  children: [
    Chip(label: Text('Tag 1')),
    Chip(label: Text('Tag 2')),
    Chip(label: Text('Tag 3')),
  ],
)

Wrap(
  spacing: 8,
  runSpacing: 16,
  children: [
    Chip(label: Text('Tag 1')),
    Chip(label: Text('Tag 2')),
    Chip(label: Text('Tag 3')),
    Chip(label: Text('Tag 4')),
    Chip(label: Text('Tag 5')),
  ],
)

Wrap(
  alignment: WrapAlignment.center,
  children: [...],
)

WrapAlignment.start
WrapAlignment.end
WrapAlignment.center
WrapAlignment.spaceBetween
WrapAlignment.spaceAround
WrapAlignment.spaceEvenly

Wrap(
  runAlignment: WrapAlignment.center,
  children: [...],
)

Wrap(
  crossAxisAlignment: WrapCrossAlignment.center,
  children: [
    Container(width: 50, height: 50, color: Colors.red),
    Container(width: 50, height: 100, color: Colors.green),
    Container(width: 50, height: 75, color: Colors.blue),
  ],
)

WrapCrossAlignment.start
WrapCrossAlignment.end
WrapCrossAlignment.center

Wrap(
  spacing: 8,
  runSpacing: 8,
  children: [
    'Flutter',
    'Dart',
    'Android',
    'iOS',
    'Web',
    'Desktop',
    'Mobile',
    'Cross-platform',
  ].map((tag) => Chip(
    label: Text(tag),
    backgroundColor: Colors.blue.shade100,
  )).toList(),
)

class TagList extends StatefulWidget {
  @override
  State<TagList> createState() => _TagListState();
}

class _TagListState extends State<TagList> {
  final List<String> _tags = ['Flutter', 'Dart', 'Android', 'iOS'];
  
  void _removeTag(String tag) {
    setState(() {
      _tags.remove(tag);
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 8,
      runSpacing: 8,
      children: _tags.map((tag) => Chip(
        label: Text(tag),
        deleteIcon: Icon(Icons.close, size: 16),
        onDeleted: () => _removeTag(tag),
      )).toList(),
    );
  }
}

Wrap(
  spacing: 4,
  runSpacing: 4,
  children: List.generate(9, (index) {
    return Container(
      width: (MediaQuery.of(context).size.width - 16) / 3 - 4,
      height: (MediaQuery.of(context).size.width - 16) / 3 - 4,
      color: Colors.primaries[index % Colors.primaries.length],
      child: Center(child: Text('${index + 1}')),
    );
  }),
)

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text('搜索历史', style: TextStyle(fontWeight: FontWeight.bold)),
        TextButton(
          onPressed: () {},
          child: Text('清空'),
        ),
      ],
    ),
    SizedBox(height: 8),
    Wrap(
      spacing: 8,
      runSpacing: 8,
      children: [
        'Flutter教程',
        'Dart语言',
        'Widget详解',
        '状态管理',
      ].map((keyword) => ActionChip(
        label: Text(keyword),
        onPressed: () {
          print('Search: $keyword');
        },
      )).toList(),
    ),
  ],
)

Flow({
  Key? key,
  required FlowDelegate delegate,
  List<Widget> children = const <Widget>[],
  Clip clipBehavior = Clip.hardEdge,
})

class MyFlowDelegate extends FlowDelegate {
  @override
  void paintChildren(FlowPaintingContext context) {
    double x = 0;
    double y = 0;
    
    for (int i = 0; i < context.childCount; i++) {
      var child = context.getChildSize(i);
      if (x + child!.width > context.size.width) {
        x = 0;
        y += child.height;
      }
      context.paintChild(i, transform: Matrix4.translationValues(x, y, 0));
      x += child.width;
    }
  }
  
  @override
  bool shouldRepaint(covariant FlowDelegate oldDelegate) {
    return false;
  }
}

Flow(
  delegate: MyFlowDelegate(),
  children: [
    Container(width: 80, height: 80, color: Colors.red),
    Container(width: 100, height: 60, color: Colors.green),
    Container(width: 60, height: 100, color: Colors.blue),
  ],
)

class CircleFlowDelegate extends FlowDelegate {
  @override
  void paintChildren(FlowPaintingContext context) {
    final centerX = context.size.width / 2;
    final centerY = context.size.height / 2;
    final radius = 100.0;
    
    for (int i = 0; i < context.childCount; i++) {
      final angle = (2 * 3.14159 * i) / context.childCount;
      final x = centerX + radius * cos(angle) - context.getChildSize(i)!.width / 2;
      final y = centerY + radius * sin(angle) - context.getChildSize(i)!.height / 2;
      
      context.paintChild(i, transform: Matrix4.translationValues(x, y, 0));
    }
  }
  
  @override
  bool shouldRepaint(covariant FlowDelegate oldDelegate) => false;
}

Flow(
  delegate: CircleFlowDelegate(),
  children: List.generate(6, (index) => 
    Container(
      width: 50,
      height: 50,
      color: Colors.primaries[index % Colors.primaries.length],
      child: Center(child: Text('${index + 1}')),
    ),
  ),
)