卡片颤振填充高度

Question

我需要用几个小部件填充一张卡片，其中一些需要填充全高，但不是全宽。卡片包含一行，可以将两个小部件相邻对齐，第一个小部件需要垂直填充父小部件（另一个小部件是扩展小部件，因此可以在高度上增长）。使容器立即显示的唯一方法是将其包装在SizedBox中，并将高度设置为特定值。当然，这不允许容器随着卡的高度而增长或收缩。

我尝试了IntrinsicHeight，expand，Row和crossaxisalignment，拉伸和没有任何东西似乎允许彩色框填充其父框的高度（卡片）。

主要问题是卡的高度是由扩展高度设置的，因此不是固定的。因此，如果我将容器的高度设置为两倍。无穷大，Flutter无法构建布局，因为它会将卡的高度拉伸到无穷大。

扩展器打开时红色是想要的结果：

以下是相关代码：

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

我不能测试上面的代码是否工作，所以请让我知道如果它是。