arkUI:设置随机颜色背景

embedded/2024/11/19 11:31:33/

arkUI:设置随机颜色背景

  • 1 主要内容说明
  • 2 相关内容
    • 2.1 设置随机颜色背景
      • 2.1.1 源码1的相关说明
      • 2.1.2 源码1 (设置随机颜色背景)
      • 2.1.3 源码1运行效果
  • 3.结语
  • 4.定位日期

1 主要内容说明

本文代码实现了一个展示随机颜色的页面,主要包含两个部分:十六进制颜色和 RGB 颜色的按钮。通过 Grid 布局,按钮显示在网格中,每个按钮都有不同的背景颜色。

2 相关内容

2.1 设置随机颜色背景

  • 创建一个arr 数组包含了数字 1 到 12,作为按钮的文本。每个数字对应一个按钮,按钮的背景颜色通过调用 getHexColor 或 getRGBColor 函数生成,分别返回随机的十六进制颜色和 RGB 颜色。这样每次加载页面时,按钮的颜色都是随机生成的。
  • 在布局上,Grid 布局被用来将这些按钮分布在网格中。每行包含 3 个按钮,列数为 4。通过 rowsTemplate 和 columnsTemplate 设置了网格的行列分布方式,确保了按钮的整齐排列。

2.1.1 源码1的相关说明

  • arr 数组:包含 1 至 12 的数字,作为按钮显示的文本内容。
  • Grid 布局:创建了两个网格布局,一个用于展示随机的十六进制颜色,另一个用于展示随机的 RGB 颜色。
  • getHexColor 和 getRGBColor 函数:分别用来生成随机的十六进制颜色和 RGB 颜色。
  • Button 组件:每个按钮会显示对应的数字,背景颜色是通过随机函数生成的颜色。

2.1.2 源码1 (设置随机颜色背景)

@Entry
@Component
struct PageColor {arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]  // 数据数组,包含1-12的数字build() {// Column 布局容器Column() {// 显示标题:十六进制随机颜色Text("十六进制随机颜色").fontSize(30)// 创建第一个网格布局,用于显示十六进制颜色的按钮Grid() {// 遍历数据数组,生成按钮ForEach(this.arr, (item: number) => {GridItem() {// 每个按钮显示对应的数字,并且背景颜色是随机生成的十六进制颜色Button(item.toString()) // 显示数字.height(50) // 设置按钮高度.aspectRatio(1) // 设置宽高比为1,保持按钮的正方形.borderRadius(20) // 设置圆角.backgroundColor(getHexColor()) // 设置背景颜色为随机十六进制颜色}})}.rowsTemplate("1fr 1fr 1fr") // 设置行的布局模板.columnsTemplate("1fr 1fr 1fr 1fr") // 设置列的布局模板.backgroundColor("#fcc") // 背景颜色.width("100%") // 设置网格的宽度为100%.height(300) // 设置网格的高度为300px// 添加一个红色分隔线Divider().height(20) // 高度20px.color("red") // 红色分隔线// 显示标题:rgb随机颜色Text("rgb随机颜色").fontSize(30)// 创建第二个网格布局,用于显示RGB颜色的按钮Grid() {// 遍历数据数组,生成按钮ForEach(this.arr, (item: number) => {GridItem() {// 每个按钮显示对应的数字,并且背景颜色是随机生成的RGB颜色Button(item.toString()) // 显示数字.height(50) // 设置按钮高度.aspectRatio(1) // 设置宽高比为1,保持按钮的正方形.borderRadius(20) // 设置圆角.backgroundColor(getRGBColor()) // 设置背景颜色为随机RGB颜色}})}.rowsTemplate("1fr 1fr 1fr") // 设置行的布局模板.columnsTemplate("1fr 1fr 1fr 1fr") // 设置列的布局模板.backgroundColor("#fcc") // 背景颜色.width("100%") // 设置网格的宽度为100%.height(300) // 设置网格的高度为300px}.height('100%') // 设置整个页面的高度为100%.width('100%') // 设置整个页面的宽度为100%}
}// 十六进制随机颜色生成函数
// 256 * 256 * 256 = 16777216,十六进制颜色总数
export function getHexColor() {return "#" + Math.floor(Math.random() * 16777215).toString(16); // 生成随机颜色并转为十六进制
}// RGB随机颜色生成函数
export function getRGBColor() {// 生成随机的红、绿、蓝三色值,每个色值范围在0到255之间const red = Math.floor(Math.random() * 256);const green = Math.floor(Math.random() * 256);const blue = Math.floor(Math.random() * 256);// 返回符合RGB格式的颜色字符串return `rgb(${red},${green},${blue})`;
}

2.1.3 源码1运行效果

  • 随机运行效果一次
    在这里插入图片描述

  • 随机运行效果一次
    在这里插入图片描述

  • 随机运行效果一次
    在这里插入图片描述

3.结语

随机的内容都会用到数学方法Math.random(),0~1的随机数,通过各种数学方法,得到随机的参数值。
由于笔者的能力有限,创作的内容有所不足在所难免,也敬请读者包涵和指出,万分感谢!

4.定位日期

2024-11-18;
22:01;


http://www.ppmy.cn/embedded/138753.html

相关文章

kubeadm安装k8s

kubeadm安装k8s 环境配置 主节点 k8s-master :4核8G、40GB硬盘、CentOS7.9 从节点 k8s-node1: 4核8G、40GB硬盘、CentOS7.9 从节点 k8s-node2: 4核8G、40GB硬盘、CentOS7.9 初始化配置 关闭selinux、swap # 关闭 Selinux:防止服务可能无法启动(企业中基本上都会选择关闭)…

【鸿蒙开发】第十九章 Media媒体服务 --- 音频播放和录制

目录 1 AVPlayer音频播放 1.1 开发步骤及注意事项 1.2 完整示例 2 SoundPool音频播放 2.1 开发步骤及注意事项 2.2 完整示例 3 AVRecorder音频录制 3.1 开发步骤及注意事项 3.2 完整示例 4 音视频元数据获取 4.1 开发步骤及注意事项 4.2 完整示例 1 AVPlayer音频播…

Fisher矩阵和Hessian矩阵的关系:证明Fisher为负对数似然函数的Hessian的期望

证明Fisher等于Expectation of Hessian of Negative log likelihood. 符号约定 f θ ( ⋅ ) f_{\theta}(\cdot) fθ​(⋅): 概率密度 p ( x ∣ θ ) p θ ( x ) ∏ i N f θ ( x i ) p(x|\theta) p_{\theta}(x) \prod\limits_i^N f_{\theta}(x_i) p(x∣θ)pθ​(x)i∏N​…

Debezium-EmbeddedEngine

提示:一个嵌入式的Kafka Connect源连接器的工作机制 文章目录 前言一、控制流图二、代码分析 1.构造函数2.完成回调3.连接器回调4.RUN总结 前言 工作机制: * 独立运行:嵌入式连接器在应用程序进程中独立运行,不需要Kafka、Kafka C…

Docker:技术架构的演进之路

前言 技术架构是指在软件开发和系统构建中,为了满足业务需求和技术要求,对系统的整体结构、组件、接口、数据流以及技术选型等方面进行的详细设计和规划。它是软件开发过程中的重要组成部分,为开发团队提供了明确的指导和规范,确…

阿里云SSL证书每三个月过期续期方法 —— 使用httpsok工具轻松自动续期

阿里云作为全球领先的云计算服务提供商,提供了SSL证书服务,可以为网站启用HTTPS加密,确保数据传输的安全。然而,许多人在使用阿里云SSL证书时可能会遇到一个问题:阿里云免费SSL证书每三个月就会过期,需要及…

开源项目低代码表单设计器FcDesigner扩展自定义组件

开源项目低代码表单设计器FcDesigner中的通过将自定义组件集成到设计器中,您可以添加额外的界面元素和功能,从而增强设计器的适用性和灵活性。以下是详细步骤,以帮助您创建、导入、注册和配置自定义组件。 源码地址: Github | Gitee | 文档 …

用DMA来自动控制PWM的输出(音频输出,交直流转换)

一、前提分析 举例:一首歌所包含的音阶有高有低,而按照某种编曲的顺序排列也就对应了不同的频率(五线谱:1234567 对应的音阶各不相同)所以频率可以理解为它的源头。频率的来源又可由PWM来控制故而一首歌所包含的频率序…