Home Articles

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

Asked
Viewed 1667 times
0

我想创建一个以这种基本格式为单位的单元格:

|-----------------------------|
| 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子项具有非零flex,但传入高度约束是无限制的 .

有没有办法在最左边的列中扩展最后一个占用尽可能多的空间,因为右侧和侧面的RichText的大小?

2 Answers

  • 1

    可能没什么问题,但没有最小的工作示例我无法确定 .

    这一点可以在列中:正确的一个是没有必要的,你可以将 RichText 溢出到新行并根据需要自行扩展(如果你想保持行固定的高度,可以考虑 SingleChildScrollView );左边的人需要以某种方式绑定 . 你几乎没有选择:

    • 你可以将它包装在一个固定高度的 Container 中,

    • 你可以在一个对象中使它能够裁剪孩子,

    • 你可以要求 Column 紧紧包含其子女 mainAxisSize: MainAxisSize.min

    干杯

  • 0

    我想你希望你的list元素具有尽可能小的高度,同时拥有一个占用 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("hello\n\n\n\n\n\nworld"),
              ),
            )
          ],
        ),
      ),
    ),
    

Related