HarmonyOS鸿蒙开发入门,常用ArkUI组件学习(二)

书接上回,让我们继续来学习ArkUI的其他组件

目录,可以点击跳转到想要了解的组件详细内容

    • 组件四:Button
    • 组件五:Slider
    • 组件六: Column & Row
    • 组件七:循环控制
    • 组件八: List

组件四:Button

Button有三种类型提供给我们使用,如下:

Capsule:胶囊型按钮,默认样式;此类型按钮的圆角自动设置为高度的一半,不支持通过borderRadius属性重新设置圆角。

Circle:圆形按钮,不支持通过borderRadius属性重新设置圆角。

Normal:普通按钮(默认不带圆角),此类型的按钮默认圆角为0,支持通过borderRadius属性重新设置圆角。
在这里插入图片描述

组件五:Slider

Slider组件为滑动条,可快速调节设置值,如音量、亮度调节等
接口为:

Slider(options?: {value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis, reverse?: boolean})

在这里插入图片描述
注:OutSet:滑块在滑轨上
InSet:滑块在滑轨内

组件六: Column & Row

1 线性布局介绍

2 自适应拉伸

3 自适应缩放

4 定位方式

这个我会抽空单独出一篇博客,这里列个大纲,敬请期待

组件七:循环控制

在ArkTS开发中,我们使用ForEach / if-else 来控制页面的循环布局。

class Item {name: stringimage: ResourceStrprice: numberconstructor(name: string, image: ResourceStr, price: number){this.name = namethis.image = imagethis.price = price}
}
@Entry
@Component
struct Index {private items: Array<Item> = [new Item('os1',$r('app.media.hongmeng'),2000),new Item('os2',$r('app.media.hongmeng'),3000),new Item('os3',$r('app.media.hongmeng'),4000),new Item('os4',$r('app.media.hongmeng'),5000),new Item('os5',$r('app.media.hongmeng'),6000)]build() {Column({space:8}){Row(){Text('商品列表').fontSize(30).fontWeight(FontWeight.Bold)}.width('100%').margin({bottom: 20})// 循环控制ForEach(this.items,item=>{Row({space:10}){Image(item.image).width(100)Column({space: 4}){Text(item.name).fontSize(20).fontWeight(FontWeight.Bold)Text('¥' + item.price).fontSize(18).fontColor('#ff0000')}.height('100%').alignItems(HorizontalAlign.Start)}.width('100%').backgroundColor('#fff').borderRadius(20).height(120).padding(10)})}.width('100%').height('100%').backgroundColor('#efefef').padding(20)}
}

还可以使用if-else

if(判断条件){//内容}else{//内容}通过判断条件决定使用哪种方式渲染

组件八: List

在这里插入图片描述
List组件不仅可以设置主轴的方向,还可以设置交叉轴的布局方式、添加分割线、滚动条等,这些效果通过以下属性来实现
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/884634.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SqlSugar查询达梦数据库遇到的异常情况

使用SqlSugar连接达梦数据库&#xff0c;联查两张表的数据遇到的奇怪问题&#xff1a;同一套代码&#xff0c;在一个环境中可以正常查询并返回数据&#xff0c;但在另一环境中运行则查不到数据。在个人电脑上测试时也能正确运行&#xff0c;搞不清楚是怎么回事&#xff0c;特此…

ip地址分为几大类-IP和子网掩码对照表

一、IP地址的基本概念与分类 IP地址是用于在网络中标识每个设备的逻辑地址。互联网协议将IP地址分为A、B、C、D和E五类&#xff0c;其中A、B、C三类最常用&#xff0c;它们主要根据地址的首位位数以及用途进行划分。 A类地址&#xff1a; 范围&#xff1a;0.0.0.0 - 127.255.2…

【AI开源项目】Botpress - 开源智能聊天机器人平台及其部署方案

文章目录 Botpress 概述Botpress 的定位 Botpress 的主要特点1. OpenAI 集成2. 易于使用3. 定制和扩展性4. 多平台支持5. 集成和扩展 API6. 活跃的社区和详尽的文档 部署方案集成集成开发集成部署机器人示例开发工具代理本地开发先决条件从源代码构建 Botpress 如何解决常见问题…

JetPack Compose安卓开发之底部导航Tabbar

效果&#xff0c;页面切换 项目结构 TabBar.kt package com.weimin.strollerapp.components.tabbarimport androidx.compose.foundation.Image import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Column import androidx.compose.f…

SpringBoot应用:精品在线试题库的设计与实现

2 相关技术 2.1 Spring Boot框架简介 Spring Boot是由Pivotal团队提供的全新框架&#xff0c;其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置&#xff0c;从而使开发人员不再需要定义样板化的配置。通过这种方式&#xff0c;Sprin…

乐鑫esp32和esp32s3使用flash download tool V3.9.7工具下载固件的使用说明

使用esp32IDF工具编程后使用vscode内置的烧录工具&#xff08;火的图标按钮&#xff09;烧录是正常的&#xff0c;说明程序没有问题。 如果要使用flash download tool V3.9.7工具下载固件还是有些要注意的事项&#xff1a; 1.三个bin文件分别在&#xff1a; 第一个&#xff1a;…

如何在Linux系统中使用Apache HTTP Server

如何在Linux系统中使用Apache HTTP Server Apache简介 安装Apache 在Debian/Ubuntu系统中安装 在CentOS/RHEL系统中安装 启动Apache服务 验证Apache是否正在运行 访问Apache默认页面 配置Apache虚拟主机 创建虚拟主机配置文件 示例虚拟主机配置 创建网站根目录 准备静态网站内…

HTTP相关返回值异常原因分析,第二部分

今天我们讲讲HTTP相关返回值异常如何解决&#xff08;实例持续更新中&#xff09; 一、4xx状态码 这些状态码表示请求有问题&#xff0c;通常是由于客户端的错误引起的。 1.1 400 Bad Request: 请求格式不正确&#xff0c;服务器无法理解。 状态码400的含义&#xff1a; …

8、Node.js Express框架

五、Express框架 5.1概念 Express框架是一个基于Node.js平台的极简、灵活的WEB开发框架:www.express.com.cn 简单来说,Express是一个封装好的工具包,封装了很多功能,便于我们开发WEB应用 5.2安装 npm i express5.3 Express初体验 //01-express初体验.js //1.导入exrp…

学习笔记——三小时玩转JQuery

也可以使用在线版&#xff0c;不过在线版需要有网络&#xff0c;网不好的情况下加载也不好 取值的时候也是只会取到有样式的纯文本&#xff0c;不会取到标签&#xff0c;会取到标签效果 prepend和append这两个方法用的比较多&#xff0c;before和affter用的比较少 想要把代码写…

Rust 力扣 - 54. 螺旋矩阵

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 我们只需要一圈一圈的从外向内遍历矩阵&#xff0c;每一圈遍历顺序为上边、右边、下边、左边 我们需要注意的是如果上边与下边重合或者是右边与左边重合&#xff0c;我们只需要遍历上边、右边即可 题解代码 i…

企业项目开发的流程

一.立项阶段 1.市场调研 了解市场需求和竞争对手情况。全面的市场调研分析报告。 用户调研&#xff1a;产品组针对目标用户进行定量和定性的调查&#xff0c;了解其需求和行为习惯&#xff0c;为产品的功能和设计方向提供依据。 举例&#xff1a;终端管家.用户分为商户和渠…

简化应用程序日志记录

什么是应用程序日志 应用程序日志是存储有关应用程序中发生的事件的信息的文件。应用程序日志包含以下信息&#xff1a; 用户活动&#xff0c;例如登录、注销、页面查看和搜索查询。应用程序错误&#xff0c;例如异常和崩溃。安全事件&#xff0c;例如登录尝试失败和可疑流量…

VR 创业之路:从《I Expect You To Die》到未来展望

今年是 Reality Labs 成立 10 周年&#xff0c;Meta 每周都会与不同的 XR 先驱进行交流&#xff0c;探讨他们在行业中的经历、经验教训以及对未来的展望。本次&#xff0c;他们与游戏设计师、作家兼 Schell Games CEO Jesse Schell 进行了深入交谈&#xff0c;了解了他的个人故…

【098】基于SpringBoot+Vue实现的垃圾分类系统

系统介绍 视频演示 基于SpringBootVue实现的垃圾分类系统 基于SpringBootVue实现的垃圾分类系统设计了三种角色、分别是管理员、垃圾分类管理员、用户&#xff0c;实现了个人中心、用户管理、垃圾分类管理员管理、垃圾分类管理、垃圾类型管理、垃圾图谱管理、系统管理等功能 …

C++和OpenGL实现3D游戏编程【连载17】——着色器进阶

欢迎来到zhooyu的专栏。 主页网址&#xff1a;【zhooyu】 专栏网址&#xff1a;【C和OpenGL实现3D游戏编程】 &#x1f31f;&#x1f31f;&#x1f31f;这里将通过一个OpenGL实现3D游戏编程实例教程&#xff0c;带大家深入学习OpenGL知识。知识无穷而人力有穷&#xff0c;希望…

前端技术月刊-2024.11

本月技术月刊聚焦于前端技术的最新发展和业务实践。业界资讯部分&#xff0c;React Native 0.76 版本发布&#xff0c;带来全新架构&#xff1b;Deno 2.0 和 Node.js 23 版本更新&#xff0c;推动 JavaScript 生态进步&#xff1b;Flutter 团队规模缩减&#xff0c;引发社区关注…

定制化视频生成新模范!零样本主体驱动,精确运动控制!复旦阿里等发布DreamVideo-2

文章链接&#xff1a;https://arxiv.org/pdf/2410.13830 项目链接&#xff1a;https://dreamvideo2.github.io/ 亮点直击 DreamVideo-2&#xff0c;首个无需微调&#xff0c;同时支持主体定制和运动控制的零样本视频定制框架&#xff0c;能够通过设计的参考注意力学习主体外观&…

mysql--多表查询

一、联合查询 作用&#xff1a;合并结果集就是把两个select语句的查询结果合并到一起&#xff01; 合并结果集有两种方式&#xff1a; UNION&#xff1a;合并并去除重复记录&#xff0c;例如&#xff1a;SELECT * FROM t1 UNION SELECT * FROM t2&#xff1b; UNION ALL&a…

PHP图书馆借阅管理系统-计算机毕业设计源码01649

基于HTML5CSS的图书馆借阅管理系统的设计与实现 摘 要 随着互联网大趋势的到来&#xff0c;社会的方方面面&#xff0c;各行各业都在考虑利用互联网作为媒介将自己的信息及时有效地推广出去&#xff0c;而其中最好的方式就是建立网络管理系统&#xff0c;并对其进行信息管理。本…