• Flutter 动画设置贝塞尔曲线


    废话不多说直接上源码

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


    class FixedServiceView extends StatefulWidget{
    FixedServiceView({ this.sctrollController }) : super();
    ScrollController sctrollController = new ScrollController();

    @override
    _FixedServiceView createState() {
    return _FixedServiceView();
    }

    }

    class _FixedServiceView extends State<FixedServiceView>{
    // 滚动视图
    ScrollController _sctrollController = new ScrollController();

    @override
    void initState() {
    // TODO: implement initState
    super.initState();
    setState(() {
    _sctrollController = widget.sctrollController;
    });
    }

    @override
    Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    final width = size.width;

    return Container(
    margin: new EdgeInsets.fromLTRB(0, 0, 0, 10),
    width,
    height: 180,
    alignment: Alignment.center,
    color: Colors.transparent,
    child: CurveWidget(sctrollController: _sctrollController),
    );
    }
    }

    // 自定义曲线视图
    class CurveWidget extends StatefulWidget{
    ScrollController sctrollController = new ScrollController();
    CurveWidget({this.sctrollController}) : super();

    @override
    _CurveWidget createState() {
    return _CurveWidget();
    }
    }

    class _CurveWidget extends State<CurveWidget> {
    ScrollController _sctrollController = new ScrollController();
    double _offsetY = 60;
    @override
    void initState() {
    // TODO: implement initState
    super.initState();
    setState(() {
    _sctrollController = widget.sctrollController;
    _sctrollController.addListener(() {
    setState(() {
    var tempOffsetY = 60 - _sctrollController.offset;
    if (tempOffsetY > 60) {
    tempOffsetY = 60;
    }else if (tempOffsetY < 0) {
    tempOffsetY = 0;
    }
    _offsetY = tempOffsetY;
    });
    });
    });
    }

    @override
    Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    final width = size.width;
    return Container(
    width,
    height: 180,
    color: Colors.transparent,
    child: CustomPaint(foregroundPainter: BezierPainter(offsetY: _offsetY),),
    );
    }
    }

    // 曲线路径
    class BezierPainter extends CustomPainter {
    double offsetY;

    BezierPainter({ this.offsetY });

    @override
    void paint(Canvas canvas, Size size) {
    // TODO: implement paint
    final paint = Paint();
    paint.color = Colors.white;
    paint.style = PaintingStyle.fill;
    var path = Path();
    // 原点 p1
    path.moveTo(0, 0);
    //第2个点
    var controlPoint = Offset(size.width / 2, offsetY);
    var ednPoint = Offset(size.width, 0);
    path.quadraticBezierTo(
    controlPoint.dx,
    controlPoint.dy,
    ednPoint.dx,
    ednPoint.dy
    );
    //第3个点
    path.lineTo(size.width, size.height);
    //第4个点
    path.lineTo(0, size.height);
    path.lineTo(0, 0);
    path.close();
    canvas.drawPath(path, paint);
    }

    @override
    bool shouldRepaint(CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    return true;
    }
    }

  • 相关阅读:
    GDB调试共享库的问题
    Android 2.3 StageFright如何选定OMX组件的?
    Perforce client p4常见用法
    pthread_cond_signal只能唤醒已经处于pthread_cond_wait的线程
    正则表达式验证数据例子
    美国经济数据公布时间
    .net去除html标签代码
    js Array 方法|js Array 方法使用
    在分析向此请求提供服务所需资源时出错。请检查下列特定分析错误详细信息并适当地修改源文件
    日期格式正则表达式
  • 原文地址:https://www.cnblogs.com/diweinan/p/13517134.html
Copyright © 2020-2023  润新知