Flutter 如何实现容器左侧内嵌图片的圆角卡片效果

核心问题排查 #

你现有代码主要有两处逻辑问题导致效果不符合预期：

• 图片容器设置了 width: double.infinity，会占满整个Row的宽度，后续的间距和文字会被完全挤出可视区域
• 外层Container只设置了圆角，没有开启裁剪行为，子元素（图片）不会自动适配父容器的圆角，会溢出露出直角边缘

修正步骤 #

• 给外层Container添加 clipBehavior: Clip.antiAlias，强制子元素按照父容器的圆角裁剪
• 移除图片容器的 width: double.infinity，改成需要的固定宽度，或者用Expanded包裹实现自适应占宽
• 可选：给图片容器单独设置左侧上下圆角，和外层容器圆角对齐，效果更精准

修正后完整代码 #

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.all(Radius.circular(40)),
    boxShadow: <BoxShadow>[
      BoxShadow(
        color: Colors.black38,
        offset: Offset(2, 4),
        blurRadius: 5,
        spreadRadius: 2
      )
    ],
    gradient: LinearGradient(
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
      colors: [Color(0xfff3f3f4), Color(0xfff3f3f4)]
    )
  ),
  // 开启裁剪适配圆角
  clipBehavior: Clip.antiAlias,
  width: double.infinity,
  height: 130,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Container(
        // 替换原有的double.infinity，可根据需求调整宽度数值
        width: 120,
        height: double.infinity,
        decoration: BoxDecoration(
          // 仅保留左侧圆角，和外层圆角对齐
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(40),
            bottomLeft: Radius.circular(40)
          ),
          image: DecorationImage(
            image: AssetImage('images/veg.jpg'),
            fit: BoxFit.cover,
          ),
        ),
      ),
      SizedBox(width: 30,),
      Text("Lunch", style: TextStyle(
        fontWeight: FontWeight.bold,
        color: Colors.black,
        fontSize: 20
      ),),
    ],
  ),
)

如果希望图片宽度自适应占满除文字外的剩余空间，可以用Expanded组件调整占比，替换上述代码中的图片容器和文字部分即可：

// 图片区域，调整flex值可改变图片宽度占比
Expanded(
  flex: 2,
  child: Container(
    height: double.infinity,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(40),
        bottomLeft: Radius.circular(40)
      ),
      image: DecorationImage(
        image: AssetImage('images/veg.jpg'),
        fit: BoxFit.cover,
      ),
    ),
  ),
),
SizedBox(width: 30,),
// 文字区域自适应剩余空间
Expanded(
  child: Text("Lunch", style: TextStyle(
    fontWeight: FontWeight.bold,
    color: Colors.black,
    fontSize: 20
  ),),
)

内容的提问来源于stack exchange，提问作者basil p thomas