用 flex 分配空间

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

当 Row 的两个子项都是 Expanded 时，它们会平分空间：在宽度为 390 像素的手机上，每个子项占 195 像素。

如果要让它们不均等地分配空间，可以给 Expanded 设置 flex:。它表示份额，而不是尺寸。Flutter 会把各个份额相加，再按份额比例分配空间：

Row(
  children: [
    Expanded(flex: 3, child: Container(color: Colors.red)),
    Expanded(flex: 1, child: Container(color: Colors.blue)),
  ],
)

份额总和为 4，因此红色部分占整行的四分之三，蓝色部分占四分之一。没有设置 flex: 的子项，份额为 1。

由于份额表示整体中的一部分，因此无论屏幕宽度是多少，布局都能保持比例。

挑战

简单

让 Chart 框的宽度是 Notes 框的两倍。在手机上，宽度分别为 260 和 130 像素。

亲手试试

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(
        appBar: AppBar(title: const Text('Dashboard')),
        body: Column(
          children: [
            Row(
              children: [
                Expanded(
                  child: Container(
                    height: 120,
                    color: Colors.teal,
                    child: const Center(
                      child: Text('Chart', style: TextStyle(color: Colors.white)),
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    height: 120,
                    color: Colors.amber,
                    child: const Center(child: Text('Notes')),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}