学习鸿蒙基础（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=false
            console.log(end+"---------------到底了")
          }
        })

        Button("回顶部").onClick(v => {
          this.ScrollList.scrollToIndex(0)
        }).margin({top:10})
      }
      .height('100%').width('100%').justifyContent(FlexAlign.Center)
    }.height('100%')
  }

  @Builder
  Delete(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%')
  }

  @Builder
  head(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=0
  controller:TabsController=new TabsController()

  @Builder
  tabStyle(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=index
         this.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("秋天来了")
    }
  }
}

 

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

[Python人工智能] 四十五.命名实体识别 (6)利用keras构建CNN-BiLSTM-ATT-CRF实体识别模型（注意力问题探讨）

[Python人工智能] 四十五.命名实体识别 (6)利用keras构建CNN-BiLSTM-ATT-CRF实体识别模型（注意力问题探讨）

从本专栏开始，作者正式研究Python深度学习、神经网络及人工智能相关知识。前文讲解融合Bert的实体识别研究，使用bert4keras和kears包来构建Bert+BiLSTM-CRF模型。这篇文章将详细结合如何利用keras和tensorflow构建基于注意力机制的CNN-BiLSTM-ATT-CRF模型，并实现中文实体识别…
阅读更多...
基于单片机宿舍防火防盗系统的设计

基于单片机宿舍防火防盗系统的设计

**单片机设计介绍，基于单片机宿舍防火防盗系统的设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机宿舍防火防盗系统的设计概要主要涉及单片机技术的应用，以实现对宿舍环境的防火和防盗功能的…
阅读更多...
31-5 命令执行漏洞 - RCE漏洞利用

31-5 命令执行漏洞 - RCE漏洞利用

环境准备：构建完善的安全渗透测试环境：推荐工具、资源和下载链接_渗透测试靶机下载-CSDN博客 一、打开pikachu靶场 二、远程命令执行利用 正常情况下这一关卡就是个ping命令，我们只能输入个 ip 靶场就就会ping 这ip 但是我们可以用管道符拼接来执行其他命令，详细可以看我…
阅读更多...
Android 开发投屏软件

Android 开发投屏软件

一、背景 作为Android开发总会有给他人share自己APP情况，一般在线会议投屏，总是需要在手机上安装对应会议软件特别麻烦~ 二、投屏 Android Studio已经自带了投屏能力，可以在电脑端直接控制手机，同步起来非常方便简单 打开步骤 …
阅读更多...
【Docker】搭建简单易用的网站分析工具 - umami

【Docker】搭建简单易用的网站分析工具 - umami

【Docker】搭建简单易用的网站分析工具 - umami 前言 本教程基于绿联的NAS设备DX4600 Pro的docker功能进行搭建，采用umami MySQL实例作为演示。 简介 umami是一个开源的、简单的、易于使用的网站分析工具。其设计目的是提供一个简单、易于理解的方式来查看网站…
阅读更多...
ATTCK学习笔记

ATTCK学习笔记

ATT&CK 前言知识 威胁情报：一般为网络流量中或者操作系统上观察到的能高度表明计算机被入侵的痕迹，例如某病毒的Hash值、服务器的IP地址等等。简单来说，威胁情报就像是当计算机被入侵时所表现出来的某种特征，我们将这些威胁…
阅读更多...
Kitex 提供的服务注册与发现 etcd 拓展

Kitex 提供的服务注册与发现 etcd 拓展

&#x1f4d5;作者简介&#xff1a; 过去日记&#xff0c;致力于Java、GoLang,Rust等多种编程语言&#xff0c;热爱技术&#xff0c;喜欢游戏的博主。 <br> &#x1f4d8;相关专栏<a href"https://blog.csdn.net/studycodeday/category_12460797.html">…
阅读更多...
SmartChart的部署以及可能遇见的报错解决方案

SmartChart的部署以及可能遇见的报错解决方案

简介 数据可视化是一种将数据转化为图形的技术&#xff0c;可以帮助人们更好地理解和分析数据。但是&#xff0c;传统的数据可视化开发往往需要编写大量的代码&#xff0c;或者使用复杂的拖拽工具&#xff0c;不仅耗时耗力&#xff0c;而且难以实现个性化的需求。有没有一种更…
阅读更多...
Linux部分命令

Linux部分命令

目录 1.文件介绍 2.ls命令 3.目录命令 4.相对路径以及绝对路径 5.命令创建目录&#xff08;文件夹&#xff09; 6.which命令 7.find命令 8.grep命令 9.wc命令 10.echo、tail、重定向符 1.文件介绍 和window不同&#xff0c;Linux没有盘路径&#xff0c;所有的文件都存…
阅读更多...
VSCode在文件生成添加作者，创建时间、最后编辑人和最后编辑时间等信息

VSCode在文件生成添加作者，创建时间、最后编辑人和最后编辑时间等信息

一、安装插件 我使用的是 korofileheader 二、配置文件 左下角点击设置图标—设置—输入"ext:obkoro1.korofileheader"—点击"在setting.json中编辑" 进入后会自动定位到你添加信息的地方 "Author": "tom", "Date": "…
阅读更多...
接口自动化框架搭建（五）：生成allure报告

接口自动化框架搭建（五）：生成allure报告

1&#xff0c;安装allure 参考连接&#xff1a; https://blog.csdn.net/lixiaomei0623/article/details/120185069 2&#xff0c;安装python的allure依赖 pip install allure-pytest或者从pycharme上安装 3&#xff0c;生成报告 执行前目录 执行测试用例 import pytest …
阅读更多...
js逆向之非对称加密RSA某奇艺登录密码

js逆向之非对称加密RSA某奇艺登录密码

通过案例主要是学会逆向的过程. 一些正常的js代码可以看懂,可是有些网站会给你混淆, 让你看的不舒服, --打断点慢慢来. # RSA加密 --非对称加密 # 对称加密&#xff1a;加密和解密共用一把钥匙 # 非对称加密: 加密和解密使用两把钥匙 &#xff1a; 公钥&#xff08;加密&…
阅读更多...
吴恩达2022机器学习专项课程(一） 4.3 梯度下降的直观理解

吴恩达2022机器学习专项课程(一） 4.3 梯度下降的直观理解

问题预览/关键词 本节内容是&#xff1f;J对w求导的含义是&#xff1f;如何确定切线的方向&#xff1f;w在函数J递增处的切线方向是&#xff1f;导数项为正数&#xff0c;w和函数J的关系是&#xff1f;w在函数J递减处的切线方向是&#xff1f;导数项为负数&#xff0c;w和函数…
阅读更多...
Visual Studio 2022报错c1083，win11解决办法

Visual Studio 2022报错c1083，win11解决办法

如果头文件报错&#xff0c;并且编译器报错是c1083&#xff0c;无法处理的时候&#xff0c;包括卸载重装也是无济于事的时候 此时可以采取一下办法进行修改 出现这个的主要原因是安装 Windows SDK 时版本出错&#xff0c;需要根据自己的 windows 版本选择安装对应版本的 Wind…
阅读更多...
Junit深入讲解（JAVA单元测试框架）

Junit深入讲解（JAVA单元测试框架）

1、此处用的是Junit5&#xff0c;此处pom文件需要引的依赖是 <dependency><groupId>org.junit.jupiter</groupId><artifactId>junit-jupiter-api</artifactId><version>5.9.1</version><scope>test</scope></depende…
阅读更多...
基于STC12C5A60S2系列1T 8051单片机通过单个按键长按次数实现开关机应用

基于STC12C5A60S2系列1T 8051单片机通过单个按键长按次数实现开关机应用

基于STC12C5A60S2系列1T 8051单片机通过单个按键长按次数实现开关机应用 STC12C5A60S2系列1T 8051单片机管脚图STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式及配置STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式介绍基于STC12C5A60S2系列1T 8051单片机通过单个按…
阅读更多...
Linux_应用篇(02) 文件 I/O 基础

Linux_应用篇(02) 文件 I/O 基础

本章给大家介绍 Linux 应用编程中最基础的知识&#xff0c;即文件 I/O&#xff08;Input、 Outout&#xff09; &#xff0c; 文件 I/O 指的是对文件的输入/输出操作&#xff0c;说白了就是对文件的读写操作&#xff1b; Linux 下一切皆文件&#xff0c;文件作为 Linux 系统设计…
阅读更多...
基于 SymPy 的反函数求解

基于 SymPy 的反函数求解

原文&#xff1a;https://blog.iyatt.com/?p14396 例一 f(x) 2x 3 这个函数很简单&#xff0c;可以看出它的反函数是&#xff08;令 yf(x) &#xff09;&#xff1a;$$x\frac{y-3}{2}$$ 使用 SymPy 求解可以采用这样的思路&#xff1a; 已知函数 f(x)2x3, 令 y f(x), 即构…
阅读更多...
通俗易懂Redis缓存穿透，缓存击穿，缓存雪崩

通俗易懂Redis缓存穿透，缓存击穿，缓存雪崩

1.1 缓存穿透 原因&#xff1a;当我们查询一个数据的时候&#xff0c;缓存中没有&#xff0c;就会去查询我们的关系型数据库&#xff0c;而且查询不到的数据是不会放到我们的缓存中&#xff0c;就会导致我们每次的请求都会来到我们的关系型数据库中&#xff0c;从而导致关系型…
阅读更多...
2024 ccfcsp认证打卡 2021 12 01 序列查询

2024 ccfcsp认证打卡 2021 12 01 序列查询

2021 12-1 序列查询 题解1题解2区别第一种算法&#xff1a;第二种算法&#xff1a; 题解1 import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);// 输入n表示商品数目&#xff0c;N表示总数int n sc.n…
阅读更多...
最新文章

Copyright @ 2022~2023