如何为StaggeredGrid子组件中的图片添加borderRadius？

你直接给Image.network添加borderRadius属性会失败，因为Image组件本身并没有这个参数。要实现圆角效果，有两种常用的可行方案：

方案1：使用ClipRRect裁剪组件 #

ClipRRect是Flutter官方提供的裁剪组件，能将子组件裁剪为圆角矩形，用法简单直接：

Widget getStaggeredGrid() {
  return StaggeredGrid.count(
    crossAxisCount: 15,
    mainAxisSpacing: 10,
    crossAxisSpacing: 10,
    children: [
      StaggeredGridTile.count(
          crossAxisCellCount: 5,
          mainAxisCellCount: 6,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(22),
            child: Image.network(
              'https://i.pinimg.com/564x/cf/bc/6d/cfbc6d2dd13c9dc0977986847cb8c385.jpg',
              fit: BoxFit.cover,
              alignment: Alignment.center,
            ),
          )),
      StaggeredGridTile.count(
          crossAxisCellCount: 5,
          mainAxisCellCount: 4,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(22),
            child: Image.network(
              'https://i.pinimg.com/564x/fe/96/29/fe96299107f1b0b94fa434b6558d6568.jpg',
              fit: BoxFit.cover,
              alignment: Alignment.center,
            ),
          )),
      StaggeredGridTile.count(
          crossAxisCellCount: 5,
          mainAxisCellCount: 9,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(22),
            child: Image.network(
              'https://i.pinimg.com/564x/71/84/7b/71847bcc4d8e4ab580c87dc6008cafb0.jpg',
              fit: BoxFit.cover,
              alignment: Alignment.center,
            ),
          )),
      StaggeredGridTile.count(
          crossAxisCellCount: 5,
          mainAxisCellCount: 5,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(22),
            child: Image.network(
              'https://i.pinimg.com/564x/45/de/d4/45ded4dd846a4d994ae3afaf3345fb8e.jpg',
              fit: BoxFit.cover,
              alignment: Alignment.center,
            ),
          )),
      StaggeredGridTile.count(
          crossAxisCellCount: 5,
          mainAxisCellCount: 3,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(22),
            child: Image.network(
              'https://i.pinimg.com/750x/a5/75/1e/a5751ed87fdbab76af299df228cb78ab.jpg',
              fit: BoxFit.cover,
              alignment: Alignment.center,
            ),
          )),
    ],
  );
}

方案2：使用Container+DecorationImage #

如果需要同时设置图片的边框、背景色等样式，可以将图片作为Container的装饰背景，通过BoxDecoration设置圆角：

// 单个Tile的示例
StaggeredGridTile.count(
  crossAxisCellCount: 5,
  mainAxisCellCount: 6,
  child: Container(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(22),
      image: DecorationImage(
        image: NetworkImage('https://i.pinimg.com/564x/cf/bc/6d/cfbc6d2dd13c9dc0977986847cb8c385.jpg'),
        fit: BoxFit.cover,
      ),
    ),
  ),
)

两种方案都能实现你需要的圆角效果，根据实际场景选择即可。

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