美文网首页Flutter
Flutter(二十)ClipOval图片裁剪

Flutter(二十)ClipOval图片裁剪

作者: 天色将变 | 来源:发表于2019-07-17 21:02 被阅读3次

    flutter提供的一个裁剪widget


    image.png
    class _MyHomePageState extends State<MyHomePage> {
      
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            //导航栏
            title: Text("App Name"),
            actions: <Widget>[
              //导航栏右侧菜单
              IconButton(icon: Icon(Icons.share), onPressed: () {}),
            ],
          ),
          body: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ClipOval(
                child: Image.asset(
                  "images/avatar.jpg",
                  width: 180,
                ),
              ),
              ClipOval(
                child: new SizedBox(
                  width: 150.0,
                  height: 150.0,
                  child: Image.asset(
                    "images/avatar2.jpg",
                    width: 150,
                  ),
                ),
              ),
              ClipOval(
                child: Image.asset(
                  "images/avatar3.jpg",
                  width: 180,
                  height: 180,
                ),
                clipper: MyClipper(),
                clipBehavior: Clip.hardEdge,
              ),
            ],
          ),
        );
      }
    }
    
    class MyClipper extends CustomClipper<Rect> {
      @override
      Rect getClip(Size size) {
        return new Rect.fromLTRB(10.0, 10.0, size.width - 10.0, size.height - 10.0);
      }
    
      @override
      bool shouldReclip(CustomClipper<Rect> oldClipper) {
        return true;
      }
    }
    

    相关文章

      网友评论

        本文标题:Flutter(二十)ClipOval图片裁剪

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