Wrap 内的间距

本课属于 Coddy Flutter 学习旅程的“适配不同屏幕的布局”单元。第 9 课，共 30 课。

现在这些标签能放下了，但它们挨在一起。Wrap 有两个设置，用于控制子项之间的间距：

Wrap(
  spacing: 8,
  runSpacing: 12,
  children: [...],
)

spacing: 表示同一行中两个子项之间的间距。runSpacing: 表示两行之间的间距。Wrap 的每一行都称为一个 run，名称由此而来。

Wrap 决定一行能放下哪些内容时，也会计算间距，因此较大的 spacing 可能会让某个子项移到下一行。

挑战

简单

给标签留出间距：

同一行的标签之间间隔 8 像素
行与行之间间隔 12 像素

亲手试试

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    final tags = ['Dart', 'Flutter', 'Mobile', 'Design', 'Games', 'Web'];
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Interests')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Wrap(
            children: [
              for (final tag in tags)
                Container(
                  width: 110,
                  height: 40,
                  decoration: BoxDecoration(
                    color: Colors.purple.shade100,
                    borderRadius: BorderRadius.circular(20),
                  ),
                  child: Center(child: Text(tag)),
                ),
            ],
          ),
        ),
      ),
    );
  }
}