Flutter - 卡片的填充高度

Question

我需要用几个小部件填充卡片，其中一些需要填充整个高度，而不是整个宽度。该卡片包含一个 Row 以便能够将两个小部件彼此相邻对齐，第一个需要垂直填充父级（另一个小部件是 ExpansionTile，因此可以增加高度）。让 Container 立即显示的唯一方法是将其包装在 SizedBox 中，并将高度设置为特定值。当然这并不允许Container随着卡片的高度而增长或缩小。

我尝试过 IntrinsicHeight、Expanded、Row 和 CrossAxisAlignment.stretch，但似乎没有任何东西可以让彩色框填充其父级的高度（卡片）。

主要问题是卡片的高度是由 ExpansionTile 高度设置的，因此不是固定的。因此，如果我将 Container 的高度设置为 double.infinity，Flutter 将无法构建布局，因为它会将 Card 的高度拉伸到无穷大。

---

当 ExpansionTile 关闭时，绿色是想要的结果：

ExpansionTile 打开时，红色是想要的结果：

---

这是相关代码：

Card(
  child: Row(
    children: <Widget>[
      Align(
        alignment: Alignment.centerLeft,
        child: SizedBox(
          width: 10,
          height: 74,
          child: Container(
            decoration: BoxDecoration(
              color: color,
              borderRadius: new BorderRadius.all(Radius.circular(3.0)),
            ),
          ),
        ),
      ),
      Expanded(
        child: Theme(
          data: Theme.of(context).copyWith(dividerColor: Colors.transparent),
          child: ExpansionTile(
            title: Text('Title'),
            subtitle: Text('Subtitle'),
            children: <Widget>[
              Padding(
                padding: EdgeInsets.only(left: 25),
                child: ListTile(
                  title: Text('child title'),
                  subtitle: Text('child subtitle'),
                  trailing: Icon(Icons.chevron_right),
                ),
              ),
              Padding(
                padding: EdgeInsets.only(left: 25),
                child: ListTile(
                  title: Text('child title'),
                  subtitle: Text('child subtitle'),
                  trailing: Icon(Icons.chevron_right),
                ),
              ),
            ],
          ),
        ),
      ),
    ],
  ),
),

Answer 1

所以基本上你的问题是当你不指定容器的高度时，容器会得到他孩子的高度，或者，如果父母强迫孩子接受他的高度，（如@987654321 @)...

因此，对您而言，最好的解决方案是使用 LayoutBuilder 小部件包装卡片（或行），并使用 constrains.maxHeight 作为容器的高度。

所以代码应该是这样的：

LayoutBuilder(
         builder: (context, constraints) => Card(
        child: Row(
          children: <Widget>[
            Align(
              alignment: Alignment.centerLeft,
              child: Container(
                height: constraints.maxHeight,
                decoration: BoxDecoration(

                  // color: color,
                  borderRadius: new BorderRadius.all(Radius.circular(3.0)),
                ),
              ),
            ),
            Expanded(
              child: Theme(
                //  data: Theme.of(context).copyWith(dividerColor: Colors.transparent),
                child: ExpansionTile(
                  title: Text('Title'),
                  subtitle: Text('Subtitle'),
                  children: <Widget>[
                    Padding(
                      padding: EdgeInsets.only(left: 25),
                      child: ListTile(
                        title: Text('child title'),
                        subtitle: Text('child subtitle'),
                        trailing: Icon(Icons.chevron_right),
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.only(left: 25),
                      child: ListTile(
                        title: Text('child title'),
                        subtitle: Text('child subtitle'),
                        trailing: Icon(Icons.chevron_right),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );

我无法测试上面的代码是否有效，所以请告诉我是否有效。