控件之间的间距

本课属于 Coddy Flutter 学习旅程的“你的第一个应用”单元。第 21 课，共 32 课。

Column 的子项会紧挨在一起。要在其中两个子项之间添加间距，请在列表中放入一个空的 SizedBox：

Column(
  children: [
    Text('Top'),
    SizedBox(height: 20),
    Text('Bottom'),
  ],
)

SizedBox 不会绘制任何内容，只会占用空间：这里占用 20 像素的高度。在 Row 中，则使用 SizedBox(width: 20)。

挑战

简单

在 Title 和 Subtitle 之间留出 24 像素的间距。

亲手试试

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text('Title', style: TextStyle(fontSize: 32)),
              Text('Subtitle'),
            ],
          ),
        ),
      ),
    );
  }
}