鸿蒙（ArkUI）开发：实现二级联动

news/2024/7/21 8:47:40 标签: harmonyos, java, 鸿蒙开发, ArkUI, Android, 前端, UI

场景介绍

列表的二级联动（Cascading List）是指根据一个列表（一级列表）的选择结果，来更新另一个列表（二级列表）的选项。这种联动可以使用户根据实际需求，快速定位到想要的选项，提高交互体验。例如，短视频中拍摄风格的选择、照片编辑时的场景的选择，本文即为大家介绍如何开发二级联动。

效果呈现

本例最终效果如下：

v2-d93dbfcc62cb3680339095f45ffa32c6_720w.gif

运行环境

本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发：

  • IDE: DevEco Studio 3.1 Beta2
  • SDK: Ohos_sdk_public 3.2.11.9 (API Version 9 Release)

实现思路

  • 数字标题(titles)以及下方的数字列表(contents)分组展示：通过两个List组件分别承载数字标题和数字项。
  • 滚动数字列表，上方数字标题也随之变动：通过List组件的onScrollIndex事件获取到当前滚动数字的索引，根据该索引计算出对应标题数字的索引，然后通过Scroller的scrollToIndex方法跳转到对应的数字标题，且通过Line组件为选中的标题添加下划线。
  • 点击数字标题，下方的数字列表也随之变化：首先获取到点击数字标题的索引，通过该索引计算出下方对应数字的起始项索引，然后通过scroller的scrollToIndex方法跳转到对应索引的数字项。

开发步骤

根据实现思路，具体实现步骤如下：

  • 首先构建列表数据，在records中记录数字列表中各个数字的首项索引值，具体代码块如下：
...
@State typeIndex: number = 0
private tmp: number = 0
private titles: Array<string> = ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
private contents: Array<string> = ["1", "1", "1", "1", "1", "1", "1", "1", "1", "2", "2", "2", "2", "2", "2", "2", "2", "2", "2", "2", "2", "3"
    , "3", "3", "3", "3", "4", "4", "4", "5", "5", "5", "5", "5", "6", "7", "7", "7", "7", "7", "7", "7", "7", "7", "7", "7", "7",
    "8", "8", "8", "8", "8", "9", "9", "9", "9", "9", "9", "9", "9", "9", "9", "9"]
private records: Array<number> = [0, 9, 21, 26, 29, 34, 35, 47, 52, 63]
private classifyScroller: Scroller = new Scroller();
private scroller: Scroller = new Scroller();
...
  • 数字标题列表：具体代码块如下：
...
build() {
  Column({ space: 0 }) {
    List  ({ space: 50, scroller: this.classifyScroller, initialIndex: 0 }) {
      ForEach(this.titles, (item, index) => {
        ListItem() {
          Column() {
            Text(item)
              .fontSize(14)
            ...  
          }
        }
      }
      ...
    }
    .listDirection(Axis.Horizontal)
    .height(50)
  }
}

数字列表，具体代码块如下：

List({ space: 20, scroller: this.scroller }) {
  ForEach(this.contents, (item, index) => {
    ListItem() {
      Column({ space: 5 }) {
        Image($r("app.media.app_icon"))
          .width(40)
          .height(40)
        Text(item)
          .fontSize(12)
      }
      ...
    }
  }
}
.listDirection(Axis.Horizontal) //列表排列方向水平
.edgeEffect(EdgeEffect.None) //不支持滑动效果
  • 数字标题的索引值判断，根据当前滚动数字的首项索引值计算出数字标题的索引，具体代码块如下：
...
findClassIndex(ind: number) { // 当前界面最左边图的索引值ind
  let ans = 0
  // 定义一个i 并进行遍历 this.records.length = 10
  for (let i = 0; i < this.records.length; i++) { 
    // 判断ind在this.records中那两个临近索引值之间
    if (ind >= this.records[i] && ind < this.records[i + 1]) {
      ans = i
      break
    }
  }
  return ans
}
findItemIndex(ind: number) { 
  // 将ind重新赋值给类型标题列表的索引值
  return this.records[ind]
}
...
  • 通过Line组件构成标题下滑线，具体代码块如下：
...
if (this.typeIndex == index) {
  Line()
    //根据长短判断下划线
    .width(item.length === 2 ? 25 : item.length === 3 ? 35 : 50)
    .height(3)
    .strokeWidth(20)
    .strokeLineCap(LineCapStyle.Round)
    .backgroundColor('#ffcf9861')
}
...
  • 点击数字标题，数字列表随之滑动：首先获取到点击数字标题的索引，通过该索引计算出下方对应数字的起始项索引，然后通过scroller的scrollToIndex方法跳转到对应索引的数字项，具体代码块如下：
...
.onClick(() => {
  this.typeIndex = index
  this.classifyScroller.scrollToIndex(index)
  let itemIndex = this.findItemIndex(index)
  console.log("移动元素：" + itemIndex)
  this.scroller.scrollToIndex(itemIndex)
})
...
  • 数字列表的滑动或点击导致数字标题的变动：通过List组件中onScrollIndex事件获取的到屏幕中最左边数字的索引值start，然后通过该索引值计算出对应的数字标题的索引currentClassIndex，然后通过scrollToIndex控制数字标题跳转到对应索引处，具体代码块如下：
...
.onScrollIndex((start) => {
  let currentClassIndex = this.findClassIndex(start)
  console.log("找到的类索引为： " + currentClassIndex)
  if (currentClassIndex != this.tmp) {
    this.tmp = currentClassIndex
    console.log("类别移动到索引： " + currentClassIndex)
    this.typeIndex = currentClassIndex
    this.classifyScroller.scrollToIndex(currentClassIndex)
  }
})
...

本文是对鸿蒙（UI.html" title=ArkUI>ArkUI）开发的二级联动实现，更多的鸿蒙技术可以前往主页学习，鸿蒙的OpenHarmony技术UI.html" title=ArkUI>ArkUI技能分布如下：

高清完整版可以找我保存（附下面笔迹包）


完整代码

完整示例代码如下：

@Entry
@Component
struct TwoLevelLink {
  @State typeIndex: number = 0
  private tmp: number = 0
  private titles: Array<string> = ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
  private contents: Array<string> = ["1", "1", "1", "1", "1", "1", "1", "1", "1", "2", "2", "2", "2", "2", "2", "2", "2", "2", "2", "2", "2", "3"
    , "3", "3", "3", "3", "4", "4", "4", "5", "5", "5", "5", "5", "6", "7", "7", "7", "7", "7", "7", "7", "7", "7", "7", "7", "7",
    "8", "8", "8", "8", "8", "9", "9", "9", "9", "9", "9", "9", "9", "9", "9", "9"]
  private colors: Array<string> = ["#18183C", "#E8A027", "#D4C3B3", "#A4AE77", "#A55D51", "#1F3B54", "#002EA6", "#FFE78F", "#FF770F"]
  private records: Array<number> = [0, 9, 21, 26, 29, 34, 35, 47, 52, 63]
  private classifyScroller: Scroller = new Scroller();
  private scroller: Scroller = new Scroller();
  // 根据数字列表索引计算对应数字标题的索引
  findClassIndex(ind: number) {
    let ans = 0
    for (let i = 0; i < this.records.length; i++) {
      if (ind >= this.records[i] && ind < this.records[i + 1]) {
        ans = i
        break
      }
    }
    return ans
  }
  // 根据数字标题索引计算对应数字列表的索引
  findItemIndex(ind: number) {
    return this.records[ind]
  }
  build() {
    Column({ space: 0 }) {
      List  ({ space: 50, scroller: this.classifyScroller, initialIndex: 0 }) {
        ForEach(this.titles, (item, index) => {
          ListItem() {
            Column() {
              Text(item)
                .fontSize(24)
              if (this.typeIndex == index) {
                Line()
                  .width(item.length === 2 ? 25 : item.length === 3 ? 35 : 50)
                  .height(3)
                  .strokeWidth(20)
                  .strokeLineCap(LineCapStyle.Round)
                  .backgroundColor('#ffcf9861')
              }
            }
            .onClick(() => {
              this.typeIndex = index
              this.classifyScroller.scrollToIndex(index)
              let itemIndex = this.findItemIndex(index)
              console.log("移动元素：" + itemIndex)
              this.scroller.scrollToIndex(itemIndex)
            })
          }
        })
      }
      .listDirection(Axis.Horizontal)
      .height(50)
      List({ space: 20, scroller: this.scroller }) {
        ForEach(this.contents, (item, index) => {
          ListItem() {
            Column({ space: 5 }) {
              Text(item)
                .fontSize(30)
                .fontColor(Color.White)
            }
            .width(60)
            .height(60)
            .backgroundColor(this.colors[item-1])
            .justifyContent(FlexAlign.Center)
            .onClick(() => {
              this.scroller.scrollToIndex(index)
            })
          }
        })
      }
      .listDirection(Axis.Horizontal) //列表排列方向水平
      .edgeEffect(EdgeEffect.None) //不支持滑动效果
      .onScrollIndex((start) => {
        let currentClassIndex = this.findClassIndex(start)
        console.log("找到的类索引为： " + currentClassIndex)
        if (currentClassIndex != this.tmp) {
          this.tmp = currentClassIndex
          console.log("类别移动到索引： " + currentClassIndex)
          this.typeIndex = currentClassIndex
          this.classifyScroller.scrollToIndex(currentClassIndex)
        }
      })
    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
  }
}

http://www.niftyadmin.cn/n/5347377.html

相关文章

【Python】01快速上手爬虫案例一

【Python】01快速上手爬虫案例一

文章目录 前言一、VSCodePython环境搭建二、爬虫案例一1、爬取第一页数据2、爬取所有页数据3、格式化html数据4、导出excel文件 前言 实战是最好的老师&#xff0c;直接案例操作&#xff0c;快速上手。 案例一&#xff0c;爬取数据&#xff0c;最终效果图&#xff1a; 一、VS…
阅读更多...
线性代数基础【6】二次型

线性代数基础【6】二次型

第一节、二次型的基本概念及其标准型 一、基本概念 ①二次型 含n个变量x1,x2,…,xn,且每项都是2次的齐次多项式 ②标准二次型 只含有平方项不含交叉项的二次型称为标准二次型 ③二次型的标准化 设f(X)X^TAX 为一个二次型,经过可逆的线性变换XPY(即P为可逆矩阵)把二次型…
阅读更多...
2024.1.23力扣每日一题——最长交替子数组

2024.1.23力扣每日一题——最长交替子数组

2024.1.23 题目来源我的题解方法一 枚举 题目来源 力扣每日一题&#xff1b;题序&#xff1a;2765 我的题解 方法一 枚举 每次都以两个相邻作为满足要求的循环数据&#xff0c;并且以一个布尔变量控制循环的位置 时间复杂度&#xff1a;O(n) 空间复杂度&#xff1a;O(1) pub…
阅读更多...
对话框与多窗体设计 —— 自定义对话框及其调用

对话框与多窗体设计 —— 自定义对话框及其调用

3.2 自定义对话框及其调用3.3 Splash与登录窗口 3.2 自定义对话框及其调用 在一个应用程序设计中&#xff0c;为了实现一些特定的功能&#xff0c;必 须设计自定义对话框。自定义对话框的设计一般从 QDialog继承&#xff0c;并且可以采用UI设计器可视化地设计对 话框。对话框的…
阅读更多...
成本更低、更可控，云原生可观测新计费模式正式上线

成本更低、更可控，云原生可观测新计费模式正式上线

云布道师 在上云开始使用云产品过程中&#xff0c;企业一定遇见过两件“讨厌”事&#xff1a; 难以理解的复杂计费逻辑&#xff0c;时常冒出“这也能收费”的感叹&#xff1b; 某个配置参数调节之后&#xff0c;云产品使用成本不可预估的暴涨。 可观测作为企业 IT 运维必须品…
阅读更多...
应急响应-Windows-进程排查

应急响应-Windows-进程排查

进程&#xff08;process&#xff09;是计算机中的程序关于某数据集合上的一次运动活动&#xff0c;是系统进行资源分配和调度的基本单位&#xff0c;是操作系统结果的基础。在早期面向进程结构中&#xff0c;进程是线程的容器。无论是在Windows系统还是Linux系统中&#xff0c…
阅读更多...
Linux之系统安全与应用

Linux之系统安全与应用

Linux系统提供了多种机制来确保用户账号的正当&#xff0c;安全使用。 系统安全措施 一. 清理系统账号 1.1 将用户设置为无法登录 Linux系统中除手动创建的各种账号外&#xff0c;还包括随系统或程序安装过程而生成的其他大量账号。除了超级用户root以外&#xff0c;其他的…
阅读更多...
架构篇10：架构设计流程-识别复杂度

架构篇10：架构设计流程-识别复杂度

文章目录 架构设计第 1 步&#xff1a;识别复杂度识别复杂度实战识别复杂度心得小结 从今天开始&#xff0c;我们分4期&#xff0c;结合复杂度来源和架构设计原则&#xff0c;通过一个模拟的设计场景“前浪微博”&#xff0c;一起看看在实践中究竟如何进行架构设计。今天先来看…
阅读更多...
最新文章

Copyright @ 2022~2023