时间戳

首页 > 解决方案 > 如何使容器扩展到包含行的完整（动态）高度？

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

问题描述

我正在尝试制作一个可扩展的小部件（使用 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

标签： flutterdart

解决方案

你可以试试这个=>

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

推荐阅读