如何使容器扩展到包含行的完整(动态)高度？

Question

我正在尝试制作一个可扩展的小部件(使用ExpansionTile)，但我听说有一段时间让蓝色容器填满了一行的高度。文本的长度是动态的，所以"title“可能会跨越几行(我将其包装在展开的行中)。

我尝试了所有不同的方法，但都没有成功。目前，我创建了一个“自定义”小部件，并将其设置为ExpansionTile的标题。标题行小部件是包含两列的行。其中第二列包含两个文本小部件。第二列的高度不同，我希望第一个小部件(蓝色容器)填充行高度。

这够清楚了吗？有什么想法吗？当前代码(不考虑格式和数据类)：

Widget build(BuildContext context) {
if (item.hasExtra())
  return Padding(
    padding: _insets,
    child: ClipRRect(
      borderRadius: BorderRadius.circular(10),
      child: Container(
        color: backgroundColor,
        child: ExpansionTile(
            leading: null,
            backgroundColor: UHColors.orange1,
            key: PageStorageKey<Item>(item),
            title: TitleRow(item: item),

然后是“TitleRow”的构建方法：

class TitleRow extends StatelessWidget {
final Color textColor1 = UHColors.white1;

TitleRow({
  Key key,
  @required this.item,
}) : super(key: key);

final Item item;

@override
Widget build(BuildContext context) {
  return Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      FittedBox(
        child: Container(
          color: Colors.blue,
          child: Column(
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[Text("This box")],
          ),
        ),
      ),
      Expanded(
        child: Padding(
          padding: const EdgeInsets.fromLTRB(15, 15, 15, 15),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(item.type,
                  style: UHTextStyle.typetitle1(context)
                      .colorWith(UHColors.black1)),
              Text(item.title,
                  style: UHTextStyle.uhheader2(context).colorWith(textColor1))
            ],
          ),
        ),
      ),
    ],
  );
}
}

[1]: https://i.stack.imgur.com/llRp8.png

Answer 1

这就是你如何做到这一点，这只是一个示例代码，你可以参考它并相应地更新你的代码-

  IntrinsicHeight(
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Container(
          width: 100.0,
          decoration: BoxDecoration(color: Colors.amber),
          child: Center(
            child: Text("Text"),
          ),
        ),
        SizedBox(width: 20.0),
        Flexible(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(root.title),
              Text(
                  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ...",
                  style: TextStyle(),
                  softWrap: true,
                  maxLines: 3,),
            ],
          ),
        ),
      ],
    ),
  ),

这将按照您正在寻找的方式排列小部件，如下所示-

​

​

Answer 2

你可以试试这个=>

Row(
  children: [
    IntrinsicHeight(
      child: Container(
        color: Colors.blue,
        height: double.infinity,
        alignment: Alignment.center,
        child: Text('Hello')
      )
    ),
    Expanded(
      child: Column(
        children: [
          Text('Small title'),
          Text('Large title Large title Large title Large title'),
        ]
      )
    )
  ]
)