description bug_report

了解约束

Hero image from the article

当学习 Flutter 的人问你为什么某个具有 width: 100 的小组件宽度不是 100 像素时，默认答案是让他们将该小组件放在 Center 内，对吧？

不要这样做。

如果你这样做，他们会一遍又一遍地回来，询问为什么某个 FittedBox 不起作用，为什么 Column 会溢出，或者 IntrinsicWidth 应该做什么。

相反，首先告诉他们 Flutter 布局与 HTML 布局有很大不同（这可能是他们的出发点），然后让他们记住以下规则

约束向下。尺寸向上。父级设置位置。

如果不了解此规则，就无法真正理解 Flutter 布局，因此 Flutter 开发人员应尽早学习它。

更详细地解释

小组件从其父级获取自己的约束。约束只是一组 4 个双精度浮点数：最小和最大宽度，以及最小和最大高度。
然后，小组件遍历自己的子级列表。小组件逐一告诉其子级它们的约束（每个子级可能不同），然后询问每个子级想要的大小。
然后，小组件逐一对其子级进行定位（在 x 轴上水平定位，在 y 轴上垂直定位）。
最后，小组件告诉其父级自己的大小（当然是在原始约束内）。

例如，如果复合小组件包含带有内边距的列，并希望按如下方式布局其两个子级

Visual layout

协商过程如下

小组件：“嗨，父级，我的约束是什么？”

父级：“你的宽度必须在 0 到 300 像素之间，高度必须在 0 到 85 像素之间。”

小组件：“嗯，由于我想要 5 像素的内边距，因此我的子级最多可以有 290 像素的宽度和 75 像素的高度。”

小组件：“嗨，第一个子级，你的宽度必须在 0 到 290 像素之间，高度必须在 0 到 75 像素之间。”

第一个子级：“好的，那么我希望我的宽度为 290 像素，高度为 20 像素。”

小部件：“嗯，由于我想把我的第二个子项放在第一个子项下方，这只会为我的第二个子项留下 55 像素的高度。”

小部件：“嘿，第二个子项，你的宽度必须在 0 到 290 之间，高度必须在 0 到 55 之间。”

第二个子项：“好的，我希望我的宽度为 140 像素，高度为 30 像素。”

小部件：“很好。我的第一个子项的位置为 x: 5 和 y: 5，我的第二个子项的位置为 x: 80 和 y: 25。”

小部件：“嘿，父项，我已经决定我的大小将为 300 像素宽和 60 像素高。”

限制

Flutter 的布局引擎被设计为一个单次处理过程。这意味着 Flutter 可以非常高效地布局其小部件，但也导致了一些限制

小部件只能在其父项给定的约束范围内决定其自身的大小。这意味着小部件通常不能拥有它想要的任何大小。
小部件不能知道并且不能决定它在屏幕中的位置，因为是该小部件的父项决定了该小部件的位置。
由于父项的大小和位置反过来也取决于其自身的父项，因此不可能在不考虑整个树的情况下精确定义任何小部件的大小和位置。
如果子项希望与父项不同的尺寸，并且父项没有足够的信息来对其进行对齐，那么子项的尺寸可能会被忽略。在定义对齐时要具体。

在 Flutter 中，小部件由其底层 RenderBox 对象呈现。Flutter 中的许多盒子，尤其是那些只接受单个子项的盒子，会将其约束传递给它们的子项。

通常，根据盒子处理其约束的方式，有三种类型的盒子

那些尝试尽可能大。例如，Center 和 ListView 使用的盒子。
那些尝试与子元素保持相同大小的元素。例如，Transform 和 Opacity 使用的框。
那些尝试保持特定大小的元素。例如，Image 和 Text 使用的框。

某些小部件（例如 Container）根据其构造函数参数而从一种类型变为另一种类型。Container 构造函数默认为尝试尽可能大，但是如果你给它一个 width，例如，它会尝试满足该条件并保持该特定大小。

其他小部件（例如 Row 和 Column（flex 框））根据给定的约束而变化，如 Flex 部分所述。

示例

对于交互式体验，请使用以下 DartPad。使用带数字的水平滚动条在 29 个不同的示例之间切换。

import 'package:flutter/material.dart';

void main() => runApp(const HomePage());

const red = Colors.red;
const green = Colors.green;
const blue = Colors.blue;
const big = TextStyle(fontSize: 30);

//////////////////////////////////////////////////

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return const FlutterLayoutArticle([
      Example1(),
      Example2(),
      Example3(),
      Example4(),
      Example5(),
      Example6(),
      Example7(),
      Example8(),
      Example9(),
      Example10(),
      Example11(),
      Example12(),
      Example13(),
      Example14(),
      Example15(),
      Example16(),
      Example17(),
      Example18(),
      Example19(),
      Example20(),
      Example21(),
      Example22(),
      Example23(),
      Example24(),
      Example25(),
      Example26(),
      Example27(),
      Example28(),
      Example29(),
    ]);
  }
}

//////////////////////////////////////////////////

abstract class Example extends StatelessWidget {
  const Example({super.key});

  String get code;

  String get explanation;
}

//////////////////////////////////////////////////

class FlutterLayoutArticle extends StatefulWidget {
  const FlutterLayoutArticle(
    this.examples, {
    super.key,
  });

  final List<Example> examples;

  @override
  State<FlutterLayoutArticle> createState() => _FlutterLayoutArticleState();
}

//////////////////////////////////////////////////

class _FlutterLayoutArticleState extends State<FlutterLayoutArticle> {
  late int count;
  late Widget example;
  late String code;
  late String explanation;

  @override
  void initState() {
    count = 1;
    code = const Example1().code;
    explanation = const Example1().explanation;

    super.initState();
  }

  @override
  void didUpdateWidget(FlutterLayoutArticle oldWidget) {
    super.didUpdateWidget(oldWidget);
    var example = widget.examples[count - 1];
    code = example.code;
    explanation = example.explanation;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Layout Article',
      home: SafeArea(
        child: Material(
          color: Colors.black,
          child: FittedBox(
            child: Container(
              width: 400,
              height: 670,
              color: const Color(0xFFCCCCCC),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Expanded(
                      child: ConstrainedBox(
                          constraints: const BoxConstraints.tightFor(
                              width: double.infinity, height: double.infinity),
                          child: widget.examples[count - 1])),
                  Container(
                    height: 50,
                    width: double.infinity,
                    color: Colors.black,
                    child: SingleChildScrollView(
                      scrollDirection: Axis.horizontal,
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          for (int i = 0; i < widget.examples.length; i++)
                            Container(
                              width: 58,
                              padding: const EdgeInsets.only(left: 4, right: 4),
                              child: button(i + 1),
                            ),
                        ],
                      ),
                    ),
                  ),
                  Container(
                    height: 273,
                    color: Colors.grey[50],
                    child: Scrollbar(
                      child: SingleChildScrollView(
                        key: ValueKey(count),
                        child: Padding(
                          padding: const EdgeInsets.all(10),
                          child: Column(
                            children: [
                              Center(child: Text(code)),
                              const SizedBox(height: 15),
                              Text(
                                explanation,
                                style: TextStyle(
                                    color: Colors.blue[900],
                                    fontStyle: FontStyle.italic),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

  Widget button(int exampleNumber) {
    return Button(
      key: ValueKey('button$exampleNumber'),
      isSelected: count == exampleNumber,
      exampleNumber: exampleNumber,
      onPressed: () {
        showExample(
          exampleNumber,
          widget.examples[exampleNumber - 1].code,
          widget.examples[exampleNumber - 1].explanation,
        );
      },
    );
  }

  void showExample(int exampleNumber, String code, String explanation) {
    setState(() {
      count = exampleNumber;
      this.code = code;
      this.explanation = explanation;
    });
  }
}

//////////////////////////////////////////////////

class Button extends StatelessWidget {
  final bool isSelected;
  final int exampleNumber;
  final VoidCallback onPressed;

  const Button({
    super.key,
    required this.isSelected,
    required this.exampleNumber,
    required this.onPressed,
  });

  @override
  Widget build(BuildContext context) {
    return TextButton(
      style: TextButton.styleFrom(
        foregroundColor: Colors.white,
        backgroundColor: isSelected ? Colors.grey : Colors.grey[800],
      ),
      child: Text(exampleNumber.toString()),
      onPressed: () {
        Scrollable.ensureVisible(
          context,
          duration: const Duration(milliseconds: 350),
          curve: Curves.easeOut,
          alignment: 0.5,
        );
        onPressed();
      },
    );
  }
}
//////////////////////////////////////////////////

class Example1 extends Example {
  const Example1({super.key});

  @override
  final code = 'Container(color: red)';

  @override
  final explanation = 'The screen is the parent of the Container, '
      'and it forces the Container to be exactly the same size as the screen.'
      '\n\n'
      'So the Container fills the screen and paints it red.';

  @override
  Widget build(BuildContext context) {
    return Container(color: red);
  }
}

//////////////////////////////////////////////////

class Example2 extends Example {
  const Example2({super.key});

  @override
  final code = 'Container(width: 100, height: 100, color: red)';
  @override
  final String explanation =
      'The red Container wants to be 100x100, but it can\'t, '
      'because the screen forces it to be exactly the same size as the screen.'
      '\n\n'
      'So the Container fills the screen.';

  @override
  Widget build(BuildContext context) {
    return Container(width: 100, height: 100, color: red);
  }
}

//////////////////////////////////////////////////

class Example3 extends Example {
  const Example3({super.key});

  @override
  final code = 'Center(\n'
      '   child: Container(width: 100, height: 100, color: red))';
  @override
  final String explanation =
      'The screen forces the Center to be exactly the same size as the screen, '
      'so the Center fills the screen.'
      '\n\n'
      'The Center tells the Container that it can be any size it wants, but not bigger than the screen.'
      'Now the Container can indeed be 100x100.';

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(width: 100, height: 100, color: red),
    );
  }
}

//////////////////////////////////////////////////

class Example4 extends Example {
  const Example4({super.key});

  @override
  final code = 'Align(\n'
      '   alignment: Alignment.bottomRight,\n'
      '   child: Container(width: 100, height: 100, color: red))';
  @override
  final String explanation =
      'This is different from the previous example in that it uses Align instead of Center.'
      '\n\n'
      'Align also tells the Container that it can be any size it wants, but if there is empty space it won\'t center the Container. '
      'Instead, it aligns the Container to the bottom-right of the available space.';

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.bottomRight,
      child: Container(width: 100, height: 100, color: red),
    );
  }
}

//////////////////////////////////////////////////

class Example5 extends Example {
  const Example5({super.key});

  @override
  final code = 'Center(\n'
      '   child: Container(\n'
      '              color: red,\n'
      '              width: double.infinity,\n'
      '              height: double.infinity))';
  @override
  final String explanation =
      'The screen forces the Center to be exactly the same size as the screen, '
      'so the Center fills the screen.'
      '\n\n'
      'The Center tells the Container that it can be any size it wants, but not bigger than the screen.'
      'The Container wants to be of infinite size, but since it can\'t be bigger than the screen, it just fills the screen.';

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
          width: double.infinity, height: double.infinity, color: red),
    );
  }
}

//////////////////////////////////////////////////

class Example6 extends Example {
  const Example6({super.key});

  @override
  final code = 'Center(child: Container(color: red))';
  @override
  final String explanation =
      'The screen forces the Center to be exactly the same size as the screen, '
      'so the Center fills the screen.'
      '\n\n'
      'The Center tells the Container that it can be any size it wants, but not bigger than the screen.'
      '\n\n'
      'Since the Container has no child and no fixed size, it decides it wants to be as big as possible, so it fills the whole screen.'
      '\n\n'
      'But why does the Container decide that? '
      'Simply because that\'s a design decision by those who created the Container widget. '
      'It could have been created differently, and you have to read the Container documentation to understand how it behaves, depending on the circumstances. ';

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(color: red),
    );
  }
}

//////////////////////////////////////////////////

class Example7 extends Example {
  const Example7({super.key});

  @override
  final code = 'Center(\n'
      '   child: Container(color: red\n'
      '      child: Container(color: green, width: 30, height: 30)))';
  @override
  final String explanation =
      'The screen forces the Center to be exactly the same size as the screen, '
      'so the Center fills the screen.'
      '\n\n'
      'The Center tells the red Container that it can be any size it wants, but not bigger than the screen.'
      'Since the red Container has no size but has a child, it decides it wants to be the same size as its child.'
      '\n\n'
      'The red Container tells its child that it can be any size it wants, but not bigger than the screen.'
      '\n\n'
      'The child is a green Container that wants to be 30x30.'
      '\n\n'
      'Since the red `Container` has no size but has a child, it decides it wants to be the same size as its child. '
      'The red color isn\'t visible, since the green Container entirely covers all of the red Container.';

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: red,
        child: Container(color: green, width: 30, height: 30),
      ),
    );
  }
}

//////////////////////////////////////////////////

class Example8 extends Example {
  const Example8({super.key});

  @override
  final code = 'Center(\n'
      '   child: Container(color: red\n'
      '      padding: const EdgeInsets.all(20),\n'
      '      child: Container(color: green, width: 30, height: 30)))';
  @override
  final String explanation =
      'The red Container sizes itself to its children size, but it takes its own padding into consideration. '
      'So it is also 30x30 plus padding. '
      'The red color is visible because of the padding, and the green Container has the same size as in the previous example.';

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        padding: const EdgeInsets.all(20),
        color: red,
        child: Container(color: green, width: 30, height: 30),
      ),
    );
  }
}

//////////////////////////////////////////////////

class Example9 extends Example {
  const Example9({super.key});

  @override
  final code = 'ConstrainedBox(\n'
      '   constraints: BoxConstraints(\n'
      '              minWidth: 70, minHeight: 70,\n'
      '              maxWidth: 150, maxHeight: 150),\n'
      '      child: Container(color: red, width: 10, height: 10)))';
  @override
  final String explanation =
      'You might guess that the Container has to be between 70 and 150 pixels, but you would be wrong. '
      'The ConstrainedBox only imposes ADDITIONAL constraints from those it receives from its parent.'
      '\n\n'
      'Here, the screen forces the ConstrainedBox to be exactly the same size as the screen, '
      'so it tells its child Container to also assume the size of the screen, '
      'thus ignoring its \'constraints\' parameter.';

  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      constraints: const BoxConstraints(
        minWidth: 70,
        minHeight: 70,
        maxWidth: 150,
        maxHeight: 150,
      ),
      child: Container(color: red, width: 10, height: 10),
    );
  }
}

//////////////////////////////////////////////////

class Example10 extends Example {
  const Example10({super.key});

  @override
  final code = 'Center(\n'
      '   child: ConstrainedBox(\n'
      '      constraints: BoxConstraints(\n'
      '                 minWidth: 70, minHeight: 70,\n'
      '                 maxWidth: 150, maxHeight: 150),\n'
      '        child: Container(color: red, width: 10, height: 10))))';
  @override
  final String explanation =
      'Now, Center allows ConstrainedBox to be any size up to the screen size.'
      '\n\n'
      'The ConstrainedBox imposes ADDITIONAL constraints from its \'constraints\' parameter onto its child.'
      '\n\n'
      'The Container must be between 70 and 150 pixels. It wants to have 10 pixels, so it will end up having 70 (the MINIMUM).';

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ConstrainedBox(
        constraints: const BoxConstraints(
          minWidth: 70,
          minHeight: 70,
          maxWidth: 150,
          maxHeight: 150,
        ),
        child: Container(color: red, width: 10, height: 10),
      ),
    );
  }
}

//////////////////////////////////////////////////

class Example11 extends Example {
  const Example11({super.key});

  @override
  final code = 'Center(\n'
      '   child: ConstrainedBox(\n'
      '      constraints: BoxConstraints(\n'
      '                 minWidth: 70, minHeight: 70,\n'
      '                 maxWidth: 150, maxHeight: 150),\n'
      '        child: Container(color: red, width: 1000, height: 1000))))';
  @override
  final String explanation =
      'Center allows ConstrainedBox to be any size up to the screen size.'
      'The ConstrainedBox imposes ADDITIONAL constraints from its \'constraints\' parameter onto its child'
      '\n\n'
      'The Container must be between 70 and 150 pixels. It wants to have 1000 pixels, so it ends up having 150 (the MAXIMUM).';

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ConstrainedBox(
        constraints: const BoxConstraints(
          minWidth: 70,
          minHeight: 70,
          maxWidth: 150,
          maxHeight: 150,
        ),
        child: Container(color: red, width: 1000, height: 1000),
      ),
    );
  }
}

//////////////////////////////////////////////////

class Example12 extends Example {
  const Example12({super.key});

  @override
  final code = 'Center(\n'
      '   child: ConstrainedBox(\n'
      '      constraints: BoxConstraints(\n'
      '                 minWidth: 70, minHeight: 70,\n'
      '                 maxWidth: 150, maxHeight: 150),\n'
      '        child: Container(color: red, width: 100, height: 100))))';
  @override
  final String explanation =
      'Center allows ConstrainedBox to be any size up to the screen size.'
      'ConstrainedBox imposes ADDITIONAL constraints from its \'constraints\' parameter onto its child.'
      '\n\n'
      'The Container must be between 70 and 150 pixels. It wants to have 100 pixels, and that\'s the size it has, since that\'s between 70 and 150.';

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ConstrainedBox(
        constraints: const BoxConstraints(
          minWidth: 70,
          minHeight: 70,
          maxWidth: 150,
          maxHeight: 150,
        ),
        child: Container(color: red, width: 100, height: 100),
      ),
    );
  }
}

//////////////////////////////////////////////////

class Example13 extends Example {
  const Example13({super.key});

  @override
  final code = 'UnconstrainedBox(\n'
      '   child: Container(color: red, width: 20, height: 50));';
  @override
  final String explanation =
      'The screen forces the UnconstrainedBox to be exactly the same size as the screen.'
      'However, the UnconstrainedBox lets its child Container be any size it wants.';

  @override
  Widget build(BuildContext context) {
    return UnconstrainedBox(
      child: Container(color: red, width: 20, height: 50),
    );
  }
}

//////////////////////////////////////////////////

class Example14 extends Example {
  const Example14({super.key});

  @override
  final code = 'UnconstrainedBox(\n'
      '   child: Container(color: red, width: 4000, height: 50));';
  @override
  final String explanation =
      'The screen forces the UnconstrainedBox to be exactly the same size as the screen, '
      'and UnconstrainedBox lets its child Container be any size it wants.'
      '\n\n'
      'Unfortunately, in this case the Container has 4000 pixels of width and is too big to fit in the UnconstrainedBox, '
      'so the UnconstrainedBox displays the much dreaded "overflow warning".';

  @override
  Widget build(BuildContext context) {
    return UnconstrainedBox(
      child: Container(color: red, width: 4000, height: 50),
    );
  }
}

//////////////////////////////////////////////////

class Example15 extends Example {
  const Example15({super.key});

  @override
  final code = 'OverflowBox(\n'
      '   minWidth: 0,'
      '   minHeight: 0,'
      '   maxWidth: double.infinity,'
      '   maxHeight: double.infinity,'
      '   child: Container(color: red, width: 4000, height: 50));';
  @override
  final String explanation =
      'The screen forces the OverflowBox to be exactly the same size as the screen, '
      'and OverflowBox lets its child Container be any size it wants.'
      '\n\n'
      'OverflowBox is similar to UnconstrainedBox, and the difference is that it won\'t display any warnings if the child doesn\'t fit the space.'
      '\n\n'
      'In this case the Container is 4000 pixels wide, and is too big to fit in the OverflowBox, '
      'but the OverflowBox simply shows as much as it can, with no warnings given.';

  @override
  Widget build(BuildContext context) {
    return OverflowBox(
      minWidth: 0,
      minHeight: 0,
      maxWidth: double.infinity,
      maxHeight: double.infinity,
      child: Container(color: red, width: 4000, height: 50),
    );
  }
}

//////////////////////////////////////////////////

class Example16 extends Example {
  const Example16({super.key});

  @override
  final code = 'UnconstrainedBox(\n'
      '   child: Container(color: Colors.red, width: double.infinity, height: 100));';
  @override
  final String explanation =
      'This won\'t render anything, and you\'ll see an error in the console.'
      '\n\n'
      'The UnconstrainedBox lets its child be any size it wants, '
      'however its child is a Container with infinite size.'
      '\n\n'
      'Flutter can\'t render infinite sizes, so it throws an error with the following message: '
      '"BoxConstraints forces an infinite width."';

  @override
  Widget build(BuildContext context) {
    return UnconstrainedBox(
      child: Container(color: Colors.red, width: double.infinity, height: 100),
    );
  }
}

//////////////////////////////////////////////////

class Example17 extends Example {
  const Example17({super.key});

  @override
  final code = 'UnconstrainedBox(\n'
      '   child: LimitedBox(maxWidth: 100,\n'
      '      child: Container(color: Colors.red,\n'
      '                       width: double.infinity, height: 100));';
  @override
  final String explanation = 'Here you won\'t get an error anymore, '
      'because when the LimitedBox is given an infinite size by the UnconstrainedBox, '
      'it passes a maximum width of 100 down to its child.'
      '\n\n'
      'If you swap the UnconstrainedBox for a Center widget, '
      'the LimitedBox won\'t apply its limit anymore (since its limit is only applied when it gets infinite constraints), '
      'and the width of the Container is allowed to grow past 100.'
      '\n\n'
      'This explains the difference between a LimitedBox and a ConstrainedBox.';

  @override
  Widget build(BuildContext context) {
    return UnconstrainedBox(
      child: LimitedBox(
        maxWidth: 100,
        child: Container(
          color: Colors.red,
          width: double.infinity,
          height: 100,
        ),
      ),
    );
  }
}

//////////////////////////////////////////////////

class Example18 extends Example {
  const Example18({super.key});

  @override
  final code = 'FittedBox(\n'
      '   child: Text(\'Some Example Text.\'));';
  @override
  final String explanation =
      'The screen forces the FittedBox to be exactly the same size as the screen.'
      'The Text has some natural width (also called its intrinsic width) that depends on the amount of text, its font size, and so on.'
      '\n\n'
      'The FittedBox lets the Text be any size it wants, '
      'but after the Text tells its size to the FittedBox, '
      'the FittedBox scales the Text until it fills all of the available width.';

  @override
  Widget build(BuildContext context) {
    return const FittedBox(
      child: Text('Some Example Text.'),
    );
  }
}

//////////////////////////////////////////////////

class Example19 extends Example {
  const Example19({super.key});

  @override
  final code = 'Center(\n'
      '   child: FittedBox(\n'
      '      child: Text(\'Some Example Text.\')));';
  @override
  final String explanation =
      'But what happens if you put the FittedBox inside of a Center widget? '
      'The Center lets the FittedBox be any size it wants, up to the screen size.'
      '\n\n'
      'The FittedBox then sizes itself to the Text, and lets the Text be any size it wants.'
      '\n\n'
      'Since both FittedBox and the Text have the same size, no scaling happens.';

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: FittedBox(
        child: Text('Some Example Text.'),
      ),
    );
  }
}

////////////////////////////////////////////////////

class Example20 extends Example {
  const Example20({super.key});

  @override
  final code = 'Center(\n'
      '   child: FittedBox(\n'
      '      child: Text(\'…\')));';
  @override
  final String explanation =
      'However, what happens if FittedBox is inside of a Center widget, but the Text is too large to fit the screen?'
      '\n\n'
      'FittedBox tries to size itself to the Text, but it can\'t be bigger than the screen. '
      'It then assumes the screen size, and resizes Text so that it fits the screen, too.';

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: FittedBox(
        child: Text(
            'This is some very very very large text that is too big to fit a regular screen in a single line.'),
      ),
    );
  }
}

//////////////////////////////////////////////////

class Example21 extends Example {
  const Example21({super.key});

  @override
  final code = 'Center(\n'
      '   child: Text(\'…\'));';
  @override
  final String explanation = 'If, however, you remove the FittedBox, '
      'the Text gets its maximum width from the screen, '
      'and breaks the line so that it fits the screen.';

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text(
          'This is some very very very large text that is too big to fit a regular screen in a single line.'),
    );
  }
}

//////////////////////////////////////////////////

class Example22 extends Example {
  const Example22({super.key});

  @override
  final code = 'FittedBox(\n'
      '   child: Container(\n'
      '      height: 20, width: double.infinity));';
  @override
  final String explanation =
      'FittedBox can only scale a widget that is BOUNDED (has non-infinite width and height).'
      'Otherwise, it won\'t render anything, and you\'ll see an error in the console.';

  @override
  Widget build(BuildContext context) {
    return FittedBox(
      child: Container(
        height: 20,
        width: double.infinity,
        color: Colors.red,
      ),
    );
  }
}

//////////////////////////////////////////////////

class Example23 extends Example {
  const Example23({super.key});

  @override
  final code = 'Row(children:[\n'
      '   Container(color: red, child: Text(\'Hello!\'))\n'
      '   Container(color: green, child: Text(\'Goodbye!\'))]';
  @override
  final String explanation =
      'The screen forces the Row to be exactly the same size as the screen.'
      '\n\n'
      'Just like an UnconstrainedBox, the Row won\'t impose any constraints onto its children, '
      'and instead lets them be any size they want.'
      '\n\n'
      'The Row then puts them side-by-side, and any extra space remains empty.';

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Container(color: red, child: const Text('Hello!', style: big)),
        Container(color: green, child: const Text('Goodbye!', style: big)),
      ],
    );
  }
}

//////////////////////////////////////////////////

class Example24 extends Example {
  const Example24({super.key});

  @override
  final code = 'Row(children:[\n'
      '   Container(color: red, child: Text(\'…\'))\n'
      '   Container(color: green, child: Text(\'Goodbye!\'))]';
  @override
  final String explanation =
      'Since the Row won\'t impose any constraints onto its children, '
      'it\'s quite possible that the children might be too big to fit the available width of the Row.'
      'In this case, just like an UnconstrainedBox, the Row displays the "overflow warning".';

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Container(
          color: red,
          child: const Text(
            'This is a very long text that '
            'won\'t fit the line.',
            style: big,
          ),
        ),
        Container(color: green, child: const Text('Goodbye!', style: big)),
      ],
    );
  }
}

//////////////////////////////////////////////////

class Example25 extends Example {
  const Example25({super.key});

  @override
  final code = 'Row(children:[\n'
      '   Expanded(\n'
      '       child: Container(color: red, child: Text(\'…\')))\n'
      '   Container(color: green, child: Text(\'Goodbye!\'))]';
  @override
  final String explanation =
      'When a Row\'s child is wrapped in an Expanded widget, the Row won\'t let this child define its own width anymore.'
      '\n\n'
      'Instead, it defines the Expanded width according to the other children, and only then the Expanded widget forces the original child to have the Expanded\'s width.'
      '\n\n'
      'In other words, once you use Expanded, the original child\'s width becomes irrelevant, and is ignored.';

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: Center(
            child: Container(
              color: red,
              child: const Text(
                'This is a very long text that won\'t fit the line.',
                style: big,
              ),
            ),
          ),
        ),
        Container(color: green, child: const Text('Goodbye!', style: big)),
      ],
    );
  }
}

//////////////////////////////////////////////////

class Example26 extends Example {
  const Example26({super.key});

  @override
  final code = 'Row(children:[\n'
      '   Expanded(\n'
      '       child: Container(color: red, child: Text(\'…\')))\n'
      '   Expanded(\n'
      '       child: Container(color: green, child: Text(\'Goodbye!\'))]';
  @override
  final String explanation =
      'If all of Row\'s children are wrapped in Expanded widgets, each Expanded has a size proportional to its flex parameter, '
      'and only then each Expanded widget forces its child to have the Expanded\'s width.'
      '\n\n'
      'In other words, Expanded ignores the preferred width of its children.';

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: Container(
            color: red,
            child: const Text(
              'This is a very long text that won\'t fit the line.',
              style: big,
            ),
          ),
        ),
        Expanded(
          child: Container(
            color: green,
            child: const Text(
              'Goodbye!',
              style: big,
            ),
          ),
        ),
      ],
    );
  }
}

//////////////////////////////////////////////////

class Example27 extends Example {
  const Example27({super.key});

  @override
  final code = 'Row(children:[\n'
      '   Flexible(\n'
      '       child: Container(color: red, child: Text(\'…\')))\n'
      '   Flexible(\n'
      '       child: Container(color: green, child: Text(\'Goodbye!\'))]';
  @override
  final String explanation =
      'The only difference if you use Flexible instead of Expanded, '
      'is that Flexible lets its child be SMALLER than the Flexible width, '
      'while Expanded forces its child to have the same width of the Expanded.'
      '\n\n'
      'But both Expanded and Flexible ignore their children\'s width when sizing themselves.'
      '\n\n'
      'This means that it\'s IMPOSSIBLE to expand Row children proportionally to their sizes. '
      'The Row either uses the exact child\'s width, or ignores it completely when you use Expanded or Flexible.';

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Flexible(
          child: Container(
            color: red,
            child: const Text(
              'This is a very long text that won\'t fit the line.',
              style: big,
            ),
          ),
        ),
        Flexible(
          child: Container(
            color: green,
            child: const Text(
              'Goodbye!',
              style: big,
            ),
          ),
        ),
      ],
    );
  }
}

//////////////////////////////////////////////////

class Example28 extends Example {
  const Example28({super.key});

  @override
  final code = 'Scaffold(\n'
      '   body: Container(color: blue,\n'
      '   child: Column(\n'
      '      children: [\n'
      '         Text(\'Hello!\'),\n'
      '         Text(\'Goodbye!\')])))';

  @override
  final String explanation =
      'The screen forces the Scaffold to be exactly the same size as the screen, '
      'so the Scaffold fills the screen.'
      '\n\n'
      'The Scaffold tells the Container that it can be any size it wants, but not bigger than the screen.'
      '\n\n'
      'When a widget tells its child that it can be smaller than a certain size, '
      'we say the widget supplies "loose" constraints to its child. More on that later.';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: blue,
        child: const Column(
          children: [
            Text('Hello!'),
            Text('Goodbye!'),
          ],
        ),
      ),
    );
  }
}

//////////////////////////////////////////////////

class Example29 extends Example {
  const Example29({super.key});

  @override
  final code = 'Scaffold(\n'
      '   body: Container(color: blue,\n'
      '   child: SizedBox.expand(\n'
      '      child: Column(\n'
      '         children: [\n'
      '            Text(\'Hello!\'),\n'
      '            Text(\'Goodbye!\')]))))';

  @override
  final String explanation =
      'If you want the Scaffold\'s child to be exactly the same size as the Scaffold itself, '
      'you can wrap its child with SizedBox.expand.'
      '\n\n'
      'When a widget tells its child that it must be of a certain size, '
      'we say the widget supplies "tight" constraints to its child. More on that later.';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox.expand(
        child: Container(
          color: blue,
          child: const Column(
            children: [
              Text('Hello!'),
              Text('Goodbye!'),
            ],
          ),
        ),
      ),
    );
  }
}

//////////////////////////////////////////////////

如果你愿意，可以从此 GitHub 存储库获取代码。

示例在以下部分中进行了解释。

示例 1

Example 1 layout

Container(color: red)

屏幕是 Container 的父元素，它强制 Container 与屏幕完全相同的大小。

因此，Container 填充屏幕并将其涂成红色。

示例 2

Example 2 layout

Container(width: 100, height: 100, color: red)

红色的 Container 希望为 100 × 100，但它不能，因为屏幕强制它与屏幕完全相同的大小。

因此，Container 填充屏幕。

示例 3

Example 3 layout

Center(
  child: Container(width: 100, height: 100, color: red),
)

屏幕强制 Center 与屏幕完全相同的大小，因此 Center 填充屏幕。

Center 告诉 Container 它可以是任何它想要的大小，但不能大于屏幕。现在 Container 确实可以是 100 × 100。

示例 4

Example 4 layout

Align(
  alignment: Alignment.bottomRight,
  child: Container(width: 100, height: 100, color: red),
)

这与前一个示例不同，因为它使用 Align 而不是 Center。

Align 还告诉 Container 它可以是任何它想要的尺寸，但如果存在空白，它不会将 Container 居中。相反，它将容器对齐到可用空间的右下角。

示例 5

Example 5 layout

Center(
  child: Container(
      width: double.infinity, height: double.infinity, color: red),
)

屏幕强制 Center 与屏幕完全相同的大小，因此 Center 填充屏幕。

Center 告诉 Container 它可以是任何它想要的尺寸，但不能大于屏幕。 Container 希望是无限大小，但由于它不能大于屏幕，所以它只能填充屏幕。

示例 6

Example 6 layout

Center(
  child: Container(color: red),
)

屏幕强制 Center 与屏幕完全相同的大小，因此 Center 填充屏幕。

Center 告诉 Container 它可以是任何它想要的尺寸，但不能大于屏幕。由于 Container 没有子元素且没有固定大小，因此它决定要尽可能大，所以它填充了整个屏幕。

但是，为什么 Container 会做出这样的决定？仅仅因为这是创建 Container 小部件的人员做出的设计决策。它本可以被创建成不同的样子，而你必须阅读 Container API 文档来了解它在不同情况下如何表现。

示例 7

Example 7 layout

Center(
  child: Container(
    color: red,
    child: Container(color: green, width: 30, height: 30),
  ),
)

屏幕强制 Center 与屏幕完全相同的大小，因此 Center 填充屏幕。

Center 告诉红色 Container 它可以是任何它想要的尺寸，但不能大于屏幕。由于红色 Container 没有大小但有子元素，因此它决定要与它的子元素相同大小。

红色 Container 告诉它的子元素它可以是任何它想要的尺寸，但不能大于屏幕。

子元素是一个绿色 Container，它希望是 30 × 30。鉴于红色 Container 根据其子元素的大小调整自身大小，它也是 30 × 30。红色不可见，因为绿色 Container 完全覆盖了红色 Container。

示例 8

Example 8 layout

Center(
  child: Container(
    padding: const EdgeInsets.all(20),
    color: red,
    child: Container(color: green, width: 30, height: 30),
  ),
)

红色 Container 根据其子元素的大小调整自身大小，但它考虑到了自己的内边距。因此，它也是 30 × 30 加上内边距。由于内边距，红色可见，而绿色 Container 的大小与上一个示例中相同。

示例 9

Example 9 layout

ConstrainedBox(
  constraints: const BoxConstraints(
    minWidth: 70,
    minHeight: 70,
    maxWidth: 150,
    maxHeight: 150,
  ),
  child: Container(color: red, width: 10, height: 10),
)

您可能会猜测 Container 必须在 70 到 150 像素之间，但您错了。ConstrainedBox 仅强加其从父级接收到的约束的附加约束。

在此，屏幕强制 ConstrainedBox 与屏幕大小完全相同，因此它告诉其子级 Container 也采用屏幕大小，从而忽略其 constraints 参数。

示例 10

Example 10 layout

Center(
  child: ConstrainedBox(
    constraints: const BoxConstraints(
      minWidth: 70,
      minHeight: 70,
      maxWidth: 150,
      maxHeight: 150,
    ),
    child: Container(color: red, width: 10, height: 10),
  ),
)

现在，Center 允许 ConstrainedBox 采用任何大小，直至屏幕大小。ConstrainedBox 强加其 constraints 参数的附加约束到其子级。

Container 必须在 70 到 150 像素之间。它想要有 10 像素，因此最终拥有 70（最小值）。

示例 11

Example 11 layout

Center(
  child: ConstrainedBox(
    constraints: const BoxConstraints(
      minWidth: 70,
      minHeight: 70,
      maxWidth: 150,
      maxHeight: 150,
    ),
    child: Container(color: red, width: 1000, height: 1000),
  ),
)

Center 允许 ConstrainedBox 采用任何大小，直至屏幕大小。ConstrainedBox 强加其 constraints 参数的附加约束到其子级。

Container 必须在 70 到 150 像素之间。它想要有 1000 像素，因此最终拥有 150（最大值）。

示例 12

Example 12 layout

Center(
  child: ConstrainedBox(
    constraints: const BoxConstraints(
      minWidth: 70,
      minHeight: 70,
      maxWidth: 150,
      maxHeight: 150,
    ),
    child: Container(color: red, width: 100, height: 100),
  ),
)

Center 允许 ConstrainedBox 采用任何大小，直至屏幕大小。ConstrainedBox 强加其 constraints 参数的附加约束到其子级。

Container 必须在 70 到 150 像素之间。它想要有 100 像素，并且这就是它拥有的尺寸，因为这在 70 到 150 之间。

示例 13

Example 13 layout

UnconstrainedBox(
  child: Container(color: red, width: 20, height: 50),
)

屏幕强制 UnconstrainedBox 与屏幕大小完全相同。但是，UnconstrainedBox 允许其子级 Container 采用它想要的任何大小。

示例 14

Example 14 layout

UnconstrainedBox(
  child: Container(color: red, width: 4000, height: 50),
)

屏幕强制 UnconstrainedBox 与屏幕大小完全相同，并且 UnconstrainedBox 允许其子级 Container 采用它想要的任何大小。

不幸的是，在这种情况下，Container 宽 4000 像素，太大而无法放入 UnconstrainedBox，因此 UnconstrainedBox 显示令人非常害怕的“溢出警告”。

示例 15

Example 15 layout

OverflowBox(
  minWidth: 0,
  minHeight: 0,
  maxWidth: double.infinity,
  maxHeight: double.infinity,
  child: Container(color: red, width: 4000, height: 50),
)

屏幕强制 OverflowBox 与屏幕大小完全一致，而 OverflowBox 允许其子级 Container 采用任意大小。

OverflowBox 类似于 UnconstrainedBox；不同之处在于，如果子级不适合该空间，它不会显示任何警告。

在此情况下，Container 的宽度为 4000 像素，太大而无法放入 OverflowBox 中，但 OverflowBox 只是尽可能多地显示，而不给出任何警告。

示例 16

Example 16 layout

UnconstrainedBox(
  child: Container(color: Colors.red, width: double.infinity, height: 100),
)

这不会呈现任何内容，您将在控制台中看到一个错误。

UnconstrainedBox 允许其子级采用任意大小，但其子级是具有无限大小的 Container。

Flutter 无法呈现无限大小，因此会抛出一个错误，其消息如下：BoxConstraints 强制使用无限宽度。

示例 17

Example 17 layout

UnconstrainedBox(
  child: LimitedBox(
    maxWidth: 100,
    child: Container(
      color: Colors.red,
      width: double.infinity,
      height: 100,
    ),
  ),
)

在此，您将不再收到错误，因为当 UnconstrainedBox 向 LimitedBox 提供无限大小时；它会将最大宽度 100 传递给其子级。

如果您将 UnconstrainedBox 换成 Center 小部件，LimitedBox 将不再应用其限制（因为其限制仅在获得无限约束时才应用），并且 Container 的宽度允许超过 100。

这解释了 LimitedBox 和 ConstrainedBox 之间的区别。

示例 18

Example 18 layout

const FittedBox(
  child: Text('Some Example Text.'),
)

屏幕强制 FittedBox 与屏幕大小完全一致。Text 有一些自然宽度（也称为其固有宽度），它取决于文本量、字体大小等。

FittedBox 允许 Text 采用任何它想要的尺寸，但在 Text 向 FittedBox 说明其尺寸后，FittedBox 会缩放 Text，直到它填满所有可用宽度。

示例 19

Example 19 layout

const Center(
  child: FittedBox(
    child: Text('Some Example Text.'),
  ),
)

但是，如果你将 FittedBox 放入 Center 小部件中，会发生什么？Center 允许 FittedBox 采用任何它想要的尺寸，直至屏幕大小。

然后，FittedBox 会根据 Text 调整自身大小，并允许 Text 采用任何它想要的尺寸。由于 FittedBox 和 Text 都具有相同的大小，因此不会发生缩放。

示例 20

Example 20 layout

const Center(
  child: FittedBox(
    child: Text(
        'This is some very very very large text that is too big to fit a regular screen in a single line.'),
  ),
)

但是，如果 FittedBox 位于 Center 小部件中，但 Text 太大而无法适应屏幕，会发生什么？

FittedBox 尝试根据 Text 调整自身大小，但它不能大于屏幕。然后，它会采用屏幕大小，并调整 Text 的大小，使其也适合屏幕。

示例 21

Example 21 layout

const Center(
  child: Text(
      'This is some very very very large text that is too big to fit a regular screen in a single line.'),
)

但是，如果你删除 FittedBox，Text 会从屏幕获取其最大宽度，并换行以适应屏幕。

示例 22

Example 22 layout

FittedBox(
  child: Container(
    height: 20,
    width: double.infinity,
    color: Colors.red,
  ),
)

FittedBox 只能缩放受限的小部件（具有非无限的宽度和高度）。否则，它不会呈现任何内容，你将在控制台中看到一条错误信息。

示例 23

Example 23 layout

Row(
  children: [
    Container(color: red, child: const Text('Hello!', style: big)),
    Container(color: green, child: const Text('Goodbye!', style: big)),
  ],
)

屏幕强制 Row 与屏幕大小完全一致。

就像 UnconstrainedBox 一样，Row 不会对它的子项施加任何约束，而是允许它们采用任何它们想要的尺寸。然后，Row 会将它们并排放置，任何额外的空间都保持为空。

示例 24

Example 24 layout

Row(
  children: [
    Container(
      color: red,
      child: const Text(
        'This is a very long text that '
        'won\'t fit the line.',
        style: big,
      ),
    ),
    Container(color: green, child: const Text('Goodbye!', style: big)),
  ],
)

由于 Row 不会对子级施加任何约束，因此子级很可能太大而无法适应 Row 的可用宽度。在这种情况下，就像 UnconstrainedBox 一样，Row 会显示“溢出警告”。

示例 25

Example 25 layout

Row(
  children: [
    Expanded(
      child: Center(
        child: Container(
          color: red,
          child: const Text(
            'This is a very long text that won\'t fit the line.',
            style: big,
          ),
        ),
      ),
    ),
    Container(color: green, child: const Text('Goodbye!', style: big)),
  ],
)

当 Row 的子级被包装在 Expanded 窗口小部件中时，Row 将不再允许此子级定义其自身宽度。

相反，它根据其他子级定义 Expanded 宽度，然后 Expanded 窗口小部件才强制原始子级具有 Expanded 的宽度。

换句话说，一旦使用 Expanded，原始子级的宽度就变得无关紧要，并且会被忽略。

示例 26

Example 26 layout

Row(
  children: [
    Expanded(
      child: Container(
        color: red,
        child: const Text(
          'This is a very long text that won\'t fit the line.',
          style: big,
        ),
      ),
    ),
    Expanded(
      child: Container(
        color: green,
        child: const Text(
          'Goodbye!',
          style: big,
        ),
      ),
    ),
  ],
)

如果 Row 的所有子级都被包装在 Expanded 窗口小部件中，则每个 Expanded 的大小与其 flex 参数成正比，然后每个 Expanded 窗口小部件才强制其子级具有 Expanded 的宽度。

换句话说，Expanded 忽略其子级的首选宽度。

示例 27

Example 27 layout

Row(
  children: [
    Flexible(
      child: Container(
        color: red,
        child: const Text(
          'This is a very long text that won\'t fit the line.',
          style: big,
        ),
      ),
    ),
    Flexible(
      child: Container(
        color: green,
        child: const Text(
          'Goodbye!',
          style: big,
        ),
      ),
    ),
  ],
)

如果您使用 Flexible 而不是 Expanded，唯一的区别在于 Flexible 允许其子级具有与 Flexible 自身相同或更小的宽度，而 Expanded 强制其子级具有与 Expanded 完全相同的宽度。但是，Expanded 和 Flexible 在调整自身大小时都会忽略其子级的宽度。

示例 28

Example 28 layout

Scaffold(
  body: Container(
    color: blue,
    child: const Column(
      children: [
        Text('Hello!'),
        Text('Goodbye!'),
      ],
    ),
  ),
)

屏幕强制 Scaffold 的大小与屏幕完全相同，因此 Scaffold 填满了屏幕。 Scaffold 告诉 Container 它可以是任何大小，但不能大于屏幕。

示例 29

Example 29 layout

Scaffold(
  body: SizedBox.expand(
    child: Container(
      color: blue,
      child: const Column(
        children: [
          Text('Hello!'),
          Text('Goodbye!'),
        ],
      ),
    ),
  ),
)

如果您希望 Scaffold 的子项与 Scaffold 本身的大小完全相同，则可以使用 SizedBox.expand 包装其子项。

严格约束与松散约束

经常会听到一些约束是“严格的”或“松散的”，那么这意味着什么？

严格约束

严格约束提供一个可能性，即确切的大小。换句话说，严格约束的最大宽度等于其最小宽度；最大高度等于其最小高度。

一个示例是 App 小部件，它包含在 RenderView 类中：应用程序的 build 函数返回的子项使用的框被赋予一个约束，强制它完全填充应用程序的内容区域（通常为整个屏幕）。

另一个示例：如果您在应用程序渲染树的根部将一堆框嵌套在彼此内部，则它们都将完全适合彼此，受框的严格约束强制执行。

如果您转到 Flutter 的 box.dart 文件并搜索 BoxConstraints 构造函数，您会发现以下内容

BoxConstraints.tight(Size size)
   : minWidth = size.width,
     maxWidth = size.width,
     minHeight = size.height,
     maxHeight = size.height;

如果您重新访问示例 2，屏幕将强制红色 Container 的大小与屏幕完全相同。当然，屏幕通过向 Container 传递严格约束来实现这一点。

松散约束

松散约束的最小值为零，最大值为非零。

有些框会放松传入的约束，这意味着最大值保持不变，但最小值被移除，因此该小部件可以同时具有最小宽度和高度，都等于零。

最终，Center 的目的是将从其父级（屏幕）接收到的紧约束转换为其子级（Container）的松约束。

如果您重新访问示例 3，Center 允许红色的 Container 比屏幕小，但不能比屏幕大。

无界约束

在某些情况下，框的约束是无界的或无限的。这意味着最大宽度或最大高度被设置为 double.infinity。

当给定无界约束时，试图尽可能大的框将无法正常使用，并且在调试模式下会引发异常。

渲染框最终具有无界约束的最常见情况是在 flex 框（Row 或 Column）内，并且在可滚动区域内（例如 ListView 和其他 ScrollView 子类）。

例如，ListView 尝试扩展以适应其横向方向的可用空间（也许它是一个垂直滚动的块，并尝试与它的父级一样宽）。如果您将垂直滚动的 ListView 嵌套在水平滚动的 ListView 中，内部列表会尝试尽可能宽，这是无限宽，因为外部列表在该方向上是可滚动的。

下一部分描述了在 Flex 窗口小部件中使用无界约束时可能遇到的错误。

Flex

Flex 框（Row 和 Column）的行为方式取决于其约束在其主方向上是有界还是无界的。

在其主方向上具有有界约束的 Flex 框会尝试尽可能大。

在其主方向上具有无界约束的 Flex 框会尝试在其空间中容纳其子项。每个子项的 flex 值必须设置为零，这意味着当 Flex 框位于另一个 Flex 框或可滚动项内时，不能使用 Expanded；否则会引发异常。

交叉方向（Column 的宽度或 Row 的高度）绝不能 无界，否则它无法合理地对齐其子项。

学习特定窗口小部件的布局规则

了解通用布局规则是必要的，但这还不够。

应用通用规则时，每个窗口小部件都有很大的自由度，因此无法仅通过阅读窗口小部件的名称来了解其行为方式。

如果你尝试猜测，你可能会猜错。除非你阅读了窗口小部件的文档或研究了其源代码，否则你无法确切地知道窗口小部件的行为方式。

布局源代码通常很复杂，因此最好只阅读文档。但是，如果你决定研究布局源代码，你可以使用 IDE 的导航功能轻松地找到它。

这里有一个示例

在你的代码中找到一个 Column 并导航到其源代码。为此，在 Android Studio 或 IntelliJ 中使用 command+B（macOS）或 control+B（Windows/Linux）。你将被带到 basic.dart 文件。由于 Column 扩展了 Flex，因此导航到 Flex 源代码（也在 basic.dart 中）。
向下滚动，直到找到名为 createRenderObject() 的方法。如您所见，此方法返回 RenderFlex。这是 Column 的渲染对象。现在导航到 RenderFlex 的源代码，它将带您到 flex.dart 文件。
向下滚动，直到找到名为 performLayout() 的方法。这是为 Column 执行布局的方法。

A goodbye layout

Marcelo Glasberg 的原创文章

Marcelo 最初在 Medium 上以 Flutter: The Advanced Layout Rule Even Beginners Must Know 为标题发布了此内容。我们非常喜欢，并请他允许我们在 docs.flutter.dev 上发布，他欣然同意。谢谢，Marcelo！您可以在 GitHub 和 pub.dev 上找到 Marcelo。

此外，感谢 Simon Lightfoot 创建了文章顶部的标题图片。