flutter开发实战-css的linear-gradient的值转换成LinearGradient
flutter开发实战-css的linear-gradient的值转换成LinearGradient
在开发中遇到了参照前端的css的属性值，需要将css的linear-gradient值转换成LinearGradient，这样可以直接设置相应的值。这里暂时不涉及到，颜色值名称、color-stop1，后续把包含color-stop1用于指定渐变的起止颜色的属性转换、正则表达式转换等也相应的整理一下。这里的颜色为#ffffff格式的。
下面将linear-gradient(179deg,#eab6ea,#978bfb)转换成flutter的LinearGradient类对象。
我们先了解一下css的linear-gradient
一、css之linear-gradient
linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。
创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。
/* 从上到下，蓝色渐变到红色 */
linear-gradient(blue, red);/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);
background-image: linear-gradient(direction, color-stop1, color-stop2, …);
direction：用角度值指定渐变的方向（或角度）。
color-stop1, color-stop2,…：用于指定渐变的起止颜色。
linear-gradient(179deg,#eab6ea,#978bfb)
css效果图
二、flutter之LinearGradient
LinearGradient一个用于创建线性渐变颜色装饰，它能够根据给定的起点和终点，在这个线性渐变的方向上，使用给定的颜色进行过渡，所以LinearGradient实现的过渡是平滑的。
针对于linear-gradient(179deg,#eab6ea,#978bfb)转换成flutter的LinearGradient
如果css的linear-gradient存在角度需要将flutter的LinearGradient中begin设置成Alignment.bottomCenter，end设置为Alignment.topCenter;
// 和css角度，方向保持一致
Alignment begin = Alignment.bottomCenter;
Alignment end = Alignment.topCenter;
之后通过计算一下角度设置transform。
GradientRotation? transform;// 角度// 计算角度double degree = 179;double p = 180.0;double radians = (math.pi / p) * degree;transform = GradientRotation(radians);
完成代码代码如下
LinearGradient linearGradient(BuildContext context) {Alignment begin = Alignment.centerLeft;Alignment end = Alignment.centerRight;GradientRotation? transform;// 角度// 计算角度double degree = 179;double p = 180.0;double radians = (math.pi / p) * degree;transform = GradientRotation(radians);// 和css角度，方向保持一致begin = Alignment.bottomCenter;end = Alignment.topCenter;LinearGradient linearGradient = LinearGradient(colors: [ColorUtil.hexColor(0xeab6ea),ColorUtil.hexColor(0x978bfb),],begin: begin,end: end,transform: transform,);return linearGradient;
}
转换成flutter的linearGradient效果图
三、小结
flutter开发实战-css的linear-gradient的值转换成LinearGradient。将css的linear-gradient值转换成LinearGradient，可以方便参考页面的检查中css元素设置改成LinearGradient使用的属性值。这里暂时不涉及到，颜色值名称、color-stop1，后续把包含color-stop1用于指定渐变的起止颜色的属性转换、正则表达式转换等也相应的整理一下。
学习记录，每天不停进步。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！