颤动-卡的填充高度

Question

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

我尝试过使用CrossAxisAlignment.stretch进行IntrinsicHeight，Expanded，Row操作，似乎没有什么可以让彩色框填充其父级的高度（卡片）。

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

---

关闭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

所以基本上，您的问题是，当您不指定容器的高度时，容器将获得其孩子的身高，或者，如果父母强迫孩子接受他的身高，（例如sizedBox ）...

因此，最适合您的解决方案是使用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),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );

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