Flutter中Container尺寸不响应、圆角修改无效问题求助

核心问题 #

你的Container没有设置自身的width和height，它的尺寸完全由子组件Image决定。由于Image是正方形（宽高均为FbSizes.iconMd），当BorderRadius.circular的数值大于等于正方形边长的一半时，显示效果都会是圆形——300和100都远超过这个阈值，所以视觉上没有差异；修改数值只要还满足“大于等于边长一半”的条件，视图就不会变化。

修复方案 #

给Container指定明确的宽高，同时可添加内边距让图标与边框保持间距，这样就能让圆角设置生效：

Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      // 第一个带圆形边框的容器
      Container(
        width: FbSizes.iconMd,
        height: FbSizes.iconMd,
        decoration: BoxDecoration(
          border: Border.all(color: FbColors.grey),
          borderRadius: BorderRadius.circular(300), // 此时显示圆形
        ),
        padding: const EdgeInsets.all(8), // 图标与边框的间距
        child: Image(
          fit: BoxFit.contain,
          image: AssetImage(dark ? FbImages.googleDark : FbImages.googleLight),
        ),
      ),
      const SizedBox(width: FbSizes.spaceBtwnItems),
      // 第二个带圆角边框的容器
      Container(
        width: FbSizes.iconMd,
        height: FbSizes.iconMd,
        decoration: BoxDecoration(
          border: Border.all(color: FbColors.grey),
          borderRadius: BorderRadius.circular(20), // 此时显示圆角矩形
        ),
        padding: const EdgeInsets.all(8),
        child: Image(
          fit: BoxFit.contain,
          image: AssetImage(dark ? FbImages.appleDark : FbImages.appleLight),
        ),
      ),
    ],
  )

简化实现（可选） #

如果需要圆形边框，用CircleAvatar会更简洁：

Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      CircleAvatar(
        radius: FbSizes.iconMd / 2,
        backgroundColor: Colors.transparent,
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(color: FbColors.grey),
            borderRadius: BorderRadius.circular(FbSizes.iconMd / 2),
          ),
          padding: const EdgeInsets.all(4),
          child: Image(
            image: AssetImage(dark ? FbImages.googleDark : FbImages.googleLight),
          ),
        ),
      ),
      const SizedBox(width: FbSizes.spaceBtwnItems),
      // 第二个圆角容器保持原修复逻辑
      Container(
        width: FbSizes.iconMd,
        height: FbSizes.iconMd,
        decoration: BoxDecoration(
          border: Border.all(color: FbColors.grey),
          borderRadius: BorderRadius.circular(20),
        ),
        padding: const EdgeInsets.all(8),
        child: Image(
          fit: BoxFit.contain,
          image: AssetImage(dark ? FbImages.appleDark : FbImages.appleLight),
        ),
      ),
    ],
  )

内容的提问来源于stack exchange，提问作者Andy