为什么当我向 Column 添加更多小部件时，带有扩展小部件中包装的图像的 Container 小部件会变小？答案

【问题标题】：Why a Container widget with an image wrapped in Expanded widget gets smaller as I add more widgets to Column?为什么当我向 Column 添加更多小部件时，带有扩展小部件中包装的图像的 Container 小部件会变小？
【发布时间】：2021-07-12 09:39:34
【问题描述】：

当我将小部件添加到 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: () {})
]);}

【问题讨论】：

但是图像是固定大小的
设置图片大小。用 Expanded 包裹您的列。
它不起作用

标签： flutter flutter-layout

【解决方案1】：

我最终解决了这个问题！

我们将根 Column 小部件替换为 Wrap 小部件
我们设置对齐方式：WrapAlignment.center 因为最初 Wrap 小部件将我们的位置设置为左侧
其他不是我们包装在列中的 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)),
      ),
    )
    ],)
    
  ],
);

}

【讨论】：