Flutter 的曲线的弧度的绘制
2019-05-06 本文已影响0人
叶秋_YQ
最终效果
入口文件
import 'package:flutter/material.dart';
import 'home_page.dart';
main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
// 取消debug 图标
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue
),
home: HomePage(),
);
}
}
方法文件
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
const HomePage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
// 裁切的控件
ClipPath(
// 只裁切底部的方法
clipper: BottonClipper(),
child: Container(
color: Colors.deepOrange,
height: 300,
),
)
],
),
);
}
}
class BottonClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
// 路径
var path = Path();
// 设置路径的开始点
path.lineTo(0, 0);
path.lineTo(0, size.height-50);
// 设置曲线的开始样式
var firstControlPoint = Offset(size.width / 2, size.height);
// 设置曲线的结束样式
var firstEndPont = Offset(size.width, size.height - 50);
// 把设置的曲线添加到路径里面
path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
firstEndPont.dx, firstEndPont.dy);
// 设置路径的结束点
path.lineTo(size.width, size.height-50);
path.lineTo(size.width, 0);
// 返回路径
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return false;
}
}