学习鸿蒙基础(10)

目录

一、轮播组件 Swiper

二、列表-List

 1、简单的List

2、嵌套的List

三、Tabs容器组件

1、系统自带tabs案例

2、自定义导航栏:


一、轮播组件 Swiper
@Entry
@Component
struct PageSwiper {@State message: string = 'Hello World'private SwCon: SwiperController = new SwiperController()build() {Column() {Swiper(this.SwCon) {Text("龙").backgroundColor(Color.Red).textStyle()Text("兔").backgroundColor(Color.Yellow).textStyle()Text("神").backgroundColor(Color.Orange).textStyle()}// .autoPlay(true).interval(2000).indicatorStyle({color: Color.White,selectedColor: Color.Pink,size: 20}).onChange(index=>{console.log(`${index}`)})// .vertical(true)Row() {Button("上一个").onClick(v => {this.SwCon.showPrevious();}).margin({ top: 10, right: 10 })Button("下一个").onClick(v => {this.SwCon.showNext()}).margin({ left: 10, top: 10 })}.width("100%").justifyContent(FlexAlign.Center)}.height('100%')}
}@Extend(Text) function textStyle() {.width("100%").height(200)
}
二、列表-List

列表是一种复杂的容器,当列表项达到一定数量,内容超过屏幕大小时,可以自动提供滚动功能。它适合用于呈现同类数据类型或数据类型集,例如图片和文本。在列表中显示数据集合是许多应用程序中的常见要求(如通讯录.音乐列表、购物清单等)。
ListltemGroup用于列表数据的分组展示,其子组件也是Listltem。Listltem表示单个列表项,可以包含单个子组件。

 1、简单的List
@Entry
@Component
struct PageList {@State message: string = 'Hello World'@State list: string[] = ["子(鼠)", "丑(牛)", "寅(虎)", "卯(兔)", "辰(龙)", "巳(蛇)", "午(马)", "未(羊)", "申(猴)", "酉(鸡)", "戌(狗)", "亥(猪)"]ScrollList: Scroller = new Scroller()@State isNoBottom:boolean=true;build() {Row() {Column() {List({ scroller: this.ScrollList }) {ForEach(this.list, (item, index) => {ListItem() {Text(item).fontSize(25)}.height(100).width("100%").backgroundColor(Color.Pink).align(Alignment.Center) //控制item的字体位置.margin({ top: 10 }).swipeAction({ //侧滑删除的样式end: this.Delete(index)})})}.width("100%").height("50%").backgroundColor(Color.Gray)// .listDirection(Axis.Horizontal)//控制滑动的方向.alignListItem(ListItemAlign.Center) //控制list内部的位置.onScrollIndex((star,end)=>{if(this.list.length-1===end&&this.isNoBottom){this.isNoBottom=falseconsole.log(end+"---------------到底了")}})Button("回顶部").onClick(v => {this.ScrollList.scrollToIndex(0)}).margin({top:10})}.height('100%').width('100%').justifyContent(FlexAlign.Center)}.height('100%')}@BuilderDelete(index: number) {Text("删除").backgroundColor(Color.Orange).height(100).width(80).textAlign(TextAlign.Center).fontSize(26).fontColor(Color.Grey).onClick(v => {this.list.splice(index, 1)})}
}
2、嵌套的List
@Entry
@Component
struct PageList2 {@State message: string = 'Hello World'@State cityList: Object[] =[{ type: "A", name: ["安顺", "安庆", "安康"] }, { type: "B", name: ["北京", "北大荒", "保定"] }, { type: "C", name: ["长春", "长安", "长冶"] }]// 嵌套的list列表。build() {Row() {List(){ForEach(this.cityList,item=>{ListItemGroup({header:this.head(item.type)}){ForEach(item.name,item1=>{ListItem(){Text(item1)}.height(80).width('100%').align(Alignment.Start)})}})}.width('100%').height('30%').margin({left:10}).sticky(StickyStyle.Header)//悬浮一级目录}.height('100%')}@Builderhead(type){Text(type).fontSize(25).fontColor(Color.Red).backgroundColor(Color.White)}
}
三、Tabs容器组件

当页面信息较多时,为了让用户能够聚焦于当前显示的内容,需要对页面内容进行分类,提高页面空间利用率。[Tabs]组件可以在一个页面内快速实现视图内容的切换,一方面提升查找信息的效率,另一方面精简用户单次获取到的信息量。
Tabs组件的页面组成包含两个部分,分别是TabContent和TabBar。TabContent是内容页,TabBar是导航页签栏,页面结构如下图所示,根据不同的导航类型,布局会有区别,可以分为底部导航、顶部导航、侧边导航,其导航栏分别位于底部、顶部和侧边。

 

每一个TabContent对应的内容需要有一个页签,可以通过TabContent的tabBar属性进行配置。在如下TabContent组件上设置属性tabBar,可以设置其对应页签中的内容,tabBar作为内容的页签。

1、系统自带tabs案例
@Entry
@Component
struct PageTabs {@State message: string = 'Hello World'build() {Tabs({barPosition:BarPosition.End}){TabContent(){spring()}.tabBar("春天")TabContent(){summmer()}.tabBar("夏天")TabContent(){autumn()}.tabBar("秋天")}// .vertical(true).scrollable(true).barMode(BarMode.Scrollable)//tabbar可以滚动}
}@Component
struct spring{build(){Row(){Text("春天来了")}}
}
@Component
struct summmer{build(){Row(){Text("夏天来了")}}
}
@Component
struct autumn{build(){Row(){Text("秋天来了")}}
}
2、自定义导航栏:

对于底部导航栏一般作为应用主页面功能区分,为了更好的用户体验,会组合文字以及对应语义图标表示页签内容,这种情况下,需要自定义导航页签的样式。

 

@Entry
@Component
struct PageTabs {@State message: string = 'Hello World'@State indexSelected:number=0controller:TabsController=new TabsController()@BuildertabStyle(path:string,name:string ,pathSelected:string,index:number){Column(){Image(this.indexSelected===index?pathSelected:path).size({width:25,height:25})Text(name).fontColor(this.indexSelected===index?"#14c145":Color.Black)}.width("100%").height(50).onClick(v=>{this.indexSelected=indexthis.controller.changeIndex(index)})}build() {Tabs({barPosition:BarPosition.End,controller:this.controller}){TabContent(){spring()}.tabBar(this.tabStyle('images/admin_.png',"春天",'images/admin.png',0))TabContent(){summmer()}.tabBar(this.tabStyle('images/baoxiu_.png',"夏天",'images/baoxiu.png',1))TabContent(){autumn()}.tabBar(this.tabStyle('images/hetong_.png',"秋天",'images/hetong.png',2))}// .vertical(true).scrollable(true).onChange(index=>{console.log(index+"--------滑动到")this.indexSelected=index})// .barMode(BarMode.Scrollable)//tabbar可以滚动 会导致tabitem充满屏幕}
}@Component
struct spring{build(){Row(){Text("春天来了")}}
}
@Component
struct summmer{build(){Row(){Text("夏天来了")}}
}
@Component
struct autumn{build(){Row(){Text("秋天来了")}}
}

 

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

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

相关文章

Ribbon简介

目录 一 、概念介绍 1、Ribbon是什么 2、认识负载均衡 2.1 服务器端的负载均衡 2.2 客户端的负载均衡 3、Ribbon工作原理 4、Ribbon的主要组件 IClientConfig ServerList ServerListFilter IRule Iping ILoadBalancer ServerListUpdater 5、Ribbon支持…

为什么Redis设计成单线程

Redis是单线程却能支持高并发 1.Redis 将数据存储在内存中,读取速度非常快,而写入操作通常采用异步持久化的方式,将数据定期写入到磁盘,避免了磁盘IO成为性能瓶颈。这样一来,Redis 可以在高速内存中快速响应读取请求&…

BGP实训

BGP基础配置实训 实验拓扑 注:如无特别说明,描述中的 R1 或 SW1 对应拓扑中设备名称末尾数字为 1 的设备,R2 或 SW2 对应拓扑中设备名称末尾数字为2的设备,以此类推;另外,同一网段中,IP 地址的主…

2024四川省赛“信息安全管理与评估“--网络事件响应--应急响应(高职组)

2024四川省赛“信息安全管理与评估“(高职组)任务书 2024四川省赛“信息安全管理与评估“任务书第一阶段竞赛项目试题第二阶段竞赛项目试题任务 1 应急响应(40分)第三阶段竞赛项目试题2024四川省赛“信息安全管理与评估“任务书 第一阶段竞赛项目试题 先略 第二阶段竞赛…

DFS-蓝桥杯常用Python算法

DFS 蓝桥杯中的DFS主要有针对分配过程的DFS和图/树的DFS两种类型,基本是模板题,难度中等 类型一:针对分配过程的DFS 例题 1:飞机降落 题目描述: N 架飞机准备降落到某个只有一条跑道的机场。其中第 i 架飞机在 T …

vs右键在浏览器中查看报错

vs右键在浏览器中查看报错Visual studio 右键在浏览器中查看报错HTTP错误500.30——ANCM进程内启动失败——.NET Core HTTP Error 500.30 - ANCM In-Process Start Failure - .NET Core HTTP Error 500.30 - ANCM In-Process Start Failure Common solutions to this issue: …

海量电动汽车数据无法解决?不放试试基于MonteCarlo方法的大规模电动汽车充放电模型程序代码!

前言 电动汽车大规模入网充电时会导致系统内负载峰值拔高的问题,和分布式电源一样,都会对电网的安全稳定运行造成冲击,需要在满足系统运行经济效益最优的同时,尽量降低大量电动汽车入网无序充电对系统造成的不良影响。通过分析电…

【WEEK5】 【DAY4】数据库操作【中文版】

2024.3.28 Thursday 目录 2.数据库操作2.1.数据库2.1.1.新建数据库(右键的方法)2.1.2.查询:点击“查询”->“新建查询表”即可输入所需要的语句,点击“运行”,如: 2.2.结构化查询语句分类2.3.数据库操作…

帝国cms自适应html5古诗词历史名句书籍文章资讯网站源码整站模板sinfo插件带采集会员中心

(购买本专栏可免费下载栏目内所有资源不受限制,持续发布中,需要注意的是,本专栏为批量下载专用,并无法保证某款源码或者插件绝对可用,介意不要购买!购买本专栏住如有什么源码需要,可向博主私信,第二天即可发布!博主有几万资源) 帝国cms自适应html5古诗词名句书籍文…

<TensorFlow学习使用P1>——《TensorFlow教程》

一、TensorFlow概述 前言: 本文中一些TensorFlow综合案例的代码逻辑一般正常,在本地均可运行。如有代码复现运行失败,原因如下: (1)运行环境配置可能有误。 (2)由于一些数据集存储空…

Kubernetes operator系列:Cue语言基础学习

云原生学习路线导航页(持续更新中) 本文是 Kubernetes operator学习 系列文章,本节会对 Cue配置语言 进行学习,Cue是一门为配置而生的语言,在开源项目kubevela中被广泛使用 本文的所有代码,都存储于github代…

电脑ip地址如何改?这些修改方法请收好!

在数字化日益深入的今天,电脑作为我们日常工作和生活中的重要工具,其网络功能显得尤为关键。而在网络世界中,IP地址则是电脑连接互联网的身份证,它标识着电脑在网络中的位置与身份。然而,在某些特定情境下,…

头歌 实验一 关系数据库标准语言SQL湖北汽车工业学院 )

头歌 实验一 关系数据库标准语言SQL 制作不易!点个关注呗!为大家创造更多的价值! 目录 头歌 实验一 关系数据库标准语言SQL**制作不易!点个关注呗!为大家创造更多的价值!** 第一关:创建数据库第…

C语言: 指针讲解

为什么需要指针? (1)指针的使用使得不同区域的代码可以轻易的共享内存数据。当然你也可以通过数据的复制达到相同的效果,但是这样往往效率不太好,因为诸如结构体等大型数据,占用的字节数多,复制很消耗性能…

LTE 信道的分配

**部分笔记** 逻辑信道 数据在下行的经过RLC层处理后,会根据数据的类型进行不同的逻辑信道(数据类型的不听,用户的不同) 传输信道 在逻辑信道达到MAC层后,会被分配到 物理信道 逻辑信道 按照内容的属性以及UE的不…

C++经典面试题目(五)

1、类的成员变量和成员函数有什么区别? 成员变量是类中存储数据的成员,描述了类的状态。成员函数是类中定义的操作数据的函数,用于实现类的行为。成员变量存储对象的状态信息,而成员函数用于操作和访问这些状态信息。 2、什么是…

智算AI平台介绍:初识volcano

提到智算AI平台,肯定离不了Volcano,Volcano与Kubernetes天然兼容,并为高性能计算而生。 一.volcano是什么 Volcano是CNCF 下首个也是唯一的基于Kubernetes的容器批量计算平台,主要用于高性能计算场景。 它提供了Kubernetes目前…

【Java常用的API】JDK8相关时间类

🍬 博主介绍👨‍🎓 博主介绍:大家好,我是 hacker-routing ,很高兴认识大家~ ✨主攻领域:【渗透领域】【应急响应】 【Java】 【VulnHub靶场复现】【面试分析】 🎉点赞➕评论➕收藏 …

Linux中的常见的几种安装软件的方式

使用包管理器安装: 在大多数常见的 Linux 发行版中,都提供了包管理器来方便地安装、更新和管理软件包。以下是一些常见的包管理器及其相应的安装命令: apt-get / apt: Debian、Ubuntu 及其衍生版本使用的包管理器,可以…

第十三届蓝桥杯JavaA组省赛真题 - 裁纸刀

解题思路: 一道简单的数学题 先看例子,边缘必须裁四次,然后得到两行三列共六张二维码。 横线5裁一次,竖线6 7 8 9各裁一次,加上裁边缘的四次,共九次。 也就是说,横向裁剪次数为【行数 - 1】…