LayoutBuilder 断点

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

在平板电脑上，邮件应用会把菜单显示在邮件旁边。在手机上没有足够的空间，所以菜单会移到上方。布局发生变化的宽度称为断点。

LayoutBuilder 会告诉你一个组件有多少空间，并让你针对不同尺寸构建不同的内容：

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth < 600) {
      return Column(children: [menu, content]); // 手机
    }
    return Row(children: [menu, content]); // 平板电脑
  },
)

builder 是一个函数，Flutter 会通过 constraints 将可用空间传给它。constraints.maxWidth 是结果允许的最大宽度。小于 600 像素时，返回 Column；否则返回 Row。在宽度为 390 像素的手机上，你会看到纵向排列；在宽度为 1000 像素的平板电脑上，你会看到横向排列。

MediaQuery 会读取整个屏幕的信息。LayoutBuilder 会读取单个组件的可用空间，所以即使该组件是较大页面中的一个面板，它也能正常工作。

挑战

中等

菜单和内容总是并排显示，在手机上会显得很拥挤。使用 LayoutBuilder，并将断点设为 600 像素：

窄于 600 像素：菜单显示在内容上方，放在 Column 中
600 像素及以上：像现在这样并排显示，放在 Row 中

亲手试试

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('Mail')),
        body: Row(
          children: [
            Expanded(
              child: Container(
                color: Colors.teal.shade100,
                child: const Center(child: Text('Menu')),
              ),
            ),
            Expanded(
              flex: 2,
              child: Container(
                color: Colors.white,
                child: const Center(child: Text('Content')),
              ),
            ),
          ],
        ),
      ),
    );
  }
}