展开的小部件在列和行内未按预期工作

Question

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

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

所以我做了一个容器并用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')),
            ],
          )
        ],
      ),
    );
  }

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

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

Expanded小部件应该将其子部件展开到其父部件的极限边界，而不是将其父部件也展开！！

已编辑。

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

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

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

Answer 1

您可以将您的行包装在具有固定高度的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),
                )
              ],
            )
          ],
        ),
      )
    );
  }

Answer 2

尝试一次

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

Answer 3

我已经使用了您的代码并对其进行了一些修改。 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;

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

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

Answer 4

最后，我可以通过使用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),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }