企业网站实施方案漫画网站模板

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

企业网站实施方案,漫画网站模板,wordpress文件上传下载,分类信息网站发布标题目录 #x1f60b;环境配置#xff1a;华为HarmonyOS开发者 #x1f4fa;演示效果#xff1a; #x1f4d6;实验步骤及方法#xff1a; 一、在media文件夹中添加想要使用的图片素材​ 二、在entry/src/main/ets/page目录下创建Welcome.ets文件

1. 整体结构与组件声…目录 环境配置华为HarmonyOS开发者 演示效果 实验步骤及方法 一、在media文件夹中添加想要使用的图片素材​ 二、在entry/src/main/ets/page目录下创建Welcome.ets文件
2. 整体结构与组件声明
3. 状态变量声明
4. 页面显示onPageShow方法
5. 视图构建部分build 方法 1扫描渐变sweepGradient效果 5.其他内容部分 1空白元素Blank 2文本元素Text 3图像元素Image 实验小结 环境配置华为HarmonyOS开发者 学习小目标实现如下的欢迎界面应用启动加载页 演示效果 ​ 实验步骤及方法 一、在media文件夹中添加想要使用的图片素材 二、在entry/src/main/ets/page目录下创建Welcome.ets文件 界面的实现代码如下 Entry Component Preview struct Welcome{State opacityValue: number 0.3;onPageShow(): void {this.opacityValue 1}build() {Column(){Blank()Blank()Column(){Text(奇怪的知识).fontColor(Color.Gray).fontSize(36).fontWeight(FontWeight.Bold)}.alignItems(HorizontalAlign.Start).opacity(this.opacityValue).alignItems(HorizontalAlign.Start).opacity(this.opacityValue).animation({duration:2000,iterations:1,onFinish: (){}})Blank()Column() {Image(\(r(app.media.smartCat)).width(200)}.alignItems(HorizontalAlign.Start).opacity(this.opacityValue).alignItems(HorizontalAlign.Start).opacity(this.opacityValue).animation({duration:2000,iterations:1,onFinish: (){}})Blank()Column() {Text(增加了!).fontColor(Color.White).fontSize(36).fontWeight(FontWeight.Bold)}.alignItems(HorizontalAlign.Start).opacity(this.opacityValue).alignItems(HorizontalAlign.Start).opacity(this.opacityValue).animation({duration:1500,iterations:10,onFinish: (){}})Blank()Blank()Blank()Column() {Image(\)r(app.media.RossyYan)).width(200).opacity(0.15)}}.width(100%).height(100%).sweepGradient({center: [180,327],start: 0,end: 359,rotation: 45, // 旋转角度repeating: true, // 渐变颜色是否重复colors: [[0x0E0B0B, 0.0], [0x81817D, 0.3], [0x020202, 0.5]] // 数组末尾元素占比小于1时满足重复着色效果})} } 以下是对这段代码的详细讲解 1. 整体结构与组件声明 Entry、Component、Preview 注解装饰器 Entry 通常用于标识这个组件是整个应用程序的入口组件意味着程序启动时可能会首先展示这个组件所定义的界面内容。Component 表明这是一个可复用的组件它可以被组合到其他更复杂的界面结构中符合组件化开发的理念。Preview 往往用于在开发工具中提供组件的预览功能方便开发者快速查看组件呈现的样子而无需完整启动整个应用程序。 Welcome 结构体定义了一个名为 Welcome 的结构体它代表了整个界面组件的逻辑和视图结构。 2. 状态变量声明 State opacityValue: number 0.3;这里使用 State 装饰器声明了一个名为 opacityValue 的状态变量类型为数字number初始值被设置为 0.3。在响应式编程框架中状态变量的变化会触发界面的重新渲染以便更新相应的显示效果比如这里会影响后续一些视图元素的透明度相关表现。 3. 页面显示onPageShow方法 onPageShow(): void {this.opacityValue 1 }定义了 onPageShow 方法它很可能是在页面显示比如初次加载、从后台切换到前台等触发页面可见的情况时被调用的回调函数。在这个函数中将 opacityValue 的值修改为 1这意味着页面显示时会改变相关元素的透明度情况后续使用该变量控制透明度的视图元素会有相应变化。 4. 视图构建部分build 方法 build() {Column(){// 内部视图元素}.width(100%).height(100%).sweepGradient({// 渐变相关配置}) }build 方法用于构建组件的视图层级结构。整体上是一个垂直方向排列的 Column列布局占据父容器的 100% 宽度和 100% 高度通过 .width(100%).height(100%) 设置。 1扫描渐变sweepGradient效果 设置了一个扫描渐变sweepGradient效果相关配置如下 center指定了渐变的中心坐标为 [180, 327]决定了渐变的起始位置参照点。start 和 end分别定义了渐变的起始角度0和结束角度359意味着渐变会绕着中心旋转一圈覆盖整个范围。rotation设置了额外的旋转角度为 45 度进一步调整渐变的呈现效果。repeating设置为 true表明渐变颜色会重复显示营造出一种循环的渐变效果。colors定义了渐变的颜色数组包含了三个颜色元素每个元素是一个包含颜色值十六进制表示如 0x0E0B0B 等和占比如 0.0、0.3、0.5的数组末尾元素占比小于 1 时满足重复着色效果从而实现渐变的色彩过渡和循环效果。 5.其他内容部分 1空白元素Blank 多次出现了 Blank()从名字推测可能是用于占位、增加间距等作用的空白视图不过具体功能还得看对应框架中 Blank 组件的实际定义。 2文本元素Text Text(奇怪的知识).fontColor(Color.Gray).fontSize(36).fontWeight(FontWeight.Bold)这是一个显示文本的视图文本内容为 “奇怪的知识”设置了字体颜色为灰色Color.Gray字体大小为 36字体加粗FontWeight.Bold并且其透明度受 opacityValue 状态变量控制同时还添加了一个动画效果动画相关配置如下 .animation({duration:2000,iterations:1,onFinish: (){} })意味着这个文本元素在显示时有一个时长为 2000 毫秒2 秒的动画过程动画仅执行一次iterations: 1当动画结束时执行 onFinish 回调函数这里函数体为空可能根据实际需求补充相应逻辑。 类似的还有另外两个文本元素 Text(增加了!).fontColor(Color.White).fontSize(36).fontWeight(FontWeight.Bold)这个文本显示 “增加了”字体颜色为白色字体大小等设置与之前类似不过动画配置有所不同时长为 1500 毫秒1.5 秒且会重复执行 10 次iterations: 10。 3图像元素Image 有两处使用了 Image 来显示图片 Image(\(r(app.media.smartCat)).width(200)这是加载一张图片通过 \)r(app.media.smartCat) 这种资源引用方式具体取决于对应框架的资源管理机制并设置图片宽度为 200 单位具体单位也看框架默认设置可能是像素等其透明度同样受 opacityValue 状态变量控制也有一个时长 2000 毫秒、执行一次的动画效果。 还有 Image(\(r(app.media.RossyYan)).width(200).opacity(0.15)加载另一张图片\)r(app.media.RossyYan)宽度设置为 200并且初始透明度被设置为 0.15不过这里没有看到额外的动画效果添加到这个特定的图片元素上与前面带动画的元素对比而言。 实验小结 在本次对 Welcome 组件的探索过程中虽略有收获但深知仍有漫漫长路要走。 从代码架构层面而言Entry 指明入口、Component 助力复用、Preview 便于预览只是初窥门径为开发流程带来些许便利。State 变量操控元素透明度在页面加载时有了初步动态呈现尚不算精巧。Column 布局结合渐变背景安置文本、图像勉强构建出可用界面。动画增添几分生气可提升空间巨大。尤其动画回调与 Blank 组件细节粗糙后续定当潜心钻研力求精进。