如何在颤振中创建具有延伸到动态大小单元格底部的元素的单元格

Question

我想创建一个单元格，作为这种基本格式：

|-----------------------------|
| column  |                   |
|  e1     | Expand (RichText) |
|  e2     |                   |
|  expand |                   |
|-----------------------------|

我有以下代码来执行此操作：

  Widget build(BuildContext context) {
    return new Container(
      decoration: new BoxDecoration(border: new Border.all(width: 2.0)),
      child: new Row(
        children: <Widget>[
          new Container(
            width: 80.0,
            child: new Column(
              children: <Widget>[
                new Container(color: Colors.red, height: 10.0),
                new Container(color: Colors.blue, height: 50.0,),
                // new Expanded(
                //   child: new Container(color: Colors.amber),
                // )
              ],
            ), 
          ),
          new Expanded(
            child: new Padding(
              padding: new EdgeInsets.all(20.0),
              child: new Text(widget.message)
            )
          )
        ],
      ),
    );
  }

但是我从 Flutter 中得到以下错误：RenderFlex 子项具有非零挠度，但传入的高度约束是无限的。

考虑到右侧和侧面富文本的大小，有没有办法让最后在最左侧的列中扩展

Answer 1

我想您希望列表元素具有尽可能小的高度，同时具有占用Column所有剩余空间的元素。

这种行为可以通过IntrinsicHeight小部件来实现

该小部件确保它的孩子将采用尽可能小的高度，而不是填满屏幕。

=> 将您的Row包装在IntrinsicHeight小部件中，它现在可以工作了。

最终结果将是：

new Container(
  decoration: new BoxDecoration(border: new Border.all(width: 2.0)),
  child: new IntrinsicHeight(
    child: new Row(
      children: <Widget>[
        new Container(
          width: 80.0,
          child: new Column(
            children: <Widget>[
              new Container(color: Colors.red, height: 10.0),
              new Container(
                color: Colors.blue,
                height: 50.0,
              ),
              new Expanded(
                child: new Container(color: Colors.amber),
              )
            ],
          ),
        ),
        new Expanded(
          child: new Padding(
            padding: new EdgeInsets.all(20.0),
            child: new Text("hellonnnnnnworld"),
          ),
        )
      ],
    ),
  ),
),

Answer 2

可能很少有问题，但是如果没有最小的工作示例，我无法确定。

该点可以在列中：右边的不是必需的，您可以将RichText溢出到新行并根据需要自行扩展(如果您想保持行固定高度，请考虑SingleChildScrollView(;左边的需要以某种方式绑定。您有几种选择：

• 您可以将其包裹在固定高度的Container中，
• 你可以把它放在一个对象中，使孩子被裁剪，
• 您可以要求Column严格包含其子项mainAxisSize: MainAxisSize.min

干杯