列中的行

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

Row 可以是 Column 的子项之一。这样，屏幕上就能显示包含多个内容的行：

Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    Text('Pancakes'),
    Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text('20 min'),
        SizedBox(width: 12),
        Text('Easy'),
      ],
    ),
  ],
)

mainAxisSize: MainAxisSize.min 会让行或列的大小刚好容纳其子项，而不是占满分配给它的所有空间。这里，它会让两者都保持在屏幕中央。

挑战

简单

把它做成一个简洁的个人资料标题：

让 Ada Lovelace 显示在第一行
在下方用 Row 将 London 和 1815 并排显示

亲手试试

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('Ada Lovelace', style: TextStyle(fontSize: 28)),
              Text('London'),
              Text('1815'),
            ],
          ),
        ),
      ),
    );
  }
}