devbox
你好赵伟
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

学习鸿蒙基础（10）

作者：你好赵伟 | 2024-03-30 06:34:00

赞

踩

学习鸿蒙基础（10）

目录

一、轮播组件 Swiper

二、列表-List

 1、简单的List

2、嵌套的List

三、Tabs容器组件

1、系统自带tabs案例

2、自定义导航栏：

一、轮播组件 Swiper
  1. @Entry
  2. @Component
  3. struct PageSwiper {
  4.   @State message: string = 'Hello World'
  5.   private SwCon: SwiperController = new SwiperController()
  6.  
  7.   build() {
  8.     Column() {
  9.       Swiper(this.SwCon) {
  10.         Text("龙").backgroundColor(Color.Red).textStyle()
  11.         Text("兔").backgroundColor(Color.Yellow).textStyle()
  12.         Text("神").backgroundColor(Color.Orange).textStyle()
  13.       }
  14.       // .autoPlay(true)
  15.       .interval(2000)
  16.       .indicatorStyle({
  17.         color: Color.White,
  18.         selectedColor: Color.Pink,
  19.         size: 20
  20.       }).onChange(index=>{
  21.         console.log(`${index}`)
  22.       })
  23.       // .vertical(true)
  24.       Row() {
  25.         Button("上一个").onClick(v => {
  26.           this.SwCon.showPrevious();
  27.         }).margin({ top: 10, right: 10 })
  28.         Button("下一个").onClick(v => {
  29.           this.SwCon.showNext()
  30.         }).margin({ left: 10, top: 10 })
  31.       }.width("100%").justifyContent(FlexAlign.Center)
  32.  
  33.     }
  34.     .height('100%')
  35.   }
  36. }
  37.  
  38. @Extend(Text) function textStyle() {
  39.   .width("100%").height(200)
  40. }
二、列表-List

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

 1、简单的List
  1. @Entry
  2. @Component
  3. struct PageList {
  4.   @State message: string = 'Hello World'
  5.   @State list: string[] = ["子（鼠）", "丑（牛）", "寅（虎）", "卯（兔）"
  6.     , "辰（龙）", "巳（蛇）", "午（马）", "未（羊）", "申（猴）", "酉（鸡）", "戌（狗）", "亥（猪）"]
  7.   ScrollList: Scroller = new Scroller()
  8.   @State isNoBottom:boolean=true;
  9.  
  10.   build() {
  11.     Row() {
  12.       Column() {
  13.         List({ scroller: this.ScrollList }) {
  14.           ForEach(this.list, (item, index) => {
  15.             ListItem() {
  16.               Text(item).fontSize(25)
  17.             }
  18.             .height(100)
  19.             .width("100%")
  20.             .backgroundColor(Color.Pink)
  21.             .align(Alignment.Center) //控制item的字体位置
  22.             .margin({ top: 10 })
  23.             .swipeAction({ //侧滑删除的样式
  24.               end: this.Delete(index)
  25.             })
  26.           })
  27.         }.width("100%").height("50%").backgroundColor(Color.Gray)
  28.         // .listDirection(Axis.Horizontal)//控制滑动的方向
  29.         .alignListItem(ListItemAlign.Center) //控制list内部的位置
  30.         .onScrollIndex((star,end)=>{
  31.  
  32.           if(this.list.length-1===end&&this.isNoBottom){
  33.             this.isNoBottom=false
  34.             console.log(end+"---------------到底了")
  35.           }
  36.         })
  37.  
  38.         Button("回顶部").onClick(v => {
  39.           this.ScrollList.scrollToIndex(0)
  40.         }).margin({top:10})
  41.       }
  42.       .height('100%').width('100%').justifyContent(FlexAlign.Center)
  43.     }.height('100%')
  44.   }
  45.  
  46.   @Builder
  47.   Delete(index: number) {
  48.     Text("删除")
  49.       .backgroundColor(Color.Orange)
  50.       .height(100)
  51.       .width(80)
  52.       .textAlign(TextAlign.Center)
  53.       .fontSize(26)
  54.       .fontColor(Color.Grey)
  55.       .onClick(v => {
  56.         this.list.splice(index, 1)
  57.       })
  58.   }
  59. }
2、嵌套的List
  1. @Entry
  2. @Component
  3. struct PageList2 {
  4.   @State message: string = 'Hello World'
  5.   @State cityList: Object[] =
  6.     [{ type: "A", name: ["安顺", "安庆", "安康"] }, { type: "B", name: ["北京", "北大荒", "保定"] }, { type: "C", name: ["长春", "长安", "长冶"] }]
  7.  
  8.   // 嵌套的list列表。
  9.   build() {
  10.     Row() {
  11.       List(){
  12.         ForEach(this.cityList,item=>{
  13.             ListItemGroup({header:this.head(item.type)}){
  14.                 ForEach(item.name,item1=>{
  15.                   ListItem(){
  16.                     Text(item1)
  17.                   }.height(80).width('100%').align(Alignment.Start)
  18.                 })
  19.             }
  20.         })
  21.       }.width('100%').height('30%').margin({left:10})
  22.       .sticky(StickyStyle.Header)//悬浮一级目录
  23.     }
  24.     .height('100%')
  25.   }
  26.  
  27.   @Builder
  28.   head(type){
  29.     Text(type).fontSize(25).fontColor(Color.Red)
  30.       .backgroundColor(Color.White)
  31.   }
  32. }
三、Tabs容器组件

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

 

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

1、系统自带tabs案例
  1. @Entry
  2. @Component
  3. struct PageTabs {
  4.   @State message: string = 'Hello World'
  5.  
  6.   build() {
  7.     Tabs({barPosition:BarPosition.End}){
  8.       TabContent(){
  9.         spring()
  10.       }.tabBar("春天")
  11.       TabContent(){
  12.         summmer()
  13.       }.tabBar("夏天")
  14.       TabContent(){
  15.         autumn()
  16.       }.tabBar("秋天")
  17.     }
  18.     // .vertical(true)
  19.     .scrollable(true)
  20.     .barMode(BarMode.Scrollable)//tabbar可以滚动
  21.   }
  22. }
  23.  
  24. @Component
  25. struct spring{
  26.   build(){
  27.     Row(){
  28.       Text("春天来了")
  29.     }
  30.   }
  31. }
  32. @Component
  33. struct summmer{
  34.   build(){
  35.     Row(){
  36.       Text("夏天来了")
  37.     }
  38.   }
  39. }
  40. @Component
  41. struct autumn{
  42.   build(){
  43.     Row(){
  44.       Text("秋天来了")
  45.     }
  46.   }
  47. }
2、自定义导航栏：

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

 

  1. @Entry
  2. @Component
  3. struct PageTabs {
  4.   @State message: string = 'Hello World'
  5.   @State indexSelected:number=0
  6.   controller:TabsController=new TabsController()
  7.  
  8.   @Builder
  9.   tabStyle(path:string,name:string ,pathSelected:string,index:number){
  10.     Column(){
  11.       Image(this.indexSelected===index?pathSelected:path).size({width:25,height:25})
  12.       Text(name).fontColor(this.indexSelected===index?"#14c145":Color.Black)
  13.     }.width("100%").height(50).onClick(v=>{
  14.          this.indexSelected=index
  15.          this.controller.changeIndex(index)
  16.     })
  17.  
  18.   }
  19.  
  20.   build() {
  21.     Tabs({barPosition:BarPosition.End,
  22.      controller:this.controller}){
  23.       TabContent(){
  24.         spring()
  25.       }.tabBar(this.tabStyle('images/admin_.png',"春天",'images/admin.png',0))
  26.       TabContent(){
  27.         summmer()
  28.       }.tabBar(this.tabStyle('images/baoxiu_.png',"夏天",'images/baoxiu.png',1))
  29.       TabContent(){
  30.         autumn()
  31.       }.tabBar(this.tabStyle('images/hetong_.png',"秋天",'images/hetong.png',2))
  32.     }
  33.     // .vertical(true)
  34.     .scrollable(true)
  35.     .onChange(index=>{
  36.       console.log(index+"--------滑动到")
  37.       this.indexSelected=index
  38.     })
  39.     // .barMode(BarMode.Scrollable)//tabbar可以滚动 会导致tabitem充满屏幕
  40.   }
  41. }
  42.  
  43. @Component
  44. struct spring{
  45.   build(){
  46.     Row(){
  47.       Text("春天来了")
  48.     }
  49.   }
  50. }
  51. @Component
  52. struct summmer{
  53.   build(){
  54.     Row(){
  55.       Text("夏天来了")
  56.     }
  57.   }
  58. }
  59. @Component
  60. struct autumn{
  61.   build(){
  62.     Row(){
  63.       Text("秋天来了")
  64.     }
  65.   }
  66. }

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/339462
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号