美文网首页Flutter 知识点整理
flutter下实现圆形图标的三种方法

flutter下实现圆形图标的三种方法

作者: 跨界师 | 来源:发表于2021-06-28 22:56 被阅读0次
    • 第一种方法:
            width: 300.0,
            height: 300.0,
            decoration: BoxDecoration(
               color: Colors.yellow,
               borderRadius: BorderRadius.circular(150),
               image: DecorationImage(
                 image: NetworkImage("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201205%2F03%2F01400598djmyeczcskh2yr.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627481795&t=ac64760ca020d1e2b40fefa165446e2a"),
            )
        ),
    
    • 第二种方法:
    Container(
            child: ClipOval(
              child: Image.network( "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201205%2F03%2F01400598djmyeczcskh2yr.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627481795&t=ac64760ca020d1e2b40fefa165446e2a",
                  width: 300.0,
                  height: 300.0,
                  fit: BoxFit.cover,
              ),
            ),
          ),
    
    • 第三种方法
      在decoration: BoxDecoration()中进行设置,如下:
    borderRadius: BorderRadius.all(Radius.circular(150))
    

    相关文章

      网友评论

        本文标题:flutter下实现圆形图标的三种方法

        本文链接:https://www.haomeiwen.com/subject/howcultx.html