组件树

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

小部件嵌套在其他小部件中。容纳另一个小部件的小部件会通过 child: 接收它，比如这个 Center：

Center(
  child: Text('Hello'),
)

Center 本身不会绘制任何内容。它会接收自己的子小部件，并将其放在可用空间的中央。没有它，文本就会出现在左上角。

小部件层层嵌套，就形成了一个小部件树。在你的应用中，这棵树依次是 MaterialApp、Scaffold，然后是你放在它的 body: 中的内容。每个小部件的子小部件都写在它的括号内，因此括号展示了这棵树。每行末尾的逗号让代码保持整洁。

挑战

简单

文本卡在左上角了。把它放在 Center 中，让它显示在屏幕中央：

将 body: Text('Right in the middle'), 替换为一个 Center，并将该 Text 作为它的 child:

亲手试试

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: Text('Right in the middle'),
      ),
    );
  }
}