如何使容器扩展到包含行的全部（动态）高度？

Question

我试图制作一个可扩展的小部件（使用ExpansionTile)，但我听说有时间让蓝色容器填满行的全部高度。文本的长度是动态的，所以“title”可能跨越几行（我用展开的代码包装了它）。

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

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

这将按照您正在寻找的方式排列小部件，类似于这样-