Flutter Widget 之LinearGradient

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

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

你可以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的其他功能，请访问flutter.dev

原文翻译自视频：视频地址