如何在行小部件中“垂直”展开容器小部件答案

【问题标题】：How to expand Container widget 'Vertically' in Row widget如何在行小部件中“垂直”展开容器小部件
【发布时间】：2020-11-22 09:39:54
【问题描述】：

我希望 Container 采用 Card 的高度。

我尝试了许多小部件，但未能完成我的订单，

我尝试使用 Flexible 作为容器的父级，但无济于事。

我有这个代码：

                    Card(
                        color: Color(0xff8c6ac9),
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10)),
                        child: Row(
                          children: <Widget>[
                            Expanded(
                              child: Column(
                                children: <Widget>[
                                  Padding(
                                    padding: const EdgeInsets.all(8.0),
                                    child: Text('Text2'),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.all(8.0),
                                    child: Text('Text3'),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.all(8.0),
                                    child: Text('Text4'),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.all(8.0),
                                    child: Text('Text5'),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.all(8.0),
                                    child: Text('Text6'),
                                  ),
                                ],
                              ),
                            ),
                            Container(
                              decoration: BoxDecoration(
                                  color: Color(0xff9778ce),
                                  borderRadius: BorderRadius.only(
                                      bottomRight: Radius.circular(10),
                                      topRight: Radius.circular(10))),
                              child: Column(
                                children: <Widget>[
                                  Icon(
                                    Icons.delete,
                                    color: Colors.white,
                                  ),
                                  Icon(
                                    Icons.edit,
                                    color: Colors.white,
                                  ),
                                ],
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceAround,
                              ),
                              width: 40,
                            ),
                          ],
                        ),
                      )

这段代码的输出是：

而我想要的是：

编辑： Card 小部件，它是 ListView 小部件中的一个项目。

谢谢...

【问题讨论】：

尝试用扩展小部件包裹你的图标
我尝试了但不行，'Claudio Redi' 解决方案非常适合我，谢谢

标签： flutter flutter-layout

【解决方案1】：

你快到了...用 IntrinsicHeight 小部件包裹你的行

Card(
  color: Color(0xff8c6ac9),
  shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10)),
  child: IntrinsicHeight(
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Expanded(
          child: Column(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('Text2'),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('Text3'),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('Text4'),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('Text5'),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('Text6'),
              ),
            ],
          ),
        ),
        Container(
          decoration: BoxDecoration(
              color: Color(0xff9778ce),
              borderRadius: BorderRadius.only(
                  bottomRight: Radius.circular(10),
                  topRight: Radius.circular(10))),
          child: Column(
            children: <Widget>[
              Icon(
                Icons.delete,
                color: Colors.white,
              ),
              Icon(
                Icons.edit,
                color: Colors.white,
              ),
            ],
            mainAxisAlignment:
            MainAxisAlignment.spaceAround,
          ),
          width: 40,
        ),
      ],
    ),
  ),
),

【讨论】：

【解决方案2】：

您可以使用 IntrinsicHeight 小部件，因为您的 Card 没有预定义的高度。

将其子级大小调整为子级固有高度的小部件。此类很有用，例如，当可以使用无限高度并且您希望孩子尝试无限扩展以将自身调整到更合理的高度时。

注意：这个类比较昂贵，因为它在最终布局阶段之前添加了一个推测布局通道。尽可能避免使用它。在最坏的情况下，此小部件可能会导致树深度为 O(N²) 的布局。

ListView.builder(
        itemBuilder: (context, index) {
          // wrapped the card widget with an intrinsic height
          return IntrinsicHeight(
            child: Card(
              color: Color(0xff8c6ac9),
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10)),
              child: Row(
                children: <Widget>[
                  Expanded(
                    child: Column(
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text('Text2'),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text('Text3'),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text('Text4'),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text('Text5'),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text('Text6'),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    decoration: BoxDecoration(
                        color: Color(0xff9778ce),
                        borderRadius: BorderRadius.only(
                            bottomRight: Radius.circular(10),
                            topRight: Radius.circular(10))),
                    child: Column(
                      mainAxisSize: MainAxisSize.max,
                      children: <Widget>[
                        Icon(
                          Icons.delete,
                          color: Colors.white,
                        ),
                        Icon(
                          Icons.edit,
                          color: Colors.white,
                        ),
                      ],
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                    ),
                    width: 40,
                  ),
                ],
              ),
            ),
          );
        },
      ),

输出：

【讨论】：

谢谢你，实际上，我应该像你一样善意地使用 IntrinsicHeight，但作为 Row 的父级。