如何实现背景颜色渐变效果

您所在的位置：网站首页 › flash怎么颜色渐变 › 如何实现背景颜色渐变效果

如何实现背景颜色渐变效果

2024-06-01 18:16| 来源: 网络整理| 查看: 265

如何实现背景颜色渐变效果

纯色背景会略显单调，本文介绍 flutter 中如何实现背景颜色渐变效果。

1. LinearGradient

Gradient 用来实现 flutter 里的渐变，它有以下几种实现：LinearGradient、SweepGradient 和 RadialGradient 。本文使用 LinearGradient 来实现渐变效果。

LinearGradient 的构造函数如下，begin和end两个参数表示渐变开始和结束的地方，可以用它们来指定渐变的方向：如果希望水平方向，则从 topLeft 到 topRight；如果希望竖直方向，则从 topLeft 到 bottomLeft 。除了使用 Alignment 里定义的常量外，也可以使用 FractionalOffset 指定任意的位置。

LinearGradient({AlignmentGeometry begin = Alignment.centerLeft, AlignmentGeometry end = Alignment.centerRight, required List colors, List? stops, TileMode tileMode = TileMode.clamp, GradientTransform? transform})

colors是一个颜色数组，用来指定渐变使用的颜色。stops也是一个数组，它和颜色数组的长度一样，取值范围为[0,1]，用来表示对应每个颜色的分数。以本文红蓝渐变为例，colors的数组如下,红色在前，蓝色在后。如果设置stops值为[0.2,0.8]，则表示[0,0.2]之间为纯红色，[0.2,0.8]之间为红蓝渐变，[0.8,1]为纯蓝色。

colors: [Colors.red, Colors.blue]

如果设置起点是 topLeft，终点是 bottomRight，stops设置为[0.5,0.5]，还能得到下面效果。

tileMode用来指定如何填充begin之前和end之后的内容，加入想要实现下图中的对称效果，可以将开始设置为topCenter，结束设置为topRight，tileMode设置为TileMode.mirror。

decoration: const BoxDecoration( gradient: LinearGradient( colors: [Colors.red, Colors.blue], begin: Alignment.topCenter, end: Alignment.topRight, stops: [0, 1], tileMode: TileMode.mirror)) 2. 完整代码import 'package:flutter/material.dart';import 'package:google_fonts/google_fonts.dart';void main(List args) { runApp(const MaterialApp( title: "Planets", home: HomePage(), ));}class HomePage extends StatelessWidget { const HomePage({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return SafeArea( child: Scaffold( appBar: AppBar( leading: IconButton( icon: const Icon(Icons.menu), onPressed: () {}, ), flexibleSpace: Container( decoration: const BoxDecoration( gradient: LinearGradient( colors: [Colors.red, Colors.blue], begin: Alignment.topLeft, end: Alignment.bottomRight, stops: [0.5, 0.5], tileMode: TileMode.clamp)), ), title: Center( child: Text( "Gradient", style: GoogleFonts.poppins( fontWeight: FontWeight.w600, fontSize: 36.0), ), ), actions: [ IconButton(onPressed: () {}, icon: const Icon(Icons.settings)) ], ), body: Container(), ), ); }}

署名-非商业性使用-禁止演绎 4.0 国际

【本文地址】

如何实现背景颜色渐变效果

如何实现背景颜色渐变效果

今日新闻

推荐新闻