dart 如何为儿童内部的照片添加borderRadius?

wydwbb8l  于 2022-12-28  发布在  其他
关注(0)|答案(1)|浏览(145)

我试着用我所知道的方法来解决它,每次都有错误。。我试着用Radius来解决它。。
应用程序截图
Widget in the app

Widget getStaggeredGrid() {
  return StaggeredGrid.count(
    crossAxisCount: 15,
    mainAxisSpacing: 10,
    crossAxisSpacing: 10,
    children: [
      StaggeredGridTile.count(
        
          crossAxisCellCount: 5, //
          mainAxisCellCount: 6, //
          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: Image.network(
            'https://i.pinimg.com/564x/fe/96/29/fe96299107f1b0b94fa434b6558d6568.jpg',
            //height: 60.0,
            fit: BoxFit.cover,
            alignment: Alignment.center,
          )),
      StaggeredGridTile.count(
          crossAxisCellCount: 5,
          mainAxisCellCount: 9,
          child: Image.network(
            'https://i.pinimg.com/564x/71/84/7b/71847bcc4d8e4ab580c87dc6008cafb0.jpg',
            //height: 60.0,
            fit: BoxFit.cover,
            alignment: Alignment.center,
          )),
      StaggeredGridTile.count(
          crossAxisCellCount: 5,
          mainAxisCellCount: 5,
          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: Image.network(
            'https://i.pinimg.com/750x/a5/75/1e/a5751ed87fdbab76af299df228cb78ab.jpg',
            fit: BoxFit.cover,
            alignment: Alignment.center,
          )),
    ],
  );
}

我试着用Radius来解它...

borderRadius: BorderRadius.circular(22),

我觉得少了点什么我没有

efzxgjgh

efzxgjgh1#

我不太确定我是否正确理解了您的问题,但您想要的是将边界半径添加到您添加的Image.network中,
你可以用ClipRRectClipOval Package 图像小部件。下面是当ImageClipRRectClipOval Package 时捕获的图像,下面的代码是我如何做到的。
希望这个有用。

StaggeredGrid.count(
        crossAxisCount: 15,
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,
        children: [
          StaggeredGridTile.count(
            crossAxisCellCount: 5, //
            mainAxisCellCount: 6, //
            child: ClipRRect(
              borderRadius: BorderRadius.circular(20),
              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: ClipOval(
              child: SizedBox.fromSize(
                size: const Size.fromRadius(50),
                child: Image.network(
                  'https://i.pinimg.com/564x/fe/96/29/fe96299107f1b0b94fa434b6558d6568.jpg',
                  //height: 60.0,
                  fit: BoxFit.cover,
                  alignment: Alignment.center,
                ),
              ),
            ),
          ),
          StaggeredGridTile.count(
            crossAxisCellCount: 5,
            mainAxisCellCount: 9,
            child: ClipOval(
              child: SizedBox.fromSize(
                  size: const Size.fromHeight(50),
                  child: Image.network(
                    'https://i.pinimg.com/564x/71/84/7b/71847bcc4d8e4ab580c87dc6008cafb0.jpg',
                    //height: 60.0,
                    fit: BoxFit.cover,
                    alignment: Alignment.center,
                  )),
            ),
          ),
          StaggeredGridTile.count(
            crossAxisCellCount: 5,
            mainAxisCellCount: 5,
            child: ClipOval(
              child: SizedBox.fromSize(
                  size: const Size.fromWidth(50),
                  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(20),
                child: Image.network(
                  'https://i.pinimg.com/750x/a5/75/1e/a5751ed87fdbab76af299df228cb78ab.jpg',
                  fit: BoxFit.cover,
                  alignment: Alignment.center,
                )),
          ),
        ],
      )

相关问题