如何在Flutter中实现圆形图片？

嘿，刚好你已经有了Row布局的基础代码，我给你分享几种轻松把图片改成圆形的方法，直接就能套进你的代码里：

方法1：用ClipOval包裹图片 #

这是最直观的方式，ClipOval会把它的子组件裁剪成椭圆形（当宽高相等时就是圆形），你的图片已经设了100x100的固定尺寸，完美适配：

child: Row(
  children: <Widget>[
    ClipOval(
      child: Image(
        image: AssetImage('images/2.jpg'),
        width: 100.0,
        height: 100.0,
        fit: BoxFit.cover, // 加上这个确保图片填满圆形，避免拉伸变形
      ),
    ),
    SizedBox(width: 20.0),
    Text(
      'LEXUES C300',
      style: TextStyle(
          fontWeight: FontWeight.bold,
          color: Colors.white,
          fontSize: 30.0),
    ),
  ],
)

方法2：用CircleAvatar组件（专为头像设计） #

CircleAvatar是Flutter官方提供的专为圆形头像打造的组件，用法更简洁，还自带一些默认的占位样式，非常适合这种场景：

child: Row(
  children: <Widget>[
    CircleAvatar(
      radius: 50.0, // 半径是宽高的一半，对应原来的100x100
      backgroundImage: AssetImage('images/2.jpg'),
      // 如果图片加载失败，还可以设置child属性显示默认文字或图标
      // child: Text('LC'),
    ),
    SizedBox(width: 20.0),
    Text(
      'LEXUES C300',
      style: TextStyle(
          fontWeight: FontWeight.bold,
          color: Colors.white,
          fontSize: 30.0),
    ),
  ],
)

方法3：用Container配合BoxDecoration #

这种方式灵活性最高，如果你想给圆形图片加边框、阴影等额外样式，用这个方法最合适：

child: Row(
  children: <Widget>[
    Container(
      width: 100.0,
      height: 100.0,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        image: DecorationImage(
          image: AssetImage('images/2.jpg'),
          fit: BoxFit.cover,
        ),
        // 可选：添加边框
        // border: Border.all(color: Colors.blue, width: 2.0),
        // 可选：添加阴影
        // boxShadow: [BoxShadow(color: Colors.grey, blurRadius: 5.0)],
      ),
    ),
    SizedBox(width: 20.0),
    Text(
      'LEXUES C300',
      style: TextStyle(
          fontWeight: FontWeight.bold,
          color: Colors.white,
          fontSize: 30.0),
    ),
  ],
)

这三种方法都能实现你要的圆形图片效果，你可以根据自己的需求选：如果只是单纯要圆形，ClipOval或CircleAvatar都很方便；如果需要额外的装饰效果，就选Container的方式。

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