美文网首页
flutter- 圆角

flutter- 圆角

作者: 菲特峰 | 来源:发表于2020-12-30 09:54 被阅读0次

    一.设置圆角

    1. 在网上看了许多的文章,都是使用如下代码 ,然而无效

    Center(
            child: Container(
              decoration: BoxDecoration(
                borderRadius:BorderRadius.circular(10)
              ),
              child: Image.network(
                imagePath,
                width: 250,
                height: 150,
                fit: BoxFit.cover,
                ),
            ),
          ),
    

    2.使用装饰器可以实现圆角效果,但是如果我们需要加一个占位图呢

    Center(
            child: Container(
              width: 250,
              height: 150,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  image: DecorationImage(
                    image: NetworkImage(imagePath),
                    fit: BoxFit.cover,
                  )
                  ),
            ),
          )
    

    3.有圆角有占位图

    Scaffold(
            appBar: AppBar(
              title: Text(widget.title),
            ),
            body: Center(
                child: Container(
              width: 250,
              height: 150,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(10),
                child: FadeInImage.assetNetwork(
                  placeholder: "images/ic_device_image_default.png",
                  image: imagePath,
                  fit: BoxFit.cover,
                ),
              ),
            )));
    
    

    二 .圆形图片,圆角图片方案

    1. CircleAvatar

    class HomeContent extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Center(
          child: CircleAvatar(
            radius: 100,
            backgroundImage: NetworkImage("https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
            child: Container(
              alignment: Alignment(0, .5),
              width: 200,
              height: 200,
              child: Text("兵长利威尔")
            ),
          ),
        );
      }
    }
    

    2. ClipOval

    class ImageCircleDemo extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Center(
          child: ClipOval(
            child: Image.network(
              "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg",
              width: 200,
              height: 200,
            ),
          ),
        );
      }
    } 
    

    3. Container+BoxDecoration

    const BoxDecoration({
        this.color, // 颜色,会和Container中的color属性冲突
        this.image, // 背景图片
        this.border, // 边框,对应类型是Border类型,里面每一个边框使用BorderSide
        this.borderRadius, // 圆角效果
        this.boxShadow, // 阴影效果
        this.gradient, // 渐变效果
        this.backgroundBlendMode, // 背景混合
        this.shape = BoxShape.rectangle, // 形变
      })
    
    class ImageCircleDemo extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Center(
          child: Container(
            width: 200,
            height: 200,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(100),
              image: DecorationImage(
                image: NetworkImage(
                    "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
              ),
            ),
          ),
        );
      }
    }
    

    相关文章

      网友评论

          本文标题:flutter- 圆角

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