11-26 06:26 阅读 189

Flutter Widget 之LinearGradient

纯色非常适合设置应用程序的样式，但有时你想要更多的流行元素及多种不同的颜色，这就是LinearGradient的用武之气。

虽然技术上这不是小部件，但LinearGradient仍然很酷。

ezgif.com-gif-maker (2).gif

你可以i与任何具有装饰的Container的小部件一起使用。

例如Container使用LinearGradient类以创建在颜色之间转换的渐变。

Container(     decoration: const BoxDecoration(         gradient: LinearGradient()     ) ) 复制代码

首先使用两种颜色

LinearGradient(     colors: [         Color(0xff027DFD),         Color(0xff4100E0),     ] ) 复制代码

或使用三种颜色

LinearGradient(     colors: [         Color(0xff027DFD),         Color(0xff4100E0),         Color(0xff1CDAC5),     ] ) 复制代码

或使用四种颜色

LinearGradient(     colors: [         Color(0xff027DFD),         Color(0xff4100E0),         Color(0xff1CDAC5),         Color(0xffF2DD22),     ] ) 复制代码

在默认情况下，渐变中的所有颜色都是均匀分布的

LinearGradient(     colors: [...], ) 复制代码

但是可以通过停靠点列表准确定义每种颜色显示多少

LinearGradient(     colors: [...],     stops: [0.1, 0.20, 0.50, 0.75] ) 复制代码

还可以准确指定渐变开始和结束的位置

LinearGradient(     colors: [...],     begin: Alignment.topLeft,     end: Alignment.bottomRight, ) 复制代码

最重要的是，通过应用变换来操纵渐变

LinearGradient(     colors: [...],     begin: Alignment.topLeft,     end: Alignment.bottomRight,     transform: GradientRotation(math.pi / 4) ) 复制代码

用它来设计SliverAppBar之类的小部件

AliverAppBar(     title: Text(widget.title),     flexibleSpace: FlexibleSpaceBar(         background: Container(             decoration: BoxDecoration(                 gradient: MyLinearGradient(),             ),         ).     ), ) 复制代码

或者将其包装在ShaderMask中的一些文本

ShaderMask(     shaderCallback: (bounds) =>          LinearGradient(             ...         ).createShader(             bounds,         ),     child: const Text(         'Hello Flutter World!,         style: TextStyle(             color: Colors.white,             fontSize: 48,             fontWeight: FontWeight.bold,         ),     ), ), 复制代码

如果想了解有关LinearGradient的内容，或者关于Flutter的其他功能

作者：程序员界的小学生
链接：https://juejin.cn/post/7170190767980281870