Flutter-用贝塞尔曲线画一个带文本的波浪球控件

2019年11月6日14:21:56 发表评论 37 阅读

flutter 中的自定义 Widget 算作是 flutter 体系中比较高阶的知识点之一了,相当于原生开发中的自定义 View,以我个人的感受来说,自定义 widget 的难度要低于自定义 View,不过由于当前 flutter 的开源库还不算多丰富,所以有些效果还是需要开发者自己动手来实现,而本篇文章就来介绍如何用 flutter 来实现一个带文本的波浪球 Widget,实现的的效果如下所示:

Flutter-用贝塞尔曲线画一个带文本的波浪球控件

先来总结下该 WaveLoadingWidget 的特点,这样才能归纳出实现该效果所需的步骤

  1. widget 的主体是一个不规则的半圆,顶部以类似于波浪的形式从左往右上下波动运行
  2. 球形波浪可以自定义颜色,此处以 waveColor 命名
  3. 波浪的起伏线将嵌入的文本分为上下两种颜色,上边的文本颜色以 backgroundColor 命名,下边的文本颜色以 foregroundColor 命名,文本的颜色一直在动态变化中
虽然波浪是不断运动的,但只要能够绘制出其中一帧的图形,其动态效果就能通过不断改变波浪的位置参数来完成,所以这里先把该 widget 当成静态的,先实现其静态效果即可
  • 微信号:sqymail
  • 微信扫一扫欢迎加我为好
  • weinxin
  • 交流QQ群号:248249544
  • IntelliJ IDEA,Java 技术交流
  • weinxin

发表评论

您必须登录才能发表评论!