第11章组件装饰和视觉效果-Clip剪裁处理-ClipPath路径剪裁

防采集标记：亢少军老师的课程和资料

import 'package:flutter/material.dart';
import 'dart:math';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'ClipPath路径剪裁示例',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            'ClipPath路径剪裁示例',
            style: TextStyle(color: Colors.white),
          ),
        ),
        body: Center(
          child: new ClipPath(
            clipper: new TriangleCliper(),//指定自定义三角形Clipper
            child:new SizedBox(
              width: 100.0,
              height:100.0,
              child:  new Image.asset("images/8.jpeg",fit: BoxFit.fill,),
            ) ,
          ),
        ),
      ),
    );
  }
}


//自定义三角形Clipper,类型为Path
class TriangleCliper extends CustomClipper{

  //重写获取剪裁范围
  @override
  Path getClip(Size size) {

    Path path = new Path();
    path.moveTo(50.0,50.0);//起始点
    path.lineTo(50.0,10.0);//终止点
    path.lineTo(100.0,50.0);//起始点(50,10),终止点
    path.close();//使这些点构成三角形


    return path;
  }

  //重写是否重新剪裁
  @override
  bool shouldReclip(TriangleCliper oldClipper) {
    return true;
  }

}

• Flutter技术入门与实战: http://product.dangdang.com/26485813.html
• Flutter交流学习群：894109159
• Flutter开源项目请关注: https://github.com/kangshaojun
• Flutter视频教程：https://edu.csdn.net/lecturer/2436

@作者: 亢少军