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

Question

我正在尝试制作一个可扩展的小部件（使用 ExpansionTile），但我听说过让蓝色容器填满行的整个高度。 文本的长度是动态的，因此“标题”可能会跨越几行（我将其包裹在 Expanded 中）。

[![显示列表示例的图像。][1]][1]

我尝试了各种不同的方法，但都没有成功。目前我创建了一个“自定义”小部件并设置为 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

你可以试试这个=>

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

Answer 2

这里是如何做到这一点的，这只是一个示例代码，可以帮助您入门，您可以参考此内容并相应地更新您的代码 -

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

这将按照您的要求排列小部件，如下所示 -