理解约束

Hero image from the article

当学习 Flutter 的人问你为什么某些带有 width: 100 的 Widget 没有 100 像素宽时，默认答案是告诉他们将该 Widget 放入 Center 中，对吧？

不要这样做。

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

相反，首先告诉他们 Flutter 布局与 HTML 布局（这可能是他们的来源）非常不同，然后让他们记住以下规则

**约束向下传递。尺寸向上传递。父级设定位置。**

如果不了解此规则，就很难理解 Flutter 布局，因此 Flutter 开发人员应该尽早学习它。

更详细地解释

一个 Widget 从其 **父级** 获取自己的 **约束**。约束仅仅是一组 4 个双精度数：最小和最大宽度，以及最小和最大高度。
然后，该 Widget 遍历其自己的 **子级** 列表。一个接一个地，Widget 告诉其子级它们的 **约束** 是什么（每个子级可能不同），然后询问每个子级想要多大。
然后，Widget 将其 **子级** 定位（在 x 轴上水平定位，在 y 轴上垂直定位），一个接一个地。
最后，Widget 告诉其父级其自己的 **尺寸**（当然，在原始约束范围内）。

例如，如果一个组合 Widget 包含一个带有一些填充的列，并希望如下布局其两个子级

协商过程大致如下

**Widget**：“喂，父级，我的约束是什么？”

**父级**：“你必须从 0 到 300 像素宽，并且从 0 到 85 像素高。”

**Widget**：“嗯，既然我想有 5 像素的填充，那么我的子级最多可以有 290 像素宽和 75 像素高。”

**Widget**：“喂，第一个子级，你必须从 0 到 290 像素宽，并且从 0 到 75 像素高。”

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

**Widget**：“嗯，既然我想把我的第二个子级放在第一个子级下面，那么我的第二个子级只有 55 像素高。”

**Widget**：“喂，第二个子级，你必须从 0 到 290 宽，并且从 0 到 55 高。”

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

**Widget**：“很好。我的第一个子级的位置是 x: 5 和 y: 5，我的第二个子级的位置是 x: 80 和 y: 25。”

**Widget**：“喂，父级，我决定我的尺寸将是 300 像素宽，60 像素高。”

Flutter 的布局引擎设计为单次传递过程。这意味着 Flutter 高效地布局其 Widget，但也导致了一些局限性

一个 Widget 只能在其父级给定的约束范围内决定自己的尺寸。这意味着 Widget 通常 **不能拥有任何想要的尺寸**。
一个 Widget **不知道也不决定自己在屏幕上的位置**，因为是 Widget 的父级决定 Widget 的位置。
由于父级的尺寸和位置反过来也取决于其自身的父级，因此如果不考虑整个树，就不可能精确地定义任何 Widget 的尺寸和位置。
如果子级想要一个与其父级不同的尺寸，而父级没有足够的信息来对齐它，那么子级的尺寸可能会被忽略。**在定义对齐方式时要具体。**

在 Flutter 中，Widget 由其底层的 RenderBox 对象渲染。Flutter 中的许多盒子，特别是那些只接收单个子级的盒子，会将其约束传递给其子级。

一般来说，就如何处理其约束而言，有三种类型的盒子

那些试图尽可能大的盒子。例如，由 Center 和 ListView 使用的盒子。
那些试图与其子级大小相同的盒子。例如，由 Transform 和 Opacity 使用的盒子。
那些试图达到特定尺寸的盒子。例如，由 Image 和 Text 使用的盒子。

某些 Widget，例如 Container，根据其构造函数参数而类型不同。 Container 构造函数默认为尝试尽可能大，但如果你给它一个 width，例如，它会尝试遵守它并达到那个特定的尺寸。

其他，例如 Row 和 Column（弹性盒子）根据给定的约束而变化，如弹性布局部分所述。

要获得交互式体验，请使用以下 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 仓库获取代码。

以下各节将解释这些示例。

dart

Container(color: red)

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

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

dart

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

红色 Container 想要 100 × 100，但它做不到，因为屏幕强制它与屏幕大小完全相同。

因此，Container 填充屏幕。

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

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

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

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

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

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

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

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

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

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

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

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

但是为什么 Container 会这样决定呢？仅仅是因为创建 Container Widget 的人做出的设计决策。它本可以被创建得不同，并且您必须阅读 Container 的 API 文档以了解它在不同情况下如何表现。

dartCenter(
  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。

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

红色 Container 将其自身大小调整为其子级的大小，但它考虑了自己的填充。所以它也是 30 × 30 加上填充。由于填充，红色可见，并且绿色 Container 与前一个示例中的大小相同。

dartConstrainedBox(
  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 参数。

dartCenter(
  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（最小值）。

dartCenter(
  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（最大值）。

dartCenter(
  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 之间。

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

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

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

屏幕强制 UnconstrainedBox 与屏幕大小完全相同，UnconstrainedBox 允许其子级 Container 具有任何它想要的尺寸。

不幸的是，在这种情况下，Container 宽 4000 像素，并且太大而无法放入 UnconstrainedBox 中，因此 UnconstrainedBox 显示了令人不寒而栗的“溢出警告”。

dartOverflowBox(
  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 只显示它能显示的部分，没有任何警告。

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

这不会渲染任何内容，并且您将在控制台中看到错误。

UnconstrainedBox 允许其子元素具有任何它想要的大小，但是它的子元素是一个大小无限的 Container。

Flutter 无法渲染无限大小，因此它会抛出一个带有以下消息的错误：BoxConstraints forces an infinite width.

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

这里您将不再遇到错误，因为当 LimitedBox 由 UnconstrainedBox 给定无限大小时；它会将其子元素的最大宽度传递为 100。

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

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

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

屏幕强制 FittedBox 的大小与屏幕完全相同。Text 具有一定的自然宽度（也称为其内在宽度），这取决于文本量、字体大小等。

FittedBox 允许 Text 具有任何它想要的大小，但在 Text 将其大小告知 FittedBox 后，FittedBox 会缩放文本，直到它填满所有可用宽度。

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

但是，如果您将 FittedBox 放入 Center 小部件中会发生什么？Center 允许 FittedBox 具有任何它想要的大小，直到屏幕大小。

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

dartconst 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 的大小以使其也适合屏幕。

dartconst 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 将从屏幕获取其最大宽度，并换行以使其适合屏幕。

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

FittedBox 只能缩放有边界的部件（具有非无限的宽度和高度）。否则，它将不会渲染任何内容，并且您将在控制台中看到错误。

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

屏幕强制 Row 的大小与屏幕完全相同。

就像 UnconstrainedBox 一样，Row 不会对其子元素施加任何约束，而是允许它们具有任何它们想要的大小。然后，Row 将它们并排放置，任何额外的空间都保持为空。

dartRow(
  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 会显示“溢出警告”。

dartRow(
  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，原始子元素的宽度将变得无关紧要，并且会被忽略。

dartRow(
  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 忽略其子元素的首选宽度。

dartRow(
  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 允许其子元素具有与其自身相同或更小的宽度，而 Expanded 强制其子元素具有与 Expanded 完全相同的宽度。但 Expanded 和 Flexible 在调整自身大小时都会忽略其子元素的宽度。

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

屏幕强制 Scaffold 的大小与屏幕完全相同，因此 Scaffold 填充屏幕。Scaffold 告诉 Container 它可以具有任何它想要的大小，但不能大于屏幕。

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

如果您希望 Scaffold 的子元素的大小与其自身完全相同，您可以将其子元素包装在 SizedBox.expand 中。

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

紧密约束提供了一种可能性，即确切的大小。换句话说，紧密约束的最大宽度等于其最小宽度；并且其最大高度等于其最小高度。

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

另一个例子：如果您在应用程序渲染树的根部嵌套了一堆框，它们将完全彼此契合，这由框的紧密约束所强制。

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

dartBoxConstraints.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 框（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 进行布局的方法。

Marcelo Glasberg 原文

Marcelo 最初在 Medium 上将此内容发布为 Flutter：即使是初学者也必须知道的先进布局规则。我们非常喜欢它，并请求他允许我们在 docs.flutter.dev 上发布，他欣然同意了。感谢，Marcelo！您可以在 GitHub 和 pub.dev 上找到 Marcelo。

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

除非另有说明，否则本网站上的文档反映了 Flutter 的最新稳定版本。页面上次更新于 2024-07-06。查看源代码或报告问题.

理解约束

局限性

示例

示例 1

示例 2

示例 3

示例 4

示例 5

示例 6

示例 7

示例 8

示例 9

示例 10

示例 11

示例 12

示例 13

示例 14

示例 15

示例 16

示例 17

示例 18

示例 19

示例 20

示例 21

示例 22

示例 23

示例 24

示例 25

示例 26

示例 27

示例 28

示例 29

紧密约束与松散约束

紧密约束

松散约束

无界约束

Flex

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