当前位置: 首页 > news >正文

第一百七十五回 如何创建放射形状渐变背景

文章目录

  • 1. 概念介绍
  • 2. 实现方法
  • 3. 代码与效果
    • 3.1 示例代码
    • 3.2 运行效果
  • 4. 内容总结

我们在 上一章回中介绍了"如何创建扇形渐变背景"相关的内容,本章回中将介绍" 如何创建放射形状渐变背景"。闲话休提,让我们一起Talk Flutter吧。

1. 概念介绍

我们在本章回中介绍的放射形状渐变背景是指整个页面或者部分页面为渐变色,渐变色以某个点为中心,从中心向四周呈放射形状排列。这么介绍可能比较抽象,大家可以想象一下生活中的水波纹效果或者先观看后面小节中的程序运行效果图,从图中可以直观地看到放射形状渐变背景真实的效果。本章回中将介绍如何创建放射形状渐变背景。

2. 实现方法

创建渐变色需要使用BoxDecoration组件,该组件的gradient属性主要用来控制渐变效果,我们只需要把渐变色赋值给gradient属性就可以。如何创建渐变色呢?这时需要使用RadialGradient组件,该组件提供了相关的属性来控制渐变色的效果。下面是该组件中常用的属性:

  • colors属性:该属性用来存放渐变效果中使用的颜色,它可存放多个颜色;
  • center属性:该属性主要用来控制放射形状的中心位置;
  • radius属性:访属性主要用来控制放射形状的半径大小;
  • tileMode:该用来用来控制渐变方式;

上面介绍的这些属性中,第一个属性是必选属性,其它属性都是可选属性。这些属性主要用来控制渐变的方式,进而实现不同的放射形状渐变效果。

这些属性中需要注意下radius属性的值,它的值最好不太超过背景的大小,否则放射形状不能被完整地显示出来。

渐变色创建后还需要把它放到背景中,我们使用Container组件来存当背景,该组件提供了decoration属性来控制背景效果,把刚才创建的背景色赋值给该属性就可以。至此,带有放射形状渐变色的背景就创建好了。稍后,我们将通过示例代码来演示具体的实现方法。

3. 代码与效果

3.1 示例代码

///放射形渐变
Container(width: double.infinity,height: 100,decoration: const BoxDecoration(gradient: RadialGradient(colors: [Colors.greenAccent,Colors.redAccent,Colors.amberAccent])),child: const SizedBox.shrink(),
),
const Spacer(),
Container(width: double.infinity,height: 100,decoration: const BoxDecoration(gradient:RadialGradient(///渐变半径:radius: 0.3,//渐变位置,主要是中心位置center: Alignment.center,tileMode: TileMode.repeated,colors: [Colors.greenAccent,Colors.redAccent,Colors.amberAccent])),child: const SizedBox.shrink(),
),

上面的示例代码中添加了相关的注释,这样方便大家理解代码。示例代码创建了两个渐变色背景,一个是默认的放射形状渐变色背景,另外一个是修改了渐变方式的放射形状渐变色背景。此外,背景的大小可以通过Container组件的width和height属性来控制。

3.2 运行效果

编译并且运行上面的示例代码可以得到下面的运行效果图。图中上方的图形是默认的放射形状渐变色背景效果,下方的图形是修改了渐变方式的放射形状渐变色背景效果。强烈建议大家自己动手去实践,通过修改RadialGradient组件的属性可以创建出不同的放射形状渐变效果。

在这里插入图片描述

4. 内容总结

最后,我们本章回的内容做一个全面的总结:

  • 创建渐变色需要使用BoxDecoration组件和RadialGradient组件;
  • RadialGradient组件提供了多种属性来控制放射形状渐变效果;
  • 使用Container组件可以充当渐变色的背景;
  • 把渐变色和背景组合在一下就形成了渐变色背景;

看官们,与"如何创建放射形状渐变背景"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

相关文章:

第一百七十五回 如何创建放射形状渐变背景

文章目录 1. 概念介绍2. 实现方法3. 代码与效果3.1 示例代码3.2 运行效果 4. 内容总结 我们在 上一章回中介绍了"如何创建扇形渐变背景"相关的内容,本章回中将介绍" 如何创建放射形状渐变背景"。闲话休提,让我们一起Talk Flutter吧…...

vue实现调用手机拍照、录像功能

目录 前言 准备工作 在这个示例中,我们将使用Vue.js框架来实现我们的目标。如果你还不熟悉Vue.js,推荐先学习一下Vue.js的基础知识。 接下来,我们需要创建一个基于Vue.js的项目。你可以使用Vue CLI来创建一个全新的Vue项目:# 安…...

WPF播放视频

在WPF中&#xff0c;你可以使用MediaElement来播放本地视频。下面是一个简单的例子&#xff1a; <Window x:Class"WPFVideoPlayer.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsof…...

交换机如何配置BGP协议

环境&#xff1a; 华为交换机 华三交换机 问题描述&#xff1a; 交换机如何配置BGP协议 解决方案&#xff1a; 华三交换机上配置案例 1.配置BGP协议&#xff0c;可以按照以下步骤进行&#xff1a; 登录交换机&#xff1a;使用SSH、Telnet或控制台等方式登录到华三交换…...

精通Nginx(14)-配置HTTPS

HTTPS是在 HTTP 协议的基础上使用 TLS/SSL 加密,其主要目标是提高数据传输的安全性。从HTTP2.0开始,HTTPS已经是网站的标准协议,很多开放平台非HTTPS不能访问。Nginx为HTTPS提供了强大的支持,且对应用服务器是完全透明的。 目录 SSL/TLS基础 发展历史 TLS握手过程 加密…...

封装一个简单的table组件

子组件 <template> <el-table :data"tableData" :headers"tableHeaders" style"width: 100%"> <el-table-column v-for"header in tableHeaders" :key"header.prop" :label"header.label" :pro…...

Avalonia UI框架介绍

Avalonia UI是一个跨平台的UI框架&#xff0c;它允许开发者使用XAML和C#语言创建可在多个平台上运行的应用程序&#xff0c;包括Windows、Linux、macOS等。Avalonia UI与WPF非常相似&#xff0c;但是它是开源的&#xff0c;并且更加灵活。 下面是一个简单的Avalonia UI应用程序…...

【入门篇】1.3 redis客户端之 jedis 高级使用示例

文章目录 0.前言1. 发布和订阅消息2. 事务操作3. 管道操作4. jedis 支持哨兵模式5. jedis 支持集群模式5. 参考链接 0.前言 Jedis是Redis的Java客户端&#xff0c;它支持所有的Redis原生命令&#xff0c;使用方便&#xff0c;且可以与Java项目无缝集成。 该库的最新版本支持Re…...

使用CXF调用WSDL(二)

简介 本篇文章主要解决了上篇文章中遗留的对象嵌套问题&#xff0c;要想全面解析无限极的对象嵌套需要使用递归去解决 上文链接&#xff1a; 使用CXF调用WSDL&#xff08;一&#xff09; 上文回顾 上文使用了单方法“ call() ”解决了List和基本类型&#xff08;含String&…...

list.toArray

直接去看原文 原文链接:List的toArray()方法_list.toarray-CSDN博客 -------------------------------------------------------------------------------------------------------------------------------- toArray()介绍 toArray()方法是List接口中提供的方法&#xff…...

2013年11月10日 Go生态洞察:Go语言四周年回顾

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…...

Ubuntu上使用SSH连接到CentOS系统

确保CentOS系统上的SSH服务器已安装并正在运行&#xff1a; 在CentOS上&#xff0c;默认情况下&#xff0c;SSH服务器&#xff08;sshd&#xff09;应该已安装并正在运行。如果不确定&#xff0c;可以通过以下方式检查&#xff1a; sudo systemctl status sshd如果未安装&…...

【知识增强】A Survey of Knowledge-Enhanced Pre-trained LM 论文笔记

A Survey of Knowledge-Enhanced Pre-trained Language Models Linmei Hu, Zeyi Liu, Ziwang Zhao, Lei Hou, Liqiang Nie, Senior Member, IEEE and Juanzi Li 2023年8月的一篇关于知识增强预训练模型的文献综述 论文思维导图 思维导图网页上看不清的话&#xff0c;可以存…...

shell脚本之函数

快捷查看指令 ctrlf 进行搜索会直接定位到需要的知识点和命令讲解&#xff08;如有不正确的地方欢迎各位小伙伴在评论区提意见&#xff0c;博主会及时修改&#xff09; 函数 一&#xff0c;什么是函数 函数是一段功能代码,用来解决shell编程中冗余代码[重复且不连续出现的功能…...

订水商城实战教程10-宫格导航

上一篇我们介绍了跑马灯的功能&#xff0c;这一篇就进入到我们的主体部分开发。在订水商城业务中可以按照分类查询商品信息&#xff0c;这就涉及到数据源的拆分。 我们在数据源的设计中区分为主子表&#xff0c;主表呢存储唯一的记录&#xff0c;子表的记录可以重复&#xff0…...

【C++11】lambda表达式 | 包装器

文章目录 一、 lambda表达式lambda表达式的引入lambda表达式的语法lambda表达式与函数对象lambda表达式的捕捉列表 二、包装器function包装器bind包装器 一、 lambda表达式 lambda表达式的引入 在C98中&#xff0c;为了替代函数指针&#xff0c;C设计出了仿函数&#xff0c;也…...

网络安全准入技术之MAC VLAN

网络准入控制作为主要保障企业网络基础设施的安全的措施&#xff0c;特别是对于中大型企业来说&#xff0c;终端类型多样数量激增、终端管理任务重难度大、成本高。 在这样的一个大背景下&#xff0c;拥有更灵活的动态识别、认证、访问控制等成为了企业网络安全的最核心诉求之…...

MyBatis 操作数据库

文章目录 1. 什么是MyBatis&#xff1f;2. 入门MyBatis2.1 准备工作2.2.1 创建springboot项目2.2.2 数据准备 2.2 配置数据库连接2.3 写持久层代码2.4 单元测试2.4.1 web测试2.4.2 自动测试 1. 什么是MyBatis&#xff1f; MyBatis是一种持久层框架&#xff0c;用于简化JDBC的开…...

设计模式 -- 建造者模式(Builder Pattern)

这个模式以前也义Android-kotlin的场景下讲过 Android 用建造者模式模式写一个Dialog-CSDN博客 不过用的是 变种的建造者模式 建造者模式&#xff1a; 属于创建型模式 提供了一种创建对象的最佳方式&#xff0c; 使用多个简单的对象一步一步构建成一个复杂的对象 。 介绍 意图…...

如何下载 Apache + PHP + Mysql 集成安装环境并结合内网穿透工具实现公网访问内网服务

&#x1f308;个人主页&#xff1a;聆风吟 &#x1f525;系列专栏&#xff1a;网络奇遇记、Cpolar杂谈 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 &#x1f4cb;前言一. WampServer下载安装二. WampServer启动三. 安装cpolar内网穿透3.1 注册账号…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

uniapp 小程序 学习(一)

利用Hbuilder 创建项目 运行到内置浏览器看效果 下载微信小程序 安装到Hbuilder 下载地址 &#xff1a;开发者工具默认安装 设置服务端口号 在Hbuilder中设置微信小程序 配置 找到运行设置&#xff0c;将微信开发者工具放入到Hbuilder中&#xff0c; 打开后出现 如下 bug 解…...

客户案例 | 短视频点播企业海外视频加速与成本优化:MediaPackage+Cloudfront 技术重构实践

01技术背景与业务挑战 某短视频点播企业深耕国内用户市场&#xff0c;但其后台应用系统部署于东南亚印尼 IDC 机房。 随着业务规模扩大&#xff0c;传统架构已较难满足当前企业发展的需求&#xff0c;企业面临着三重挑战&#xff1a; ① 业务&#xff1a;国内用户访问海外服…...

聚六亚甲基单胍盐酸盐市场深度解析:现状、挑战与机遇

根据 QYResearch 发布的市场报告显示&#xff0c;全球市场规模预计在 2031 年达到 9848 万美元&#xff0c;2025 - 2031 年期间年复合增长率&#xff08;CAGR&#xff09;为 3.7%。在竞争格局上&#xff0c;市场集中度较高&#xff0c;2024 年全球前十强厂商占据约 74.0% 的市场…...

【51单片机】4. 模块化编程与LCD1602Debug

1. 什么是模块化编程 传统编程会将所有函数放在main.c中&#xff0c;如果使用的模块多&#xff0c;一个文件内会有很多代码&#xff0c;不利于组织和管理 模块化编程则是将各个模块的代码放在不同的.c文件里&#xff0c;在.h文件里提供外部可调用函数声明&#xff0c;其他.c文…...

李沐--动手学深度学习--GRU

1.GRU从零开始实现 #9.1.2GRU从零开始实现 import torch from torch import nn from d2l import torch as d2l#首先读取 8.5节中使用的时间机器数据集 batch_size,num_steps 32,35 train_iter,vocab d2l.load_data_time_machine(batch_size,num_steps) #初始化模型参数 def …...