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…

Spark 3.3.x版本中Runtime Filter在非分区字段上的设计实现分析

文章目录 什么是Runtime FilterJOIN示例 Runtime Filter的作用Runtime Filter的分类分区字段的Filter表达式DynamicPruningSubquery 非分区字段的Filter表达式BloomFilterSubqueryInSubquery 在非分区字段上的Runtime Filter的生成过程插入Runtime Filter优化开始自底向上更新P…

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

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

什么影响网站的SEO排名

1.多IP多C段配置&#xff1a;海外站群服务器通常提供多IP多C段配置&#xff0c;这使得网站可以拥有多个独立的IP地址&#xff0c;有效避免同一IP下多个网站之间的关联性问题&#xff0c;降低被搜索引擎认为是站群作弊的风险。通过将不同的内容部署在不同的IP地址和C段上&#x…

SQL 视图:概念、应用与最佳实践

SQL 视图&#xff1a;概念、应用与最佳实践 SQL&#xff08;Structured Query Language&#xff09;视图是数据库管理中的一个重要概念&#xff0c;它允许用户以虚拟表的形式查看数据。视图在数据库中并不实际存储数据&#xff0c;而是提供了一个查询结果的快照&#xff0c;这…

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…

HTTP的初步了解

目录 前言 一、HTTP协议的基本概念 1.1、请求格式 1.2、响应格式 二、HTTP链接问题 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; HTTP协议是超文本传输协议 HTTP的短连接&#xff1a;建立连接——数据传输——关闭连接 HTTP的长连接&#xff1a;…

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

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

python openai 关于会话管理问题(一)

目录 一、会话长度 二、会话保持 三、上下文窗口管理 1、对话中token使用 2、截断策略 3、消息注释 一、会话长度 线程和消息表示助手和用户之间的会话会话。每个线程的消息限制为100,000条。一旦消息的大小超过了模型的上下文窗口,线程将尝试聪明地截断消息,然后再完…

如何在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用的比较少 想要把代码写…

C#实现简单的内存缓存

在开发过程中&#xff0c;我们经常需要使用缓存来提高应用程序的性能。本文将介绍如何使用C#实现一个简单的内存缓存系统&#xff0c;它模仿了Redis的部分基本功能 功能&#xff1a; 基本的键值存储支持过期时间支持泛型类型Hash 类型操作线程安全清理过期项 优点&#xff1…

Rust 力扣 - 54. 螺旋矩阵

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

企业项目开发的流程

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

简化应用程序日志记录

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

JVM问题排查分析

\1. 查询业务日志&#xff0c;可以发现这类问题&#xff1a;请求压力大、波峰、遭遇降级、熔断等等&#xff0c;基础服务、外部 API 依赖。 \2. 查看系统资源和监控信息&#xff1a; 硬件信息、操作系统平台、系统架构排查 CPU 负载内存不足磁盘使用量、硬件故障、磁盘分区用…