Flutter 扩展的小部件在列和行中未按预期工作

注意。 这只是一个简化我想要实现的目标的例子

我想用一个黄色的容器填满这个空间：

因此，我制作了一个容器，并用

扩展的
小部件将其包装起来，以填充整个空间，这就是我得到的：


守则：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
  decoration:
      BoxDecoration(border: Border.all(width: 5, color: Colors.black)),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            width: 300,
            height: 300,
            color: Colors.blue,
            alignment: Alignment.center,
            child: Text('300x300')),
          Column(mainAxisSize: MainAxisSize.min, children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.green,
              alignment: Alignment.center,
              child: Text('100x100')),
            Expanded(
              child: Container(width: 100, color: Colors.amber),
            )
            ],
          )
        ],
      ),
    );
  }

我想要实现的是这样的目标：

此形状的代码：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
      decoration:
      BoxDecoration(border: Border.all(width: 5, color: Colors.black)),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            width: 300,
            height: 300,
            color: Colors.blue,
            alignment: Alignment.center,
            child: Text('300x300')),
          Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                width: 100,
                height: 100,
                color: Colors.green,
                alignment: Alignment.center,
                child: Text('100x100')),
              Container(
                width: 100,
                height: 200,
                color: Colors.amber,
                alignment: Alignment.center,
                child: Text('100x200')),
            ],
          )
        ],
      ),
    );
  }

如果我知道的高度和宽度，所以是的，我可以设计这个形状。
但是，如果我不知道蓝色容器的高度怎么办

我认为这是扩展的
的问题，应该解决

Expanded
小部件应将其子部件扩展到其父部件的限制边界，而不是扩展其父部件

已编辑。

我将向任何不了解我的问题的人解释我的实际问题：

我有这个注释列表，我想要的是注释旁边的绿线填充注释小部件末尾的高度

因此，我无法为注释设置固定大小，因为我可能有一个带有长字符串的注释，因此该行不会填充到注释文本的末尾，这将超出其限制。
您可以将行包装在一个具有固定高度的
容器中，这样您的
展开的
就不会填充父级高度（在这种情况下是
脚手架
）

编辑：

试一下

new Container(
            color: Colors.red,
            child: new Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  new Container(
                    height: 200,
                    child: new Row(
                      children: <Widget>[
                        Expanded(
                          flex: 1,
                          child: Container(
                              //width: 100,
                              //height: 300,
                              color: Colors.blue,
                              alignment: Alignment.center,
                              child: Text('300x300')),
                        ),
                        Column(
                          children: [
                            Expanded(
                              flex: 2,
                              child: Container(
                                  width: 100,
                                  // height: 100,
                                  color: Colors.green,
                                  alignment: Alignment.center,
                                  child: Text('100x100')),
                            ),
                            Expanded(
                              flex: 4,
                              child: Container(
                                  width: 100,
                                  //height: 200,
                                  color: Colors.amber,
                                  alignment: Alignment.center,
                                  child: Text('100x200')),
                            ),
                          ],
                        )
                      ],
                    ),
                  )
                ]))

新容器(
颜色：颜色，红色，
子：新列(
crossAxisAlignment:crossAxisAlignment.start，
mainAxisAlignment:mainAxisAlignment.start，
儿童：[
新容器(
身高：200，
孩子：新的一排(
儿童：[
扩大(
弹性：1，
子：容器(
//宽度：100，
//身高：300，
颜色：颜色，蓝色，
对齐：对齐.center，
子项：文本（'300x300'），
),
纵队(
儿童：[
扩大(
弹性：2，
子：容器(
宽度：100，
//身高：100，
颜色：颜色。绿色，
对齐：对齐.center，
子项：文本（'100x100'），
),
扩大(
弹性：4，
子：容器(
宽度：100，
//身高：200，
颜色：颜色。琥珀色，
对齐：对齐.center，
子项：文本（'100x200'），
),
],
)
],
),
)
]))
我使用了您的代码并对其进行了一些修改。扩展没有问题，但这可能对您没有用处

我编辑的代码：

 class CustomContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var height = MediaQuery.of(context).size.height;
    return Scaffold(
      body: Container(
        height: height,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          mainAxisSize: MainAxisSize.max,
          children: [
            Container(
                width: MediaQuery.of(context).size.width*0.5,
                height: height,
                color: Colors.blue,
                alignment: Alignment.center,
                child: Text('300x300')),
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.max,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                    width: MediaQuery.of(context).size.width*0.5,
                    height: height*0.5,
                    color: Colors.green,
                    alignment: Alignment.center,
                    child: Text('100x100')),
                Container(
                    width: MediaQuery.of(context).size.width*0.5,
                    height: height*0.5,
                    color: Colors.amber,
                    child: Text('Remaining'))
              ],
            )
          ],
        ),
      ),
    );
  }
}

我的输出

如果你看到代码，我没有硬编码的宽度或高度。我正在使用获取屏幕大小和宽度

var height = MediaQuery.of(context).size.height*0.5;

此行对于定义行的高度很重要。孩子们将自动调整到指定的高度

现在，您可以随意选择高度和宽度。这是我的另一个输出

最后，我可以通过使用
IntrinsicHeight
小部件来解决这个问题

我只需要用它包装我的
容器
，然后
扩展的
小部件就可以正常工作了

最终用户界面：

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IntrinsicHeight(
        child: Container(
          decoration:
              BoxDecoration(border: Border.all(width: 5, color: Colors.black)),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                  width: 300,
                  height: 300,
                  color: Colors.blue,
                  alignment: Alignment.center,
                  child: Text('300x300')),
              Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Container(
                      width: 100,
                      height: 100,
                      color: Colors.green,
                      alignment: Alignment.center,
                      child: Text('100x100')),
                  Expanded(
                    child: Container(width: 100, color: Colors.amber),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }


代码如下：

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IntrinsicHeight(
        child: Container(
          decoration:
              BoxDecoration(border: Border.all(width: 5, color: Colors.black)),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                  width: 300,
                  height: 300,
                  color: Colors.blue,
                  alignment: Alignment.center,
                  child: Text('300x300')),
              Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Container(
                      width: 100,
                      height: 100,
                      color: Colors.green,
                      alignment: Alignment.center,
                      child: Text('100x100')),
                  Expanded(
                    child: Container(width: 100, color: Colors.amber),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }

展开的
取决于其父项。。但在你的情况下，你的父母没有身高。尝试用容器包装您的
行
或
列
（取决于您使用过它）并添加高度。
展开的
已将其子项扩展到其父项的限制边界。这不是一个bug，唯一为
扩展的
提供约束的小部件是
脚手架
，因此它扩展为
脚手架
提供的高度约束。如果你想让这个小部件按照你期望的方式调整大小，你需要提供一个包含
列
s的高度约束。我已经知道了，在我问题的开始，我说这只是我想要实现的一个例子。我之所以问这个问题，是因为我陷入了这样一种境地：我希望扩展后的对象能够达到其父对象的全部高度，而父对象已经在一行中，我无法设计，我只是使用这个示例来简化我的问题。@Christophermore如果您愿意，我可以提供一些实际问题的图像。@AbdelazeemKuratem您误解了文档您的行将填充其父行的高度。然后，行的子级将根据父级的高度展开。因此，最终，您的扩展视图将扩展到整个屏幕高度。如果我不知道父级的高度，我该怎么办？如果您试图实现
300 x宽度
，您可以使用
MediaQuery
制作一个具有固定
300
高度和宽度的容器。容器的子容器应填写上述代码。请检查我的编辑并感谢您的回复。显然，扩展的
没有问题。您只需将子视图包装到父视图。您的意思是父对象是您的
行
，但它不是。您的
行
将像父行一样工作，但实际上
行
本身