【每日學點鴻蒙知識】PersistentStorage持久化、插槽方法、相對布局、上拉加載下拉刷新、List聯動滑動

1、HarmonyOS 使用PersistentStorage持久化用戶信息無效？

在首頁通過@StorageLink(‘userInfoTest’) userInfoTest: string = ''獲取，獲不到，返回undefind。是什么原因呢？

首先在首頁時，在Entry外聲明PersistentStorage.persistProp，其次在登錄完成設置值時不使用PersistentStorage.persistProp而是使用AppStorage.set來修改值。下面以userInfo為例：

PersistentStorage.persistProp('userInfo',"111") //可以直接放在import代碼下方，此處只以userInfo為例，每一個需要持久化保存的都需要聲明
//聲明時設置的值可以任意，后續通過set修改,j盡量和目標值保持屬性一致
@Entry
@Component
struct Index {build() {Column(){Button("點擊測試").onClick(()=>{console.log("測試set")AppStorage.set('userInfo', "ceshi") //直接使用AppStorage.set，而非PersistentStorage.persistProp，否則將無法修改})Button("查找userInfo").onClick(()=>{const ut = AppStorage.get<string>('userInfo')console.log(ut); //測試結果顯示userInfo中存的值變成了"ceshi"，殺進程，重新進入后直接點擊button，log的結果依舊是"ceshi"，實現持久化存儲})}}
}
2、HarmonyOS 有像 Vue 一樣的插槽使用方法嗎？

可以使用@BuilderParam裝飾器，該裝飾器用于聲明任意UI描述的一個元素，類似slot占位符。參考鏈接：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-builderparam-V5

3、HarmonyOS RelativeContainer 經過offset設置的錨點位置坐標不能作為錨點，只能用沒有經過offset配置的舊坐標作為錨點來給下一個組件進行標定？

比如說A組件經過了錨點配置了位置，此時A組件有一個坐標pos1，經過offset設置了新的位置pos2，B組件想要基于A的新位置pos2做標定，必須要將A組件的offset一并加上才能達到在pos2基礎上做標定。

比如說下面三個組件，想要達成的效果是年齡和個人信息之間相差13，性別和年齡之間間隔13，但是實際上卻是這三個組件之間的間隔為0

Row() {Text('個人信息').fontColor(Color.White).fontSize(14).alignRules({left: { anchor: 'row1', align: HorizontalAlign.Start },center: { anchor: 'row1', align: VerticalAlign.Center }}).offset({x: 13,y: 0,}).id("person_info_text")Button('年齡').fontSize(12).aspectRatio(1.857).alignRules({left: { anchor: "person_info_text", align: HorizontalAlign.End },center: { anchor: 'row1', align: VerticalAlign.Center }}).offset({x: 13,y: 0,}).id("age_btn")Button('性別').fontSize(12).aspectRatio(1.857).alignRules({left: { anchor: "age_btn", align: HorizontalAlign.End },center: { anchor: 'row1', align: VerticalAlign.Center }}).offset({x: 13,y: 0,}).id("gender_btn")

RelativeContainer經過offset設置的錨點位置還是之前沒有偏移的位置，所以后面的組件參考的位置還是偏移前的位置，所以要實現上面的效果需要這樣設置：

.offset({x: 13,y: 0,
}).offset({x: 26,y: 0,}).offset({x: 39,y: 0,})
4、HarmonyOS 上拉加載下拉刷新的控件有沒有已經封裝好了的？

數據請求寫在listTouchEvent里，關聯性太強，需要一個封裝好，把上拉下拉布局暴露在外由用戶設定，監聽也有的。

PullToRefresh可用的下拉刷新、上拉加載組件。可參考鏈接：https://gitee.com/openharmony-sig/ohos_pull_to_refresh

demo如下：

import { PullToRefresh } from '@ohos/pulltorefresh'@Entry
@Component
struct Index {@State refreshText: string = '';private dataNumbers: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];private dataStrings: string[] =['我的評論', '與我相關', '個人中心1', '個人中心2', '個人中心3', '我的發布', '設置', '退出登錄'];@State data: string[] = this.dataStrings;// 需綁定列表或宮格組件private scroller: Scroller = new Scroller();build() {Column() {PullToRefresh({// 必傳項，列表組件所綁定的數據data: $data,// 必傳項，需綁定傳入主體布局內的列表或宮格組件scroller: this.scroller,// 必傳項，自定義主體布局，內部有列表或宮格組件customList: () => {// 一個用@Builder修飾過的UI方法this.getListView();},// 可選項，下拉刷新回調onRefresh: () => {return new Promise<string>((resolve, reject) => {// 模擬網絡請求操作，請求網絡2秒后得到數據，通知組件，變更列表數據setTimeout(() => {resolve('刷新成功');this.data = this.dataNumbers;}, 2000);});},// 可選項，上拉加載更多回調onLoadMore: () => {return new Promise<string>((resolve, reject) => {// 模擬網絡請求操作，請求網絡2秒后得到數據，通知組件，變更列表數據setTimeout(() => {resolve('');this.data.push("增加的條目" + this.data.length);}, 2000);});},customLoad: null,customRefresh: null,})}}@Builderprivate getListView() {List({ space: 20, scroller: this.scroller }) {ForEach(this.data, (item: string) => {ListItem() {Text(item).width(160).height(150).fontSize(20).textAlign(TextAlign.Center).backgroundColor('#95efd2')}})}.backgroundColor('#eeeeee').divider({ strokeWidth: 1, color: 0x222222 }).edgeEffect(EdgeEffect.None) // 必須設置列表為滑動到邊緣無效果}
}
5、HarmonyOS List聯動滑動？

有個頁面需要兩個List聯動,且第一個List需要吸頂,但使用ListItemGroup做吸頂功能后,由于Index變成Apis文檔中說的:ListItemGroup作為一個整體計算一個索引值，ListItemGroup內部的ListItem不計算索引值。導致兩個List不再能根據Index聯動.

demo示例如下：

// 商品頂部分類
interface CategoriesType {current: string[],hot: string[],Categories: Map<string, Category[]>
}interface Category {code: string;category: string;
}@Entry
@Component
export default  struct CityList{private currentCategory: string = ''private hotCategories: string[] = []private groupCategories: Map<string, Category[]> = new Mapprivate groupNameList: string[] = ['A區', 'B區', 'C區', 'D區', 'F區', 'G區', 'H區', 'J區', 'K區', 'L區']@State private selectGroupIndex: number = -1private categoryScroller: ListScroller = new ListScroller()private categoryScroller1: ListScroller = new ListScroller()private isClickScroll:boolean = falseaboutToAppear() {let jsonString: string = '{"current":["保健品專區"],"hot":["險種轉換","保單掛失","保單補發"],"Categories":{"A區":[{"code":"001","category":"新增附加險"},{"code":"002","category":"保險附效1"},{"code":"003","category":"保險附效2"},{"code":"004","category":"保險附效3"},{"code":"005","category":"保險附效4"},{"code":"006","category":"保險附效5"},{"code":"007","category":"保險附效6"}],"B區":[{"code":"008","category":"保險附效1"},{"code":"009","category":"保險附效2"},{"code":"012","category":"保險附效3"}],"C區":[{"code":"008","category":"保險附效1"},{"code":"009","category":"保險附效2"},{"code":"010","category":"保險附效3"},{"code":"011","category":"保險附效4"},{"code":"012","category":"保險附效5"}],"D區":[{"code":"008","category":"保險附效1"},{"code":"009","category":"保險附效2"},{"code":"010","category":"保險附效3"},{"code":"011","category":"保險附效4"},{"code":"012","category":"保險附效5"}],"E區":[{"code":"008","category":"保險附效1"},{"code":"009","category":"保險附效2"},{"code":"010","category":"保險附效3"},{"code":"011","category":"保險附效4"},{"code":"012","category":"保險附效5"}],"F區":[{"code":"008","category":"保險附效1"},{"code":"009","category":"保險附效2"},{"code":"010","category":"保險附效3"},{"code":"011","category":"保險附效4"},{"code":"012","category":"保險附效5"}],"G區":[{"code":"008","category":"保險附效1"},{"code":"009","category":"保險附效2"},{"code":"010","category":"保險附效3"},{"code":"011","category":"保險附效4"},{"code":"012","category":"保險附效5"}],"H區":[{"code":"008","category":"保險附效1"},{"code":"009","category":"保險附效2"},{"code":"010","category":"保險附效3"},{"code":"011","category":"保險附效4"},{"code":"012","category":"保險附效5"}],"J區":[{"code":"008","category":"保險附效1"},{"code":"009","category":"保險附效2"},{"code":"010","category":"保險附效3"},{"code":"011","category":"保險附效4"},{"code":"012","category":"保險附效5"}],"K區":[{"code":"008","category":"保險附效1"},{"code":"009","category":"保險附效2"},{"code":"010","category":"保險附效3"},{"code":"011","category":"保險附效4"},{"code":"012","category":"保險附效5"}],"L區":[{"code":"008","category":"保險附效1"},{"code":"009","category":"保險附效2"},{"code":"010","category":"保險附效3"},{"code":"011","category":"保險附效4"},{"code":"012","category":"保險附效5"}]}}'let data: CategoriesType = JSON.parse(jsonString) as CategoriesTypethis.currentCategory = data.current[0]this.hotCategories = data.hotthis.groupCategories = data.Categoriesconsole.log('fxm = ', JSON.stringify(this.groupCategories['A區']))}build() {Column() {Row() {this.navigationList()}.width('100%').height(42)Column() {this.categoryList()}.height('100%')}}getCitiesWithGroupName(name: string): Category[] {console.log('fxm ', this.groupCategories[name])return this.groupCategories[name]}@BuilderitemHead(text: string) {Text(text).fontSize(16).width("100%").padding({ left: 10 }).height(45).backgroundColor(0xEEEEEE)}@BuildercategoryList() {List({ scroller: this.categoryScroller }) {ListItemGroup({ header: this.itemHead('當前專區') }) {ListItem() {Text(this.currentCategory).width("100%").height(45).fontSize(16).textAlign(TextAlign.Start).backgroundColor(0xFFFFFF).padding({ left: 10 })}}ListItemGroup({ header: this.itemHead('熱門專區') }) {ForEach(this.hotCategories, (hotCategory: string) => {ListItem() {Text(hotCategory).width("100%").height(45).fontSize(16).textAlign(TextAlign.Start).backgroundColor(0xFFFFFF).padding({ left: 10 })}})}// A~L專區分組ForEach(this.groupNameList, (item: string) => {ListItemGroup({ header: this.itemHead(item) }) {ForEach(this.getCitiesWithGroupName(item), (item: Category) => {ListItem() {Text(item.category).width("100%").height(45).fontSize(16).textAlign(TextAlign.Start).backgroundColor(0xFFFFFF).padding({ left: 10 })}}, (item: Category) => item.category)}})}.width('100%').height('100%').scrollBar(BarState.Off).sticky(StickyStyle.Header).onTouch(()=>{// 分區列表觸摸滾動，isClickScroll=false，防止滾動過程中與導航列表觸發滾動沖突this.isClickScroll = false}).onScrollIndex((start: number, end: number, center: number)=>{// 通過selectGroupIndex狀態變量與start聯動控制導航列表選中狀態if(!this.isClickScroll)this.selectGroupIndex = start - 2})}@BuildernavigationList() {List({scroller:this.categoryScroller1}) {ForEach(this.groupNameList, (item: string, index: number) => {ListItem() {Text(item).width(42).height(30).fontSize(16).textAlign(TextAlign.Start).backgroundColor(index == this.selectGroupIndex ? 0xCCCCCC : Color.Transparent).padding({ left: 10 }).borderRadius(15).onClick(() => {// 導航列表選中isClickScroll=true，防止與分區列表滾動過程中帶動導航列表狀態變化this.isClickScroll = truethis.selectGroupIndex = index// 通過導航選中selectGroupIndex與Scroller控制分區列表滾動到對應位置this.categoryScroller.scrollToIndex(index + 2, true, ScrollAlign.START)})}}, (item: string) => item)}.listDirection(Axis.Horizontal).backgroundColor(Color.Transparent).width('100%')}
}

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/64355.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/64355.shtml
英文地址，請注明出處：http://en.pswp.cn/web/64355.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

torch.tensor

torch.tensor

torch.tensor 通過復制數據構造一個張量 &#xff08;構造出的張量是一個沒有自動微分&#xff08;autograd &#xff09;歷史的張量&#xff0c;也稱為葉張量&#xff0c;參考Autograd mechanics&#xff09;。 torch.tensor(data, *, dtypeNone, deviceNone, requires_gra…
閱讀更多...
探索PyTorch：從入門到實踐的demo全解析

探索PyTorch：從入門到實踐的demo全解析

探索PyTorch：從入門到實踐的demo全解析 一、環境搭建：PyTorch的基石（一）選擇你的“利器”：安裝方式解析（二）步步為營：詳細安裝步驟指南二、基礎入門demo：點亮第一盞燈（一）張量操作：深度學習的“積木”（二）自動求導：模型學習的“幕后英雄”三、數據處理demo：喂飽…
閱讀更多...
SpringMVC學習(二)——RESTful API、攔截器、異常處理、數據類型轉換

SpringMVC學習(二)——RESTful API、攔截器、異常處理、數據類型轉換

一、RESTful (一)RESTful概述 RESTful是一種軟件架構風格&#xff0c;用于設計網絡應用程序。REST是“Representational State Transfer”的縮寫&#xff0c;中文意思是“表現層狀態轉移”。它基于客戶端-服務器模型和無狀態操作&#xff0c;以及使用HTTP請求來處理數據。RES…
閱讀更多...
Windows中安裝Python3

Windows中安裝Python3

Windows中安裝Python3 1. 下載Python安裝包 首先&#xff0c;訪問Python的官方網站 Python.org&#xff0c;選擇適合你Windows版本的Python安裝包。 2. 運行安裝包 下載完成.exe文件后&#xff0c;雙擊運行安裝包。在安裝過程中&#xff0c;有一些關鍵的選項需要特別注意&a…
閱讀更多...
JS數值類型中特殊數值NaN（Not-a-Number）理解和應用場景

JS數值類型中特殊數值NaN（Not-a-Number）理解和應用場景

NaN 的含義 在 JavaScript 中&#xff0c;NaN 是一種特殊的數值類型&#xff0c;表示 “Not-a-Number”。它通常用于標識數學運算或類型轉換的結果無法產生有效數值的情況。 特性 類型為數值&#xff1a; console.log(typeof NaN); // "number"盡管 NaN 表示 “不是…
閱讀更多...
虛幻引擎結構之UWorld

虛幻引擎結構之UWorld

Uworld -> Ulevel ->Actors -> AActor 在虛幻引擎中&#xff0c;UWorld 類扮演著至關重要的角色&#xff0c;它就像是游戲世界的總指揮。作為游戲世界的核心容器&#xff0c;UWorld 包含了構成游戲體驗的眾多元素&#xff0c;從游戲實體到關卡設計&#xff0c;再到物…
閱讀更多...
java中logback怎么開啟異步功能

java中logback怎么開啟異步功能

在Java中使用Logback時&#xff0c;開啟異步日志記錄功能可以通過配置AsyncAppender來實現。異步日志記錄可以顯著提高應用程序的性能&#xff0c;因為它將日志記錄操作從主線程移到了后臺線程執行&#xff0c;從而減少了主線程的阻塞時間。 步驟 1: 添加 Logback 配置文件 確…
閱讀更多...
2024第一屆Solar杯應急響應挑戰賽

2024第一屆Solar杯應急響應挑戰賽

日志流量 日志流量-1 直接放到D盾分析 解碼 flag{A7b4_X9zK_2v8N_wL5q4} 日志流量-2 哥斯拉流量 工具解一下 flag{sA4hP_89dFh_x09tY_lL4SI4} 日志流量-3 tcp流6復制data流 解碼 改pdf flag{dD7g_jk90_jnVm_aPkcs} 內存取證 內存取證-1 vol.py -f 123.raw --profileWin…
閱讀更多...
HarmonyOS Next 實現登錄注冊頁面(ARKTS) 并使用Springboot作為后端提供接口

HarmonyOS Next 實現登錄注冊頁面(ARKTS) 并使用Springboot作為后端提供接口

1. HarmonyOS next ArkTS ArkTS圍繞應用開發在 TypeScript &#xff08;簡稱TS&#xff09;生態基礎上做了進一步擴展&#xff0c;繼承了TS的所有特性&#xff0c;是TS的超集 ArkTS在TS的基礎上擴展了struct和很多的裝飾器以達到描述UI和狀態管理的目的 以下代碼是一個基于…
閱讀更多...
Spring Boot教程之四十：使用 Jasypt 加密 Spring Boot 項目中的密碼

Spring Boot教程之四十：使用 Jasypt 加密 Spring Boot 項目中的密碼

如何使用 Jasypt 加密 Spring Boot 項目中的密碼 在本文中&#xff0c;我們將學習如何加密 Spring Boot 應用程序配置文件&#xff08;如 application.properties 或 application.yml&#xff09;中的數據。在這些文件中&#xff0c;我們可以加密用戶名、密碼等。 您經常會遇到…
閱讀更多...
【Vue】如何在 Vue 3 中使用組合式 API 與 Vuex 進行狀態管理的詳細教程

【Vue】如何在 Vue 3 中使用組合式 API 與 Vuex 進行狀態管理的詳細教程

如何在 Vue 3 中使用組合式 API 與 Vuex 進行狀態管理的詳細教程。 安裝 Vuex 首先&#xff0c;在你的 Vue 3 項目中安裝 Vuex。可以使用 npm 或 yarn&#xff1a; npm install vuexnext --save # or yarn add vuexnext創建 Store 在 Vue 3 中&#xff0c;你可以使用 creat…
閱讀更多...
七、隊列————相關概念詳解

七、隊列————相關概念詳解

隊列————相關概念詳解 前言一、隊列1.1 隊列是什么?1.2 隊列的類比 二、隊列的常用操作三、隊列的實現3.1 基于數組實現隊列3.1.1 基于環形數組實現的隊列3.1.2 基于動態數組實現的隊列 3.2 基于鏈表實現隊列 四、隊列的典型應用總結 前言 本篇文章&#xff0c;我們一起來…
閱讀更多...
基于 Ragflow 搭建知識庫-初步實踐

基于 Ragflow 搭建知識庫-初步實踐

基于 Ragflow 搭建知識庫-初步實踐 一、簡介 Ragflow 是一個強大的工具&#xff0c;可用于構建知識庫&#xff0c;實現高效的知識檢索和查詢功能。本文介紹如何利用 Ragflow 搭建知識庫&#xff0c;包括環境準備、安裝步驟、配置過程以及基本使用方法。 二、環境準備 硬件要…
閱讀更多...
Pandas03

Pandas03

Pandas01 Pandas02 文章目錄 內容回顧1 排序和統計函數2 缺失值處理2.1 認識缺失值2.2 缺失值處理- 刪除2.3 缺失值處理- 填充非時序數據時序數據 3 Pandas數據類型3.1 數值類型和字符串類型之間的轉換3.2 日期時間類型3.3 日期時間索引 4 分組聚合4.1 分組聚合的API使用4.2 分…
閱讀更多...
springboot整合log4j2日志框架1

springboot整合log4j2日志框架1

一 log4j基本知識 1.1 log4j的日志級別 Log4j定義了8個級別的log&#xff08;除去OFF和ALL&#xff0c;可以說分為6個級別&#xff09;&#xff0c;優先級從低到高依次為&#xff1a;All&#xff0c;trace&#xff0c;debug&#xff0c;info&#xff0c;warn&#xff0c;err…
閱讀更多...
Spring源碼_05_IOC容器啟動細節

Spring源碼_05_IOC容器啟動細節

前面幾章&#xff0c;大致講了Spring的IOC容器的大致過程和原理&#xff0c;以及重要的容器和beanFactory的繼承關系&#xff0c;為后續這些細節挖掘提供一點理解基礎。掌握總體脈絡是必要的&#xff0c;接下來的每一章都是從總體脈絡中&#xff0c; 去研究之前沒看的一些重要…
閱讀更多...
WPF使用OpenCvSharp4

WPF使用OpenCvSharp4

WPF使用OpenCvSharp4 創建項目安裝OpenCvSharp4 創建項目 安裝OpenCvSharp4 在解決方案資源管理器中&#xff0c;右鍵單擊項目名稱&#xff0c;選擇“管理 NuGet 包”。搜索并安裝以下包&#xff1a; OpenCvSharp4OpenCvSharp4.ExtensionsOpenCvSharp4.runtime.winSystem.Man…
閱讀更多...
leetcode 3083. 字符串及其反轉中是否存在同一子字符串 簡單

leetcode 3083. 字符串及其反轉中是否存在同一子字符串 簡單

給你一個字符串 s &#xff0c;請你判斷字符串 s 是否存在一個長度為 2 的子字符串&#xff0c;在其反轉后的字符串中也出現。 如果存在這樣的子字符串&#xff0c;返回 true&#xff1b;如果不存在&#xff0c;返回 false 。 示例 1&#xff1a; 輸入&#xff1a;s "…
閱讀更多...
TCP-UDP調試工具推薦：Socket通信測試教程（附詳細圖解）

TCP-UDP調試工具推薦：Socket通信測試教程（附詳細圖解）

前言 在網絡編程與應用開發中&#xff0c;調試始終是一項不可忽視的重要環節。尤其是在涉及TCP/IP、UDP等底層網絡通信協議時&#xff0c;如何確保數據能夠準確無誤地在不同節點間傳輸&#xff0c;是許多開發者關注的核心問題。 調試的難點不僅在于定位連接建立、數據流控制及…
閱讀更多...
Vue.js框架：在線教育系統的安全性與穩定性

Vue.js框架：在線教育系統的安全性與穩定性

2.1系統開發使用的關鍵技術 本系統在開發中選擇B/S框架進行設計&#xff0c;語言采用Java&#xff0c;數據庫采用Mysql&#xff0c;并在設計中加入VUE.js技術&#xff0c;本系統的運行環境為Idea。 2.2 VUE.js技術介紹 VUE.js是一個用來開發前臺界面的JavaScript框架&#xff0…
閱讀更多...
最新文章

Copyright @ 2022~2023