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

【问题标题】：Expanded widget not working as expected inside Columns and Rows扩展的小部件在列和行中未按预期工作
【发布时间】：2021-01-21 21:58:50
【问题描述】：

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

我想用黄色容器填充这个空间：

所以我制作了一个容器并用Expanded 小部件包裹它以填充整个空间，这就是我得到的：

代码：

@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')),
            ],
          )
        ],
      ),
    );
  }

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

我认为应该修复 Expanded 的问题。

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

已编辑。

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

我有这个 cmets 列表，我想要的是评论旁边的绿线填充到评论小部件末尾的高度。

所以我不能为评论设置固定大小，因为我可能有一个带有长字符串的评论，所以该行不会填充到评论文本的末尾会超出其限制。

【问题讨论】：

Expanded 取决于其父级.. 但在您的情况下，您的父级没有身高。尝试用 Container 包裹您的 Row 或 Column（取决于您是否使用它）并添加高度。
Expanded 已经将其子代扩展到其父代的极限边界。这不是错误，为Expanded 提供约束的唯一小部件是Scaffold，因此它扩展到Scaffold 提供的高度约束。如果您希望这个小部件按照您期望的方式调整大小，您需要提供一个高度约束，包括Columns。
@Reign 我已经知道了，在我的问题开始时，我说这只是我想要实现的一个例子。我问这个问题是因为我陷入了这样一种情况，即我希望扩展后占据其父级的全部高度，该父级已经在一行内，我无法设计我只是使用这个例子来简化我的问题。
@ChristopherMoore 如果你愿意，我可以提供一些我的实际问题的图片。
@AbdelazeemKuratem 您误解了文档。您的行将填充其父高度。然后行的子级，将根据父级高度展开。所以最后，你的扩展视图会扩展到整个屏幕高度

标签： flutter flutter-layout

【解决方案1】：

最后，我可以使用IntrinsicHeight 小部件来解决它。

我只是用它包裹我的Container，然后Expanded 小部件按预期工作。

最终用户界面：

代码如下：

 @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),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }

【讨论】：

这个答案对我来说很完美。

【解决方案2】：

您可以将您的行包装在具有固定高度的Container 中，这样您的Expanded 就不会填充父高度（在本例中为Scaffold）

编辑：

@override
Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: 300,
        width: MediaQuery.of(context).size.width,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
                width: 300,
                height: 300,
                color: Colors.blue,
                alignment: Alignment.center,
                child: Text('300x300')),
            Column(
              children: [
                Container(
                    width: 100,
                    height: 100,
                    color: Colors.green,
                    alignment: Alignment.center,
                    child: Text('100x100')),
                Expanded(
                  child: Container(width: 100, color: Colors.amber),
                )
              ],
            )
          ],
        ),
      )
    );
  }

【讨论】：

如果不知道父母的身高怎么办？
如果你想达到300 x width，你可以使用MediaQuery制作一个固定300高度和宽度的容器。容器的孩子应该填写上面的代码
请检查我的编辑并感谢您的回复。
显然Expanded没有问题。您只需要将子视图包装给父视图。您的意思是父母是您的Row，但事实并非如此。你的Row 会像父母一样，但实际上Row 本身会填充它的父高度，即Scaffold，所以你的Expanded 将填充Scaffold 高度
我发誓，我知道如果我把它放在一个固定宽度和高度的容器中，它会起作用，但我的情况不同，我不知道父级的高度

【解决方案3】：

尝试一次

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')),
                            ),
                          ],
                        )
                      ],
                    ),
                  )
                ]))

【讨论】：

【解决方案4】：

我已经使用了您的代码并对其进行了一些修改。 Expand 没有问题，但可能对您没有用处。

我编辑的代码：

 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'))
              ],
            )
          ],
        ),
      ),
    );
  }
}

我的输出

如果您看到代码，我没有在任何地方硬编码宽度或高度。我正在使用MediaQuery 获取屏幕大小和宽度。

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

这条线对于定义行高很重要。孩子会自动调整到指定的高度。

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

【讨论】：