如何少量移动flutter Card中的图像

Question

我正在制作一个 flutter 应用程序，并且在两个地方使用相同的图像。第一个地方是旋转木马，第二个地方是全尺寸容器。轮播中的图像正在被剪切，我想将其稍微向右移动，这样它就不会从文本区域被剪切。

目前看起来是这样的

我想确保带有文本的框不会被裁剪。

以下为参考图片

这是我正在使用的代码

child: Card(
                    elevation: 4,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(20),
                    ),
                    margin: const EdgeInsets.all(24),
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(
                          12.0),
                      child: Image.asset(
                        imageName,
                        fit: BoxFit.cover,
                        width: double.infinity,
                        height: double.infinity,
                      ),
                    ),
                  ),

Answer 1

您可以在 Image.asset 小部件中使用

alignment

属性。

要从左侧对齐，只需将 alignment 指定为

Alignment.centerLeft

。

如需更多自定义，您可以将其从代表

Alignment(-1.0, 0.0)

的

Alignment.centerLeft

设置为代表

Alignment(0.0, 0.0)

的

Alignment.center

。

例如：

child: Image.asset(
  imageName,
  fit: BoxFit.cover,
  alignment: Alignment.centerLeft,
  width: double.infinity,
  height: double.infinity,
),

Answer 2

使用

fit: BoxFit.contain

您还可以尝试

FittedBox

小部件：

child: FittedBox(
      fit: BoxFit.contain,
      child: Image.asset(
        imageName,
      ),
    ),