卡片内一行图像的高度调整答案

【问题标题】：Height adjustment of an Image in a row inside a Card卡片内一行图像的高度调整
【发布时间】：2022-01-23 18:51:26
【问题描述】：

我的想法是创建一个卡片小部件，左侧有图像，右侧有相应的文本数据。图片应始终采用全高和 1/3 的宽度（我使用带 flex 的扩展来获得这个。不确定这是否是最好的方法）。图像应放置在堆栈中，以便堆叠更多小部件。

我的问题是我无法在不指定固定高度的情况下将图像放入堆栈。我尝试了 Positoned.fill 但这对我不起作用。

这是我目前的卡片代码：

Widget build(BuildContext context) {
    return Card(
      elevation: 5,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15.0),
      ),
      child: Row(
        children: [
          Expanded(
            child: Stack(
              children: [
                Container(
                    // child: Positioned.fill(
                    //   child: ClipRRect(
                    //     borderRadius: BorderRadius.circular(15.0),
                    //     child: Image(
                    //       image: AssetImage("assets/eyes.jpg"),
                    //       fit: BoxFit.cover,
                    //     ),
                    //   ),
                    // ),
                    ),
              ],
            ),
          ),
          Expanded(
            flex: 2,
            child: Container(
              color: Colors.grey,
              child: Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: 15.0, vertical: 10),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text("This is a test"),
                    SizedBox(height: 10),
                    Text("This is a test test"),
                    SizedBox(height: 10),
                    Text("This is a test test test"),
                    SizedBox(height: 10),
                    Text("This is a test test"),
                    SizedBox(height: 10),
                    Text("This is a test"),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

这是当前状态的图片。图片应占据卡片左侧的整个白色区域。

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

您可以向容器本身添加装饰图像，而不是在容器中添加子图像小部件。以下是你的做法：

Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          fit: BoxFit.cover,
          image: AssetImage("url"),
        ),
      ),
    ),

【讨论】：