主页 / coding / 问题 / 79437002
Accepted
Andy
Asked: 2025-02-14 00:16:27 +0800 CST

为什么这些容器的尺寸不正确？

  • 772

我正在尝试在 Flutter 小部件的一行中添加几个徽标；相关代码如下：

 Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Container(
        decoration: BoxDecoration(
          border: Border.all(color: FbColors.grey),
          borderRadius: BorderRadius.circular(300),
        ),
        child: Image(
          width: FbSizes.iconMd,
          height: FbSizes.iconMd,
          image: AssetImage(dark ? FbImages.googleDark : FbImages.googleLight),
        ),
      ),
      const SizedBox(width: FbSizes.spaceBtwnItems),
      Container(
        decoration: BoxDecoration(
          border: Border.all(color: FbColors.grey),
          borderRadius: BorderRadius.circular(100),
        ),
        child: Image(
          width: FbSizes.iconMd,
          height: FbSizes.iconMd,
          image: AssetImage(dark ? FbImages.appleDark : FbImages.appleLight),
        ),
      ),
    ],
  )

请注意，第一个Container有一个BorderRadius.circular(300)呼叫，第二个有一个BorderRadius.circular(100)呼叫 - 但它们在屏幕上的大小相同，并且它们都不是指定的大小（它们在最终视图中的大小相同 - 我只是改变了代码中的大小以显示它们没有响应）。

在此处输入图片描述

我无论如何也想不通为什么我无法调整它们的大小。你知道我做错了什么吗？

flutter

1 个回答

  1. Best Answer

    小Image 部件width和height属性应该控制图像的大小，但如果父级Container或其他约束产生干扰，图像可能不会按预期显示。

    因此，不要将尺寸提供给图像，而是将其提供给父级Container并确保其Container具有正方形尺寸。

    您可以使用中的属性来控制图像在 中的适合度，而不是将 设置为Container固定的，使其变成圆形。BorderRadiusBorderRadius.circular(300)shape: BoxShape.circle,decorationContainerfitAssetImage fit: BoxFit.containContainer

      Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Container(
        width: FbSizes.iconMd,
        height: FbSizes.iconMd,
        decoration: const BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.grey,
        ),
        child: Image(
          image: AssetImage(dark ? FbImages.googleDark : FbImages.googleLight),
          fit: BoxFit.contain,
        ),
      ),
      const SizedBox(width: FbSizes.spaceBtwnItems),
      Container(
        width: FbSizes.iconMd,
        height: FbSizes.iconMd,
        decoration: const BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.grey,
        ),
        child: Image.asset(
          image: AssetImage(dark ? FbImages.appleDark : FbImages.appleLight),
          fit: BoxFit.contain,
        ),
      ),
    ],
  )

    更好的解决方案：

    您可以使用Widget并通过更改 属性CircleAvatar的值来控制图像的大小radius

      Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      CircleAvatar(
        radius: 40,
        backgroundColor: Colors.grey,
        child: Image(
          image: AssetImage(dark ? FbImages.googleDark : FbImages.googleLight),
          fit: BoxFit.contain,
        ),
      ),
      const SizedBox(width: FbSizes.spaceBtwnItems),
      CircleAvatar(
        radius: 40,
        backgroundColor: Colors.grey,
        child: Image(
          image: AssetImage(dark ? FbImages.appleDark : FbImages.appleLight),
          fit: BoxFit.contain,
        ),
      ),
    ],
  )
    • 1

相关问题