美文网首页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图片裁剪

    flutter提供的一个裁剪widget

  • Flutter ClipOval 使用介绍

    ClipOval 介绍 ClipOval可以用来裁剪圆形或者椭圆,ClipOval的定义跟ClipRect一样,只...

  • Flutter学习笔记

    一.Flutter布局 1. ClipOval() 设置圆角: 将里面的布局裁剪成圆形的组件 当然设置球形也可以使...

  • Flutter裁剪图片

    最近在学习中需要用到裁剪图片,记录一下解决方法 思路: 使用canvas的drawImageRect()方法,对I...

  • flutter 图片裁剪

    上次做了图片裁剪的需求没有记录, 最近遇到了身份证裁剪的需求又忘记处理方法了,处理完毕后记录一下 需求: 根据形状...

  • Flutter深入浅出组件篇---ClipOval、ClipPa

    ClipOval介绍 ClipOval是裁剪子组件为椭圆的组件,默认情况下,将轴对齐的椭圆内切到其布局尺寸中,并防...

  • Flutter圆角设置组件

    flutter能设置圆角的组件:ClipRRect、ClipOval、CircleAvatar、BoxDecora...

  • flutter 图片裁剪、编辑

    //产品需求是 拍照和相册选择照片 然后进入照片编辑页面 完成编辑上传图片 用到的库有image_picker 实...

  • Flutter实现图片裁剪

    在这一篇中我们来实现图片的裁剪 这里我们使用到canvas的drawImageRect()方法 第一个参数Imag...

  • flutter一文通4

    flutter图标库:http://fluttericon.com/ 一. ClipOval椭圆组件 使被包裹的子...

网友评论

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

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