溢出错误

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

手机屏幕很小。当 Row 的子项所需宽度超过屏幕宽度时，Flutter 会在溢出的一侧画上黄黑条纹，并在控制台中输出一条消息：

A RenderFlex overflowed by 60 pixels on the right.

把它分成三部分来读。RenderFlex 是 Row 或 Column。60 pixels 表示子项超出的宽度。On the right 表示一行太宽；on the bottom 表示一列太高。

这个数字可以直接通过算术计算得出。3 个宽 150 像素的盒子需要 450 像素，而手机屏幕宽 390 像素，所以有 60 像素溢出。把子项的总宽度缩小 60 像素，条纹就会消失。

本课程中的每项检查都在宽 390 像素的手机上运行，因此溢出会导致检查失败，并显示相同的消息。

挑战

简单

点击运行，找到右侧边缘的条纹。然后将每个方块的宽度设为 120 像素，这样三个方块就都能放进手机屏幕。

亲手试试

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('Trips')),
        body: Column(
          children: [
            Row(
              children: [
                Container(
                  width: 150,
                  height: 100,
                  color: Colors.orange,
                  child: const Center(child: Text('Beach')),
                ),
                Container(
                  width: 150,
                  height: 100,
                  color: Colors.green,
                  child: const Center(child: Text('Forest')),
                ),
                Container(
                  width: 150,
                  height: 100,
                  color: Colors.blueGrey,
                  child: const Center(child: Text('City')),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}