Expanded 填满整行

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

Row 会为每个子项分配它所需的宽度。没有设置宽度的盒子只会和其中的文本一样宽，所以行中剩下的空间会空着。

把子项放在 Expanded 中，它就会占用其他子项剩下的所有空间：

Row(
  children: [
    Container(width: 100, color: Colors.red),
    Expanded(
      child: Container(color: Colors.blue),
    ),
  ],
)

在宽 390 像素的手机上，红色盒子保持 100 像素宽，蓝色盒子占用剩下的 290 像素。在更宽的屏幕上，蓝色盒子会变宽，红色盒子仍保持 100 像素宽。

Expanded 在 Column 中也能使用，它会填满剩余的高度。

挑战

简单

搜索栏太短了。让 Search 框填满这一行剩余的空间，使它在宽度为 80 像素的 Menu 框旁边达到 310 像素宽。

亲手试试

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('Shop')),
        body: Column(
          children: [
            Row(
              children: [
                Container(
                  width: 80,
                  height: 56,
                  color: Colors.indigo,
                  child: const Center(
                    child: Text('Menu', style: TextStyle(color: Colors.white)),
                  ),
                ),
                Container(
                  height: 56,
                  color: Colors.indigo.shade100,
                  child: const Center(child: Text('Search')),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}