为什么当我向 Column 添加更多小部件时，带有包含在 Expanded 小部件中的图像的容器小部件会变小？

Question

当我将小部件添加到 Column 小部件时，包裹在 Expanded 小部件中的容器会变小。即使我尝试增加容器（或图像）的高度，它也不会改变。

我该如何解决问题？

这是图片

这是小部件功能

Widget _buildWomanProductContainer({
required double width,
required double height,
required String imagePath,
required String clothProductName,
required String clothType,
required String clothPrice,}) {
return Column(children: [
  Expanded(
    child: Container(
      alignment: Alignment.center,
      height: height,
      width: width,
      child: ClipRRect(
        borderRadius: BorderRadius.circular(12.0),
        child: Image.asset(
          imagePath,
          height: height,
          width: width,
          fit: BoxFit.cover,
          color: Color.fromRGBO(0, 0, 0, 0.4),
          colorBlendMode: BlendMode.darken,
        ),
      ),
    ),
  ),
  const SizedBox(height: 8),
  Text(clothProductName,
      style: TextStyle(
        color: Color.fromRGBO(58, 67, 59, 1),
        fontFamily: 'Merriweather-Regular',
      )),
  Text(clothType,
      style: TextStyle(
          color: Color.fromRGBO(58, 67, 59, 0.5),
          fontFamily: 'Merriweather-Regular',
          fontSize: 12)),
  OutlinedButton(child: Text("Button"), onPressed: () {})
]);}

Answer 1

我最终解决了这个问题！

1. 我们用 Wrap 小部件替换根 Column 小部件
2. 我们设置对齐方式：WrapAlignment.center 因为最初 Wrap 小部件将我们的位置设置在左侧
3. 我们包装在列中的其他不是 image.asset（包装在容器中）的小部件。

因此，我们在处理图像几何形状方面没有溢出问题或限制

提供更新的代码：

Widget _buildWomanProductContainer({
required double width,
required double height,
required String imagePath,
required String clothProductName,
required String clothType,
required String clothPrice,}) {
return Wrap(
  alignment: WrapAlignment.center,
      children: [
    Container(
      width: width,
      height: height,
      child: Image.asset(
        imagePath,
        width: width,
        height: height,
        fit: BoxFit.cover,
        color: Color.fromRGBO(0, 0, 0, 0.4),
        colorBlendMode: BlendMode.darken,
      ),
    ),

    Column(children: [
      const SizedBox(height: 8),
    Text(clothProductName,
        style: TextStyle(
          color: Color.fromRGBO(58, 67, 59, 1),
          fontFamily: 'Merriweather-Regular',
        )),
    Text(clothType,
        style: TextStyle(
            color: Color.fromRGBO(58, 67, 59, 0.5),
            fontFamily: 'Merriweather-Regular',
            fontSize: 12)),
    OutlinedButton(
      child: Text(clothPrice,
          style: TextStyle(
              color: Color.fromRGBO(58, 67, 59, 1),
              fontFamily: 'SolomonSans-SemiBold')),
      onPressed: () {},
      style: OutlinedButton.styleFrom(
        side: BorderSide(width: 1.0, color: Color.fromRGBO(58, 67, 59, 1)),
      ),
    )
    ],)
    
  ],
);

}