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

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

我编辑的代码：

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

展开的窗口小部件在列和行内无法正常工作

4 个答案: