【每日學點HarmonyOS Next知識】自定義對話框關閉、WaterFlow嵌套、狀態欄顏色、滾動吸附、滾動動效

1、HarmonyOS 自定義對話框自動關閉的問題?

啟動頁做了個隱私協議彈窗,autoCancel為false。UI中使用 Text() ContainerSpan() Span()組件,設置了點擊事件,點擊后使用router.pushUrl()的方法跳轉到協議頁面。點擊時,對話框消失了同時頁面進行了跳轉。點擊事件中沒有調用close操作。

使用Stack組件模擬實現Dialog的效果,參考下以下demo:

import router from '@ohos.router';@Entry
@Component
struct First {@State textValue: string  = 'Hello World'// 顯隱控制設置為不占用@State visible: Visibility = Visibility.Nonebuild() {// 使用stack可以實現假的dialog覆蓋原頁面上面Stack() {Row() {// 初始頁面Column() {Text('Hello World').fontSize(50).fontWeight(FontWeight.Bold)// 觸發dialog的地方Button('click').onClick(() => {console.log("hit me!")if (this.visible == Visibility.Visible) {this.visible = Visibility.None} else {this.visible = Visibility.Visible}}).backgroundColor(0x777474).fontColor(0x000000)}.width('100%')}.height('100%').backgroundColor(0x885555)//這里開始是構造彈窗效果主要需要修改的地方,首先是加了一個半透明灰色的蒙層效果Text('').onClick(() => {if (this.visible == Visibility.Visible) {this.visible = Visibility.None} else {this.visible = Visibility.Visible}}).width('100%').height('100%')// 透明度可以自己調節.opacity(0.16).backgroundColor(0x000000).visibility(this.visible)Column() {// 這個可以調節對話框效果,柵格布局,xs,sm,md,lg分別為四種規格// 下面的breakpoints是用來區別當前屬于哪個類型的斷點// gridRow里的柵格數量為總數,gridCol里的就是偏移和假Dialog所占據的柵格數GridRow({columns:{xs:1 ,sm: 4, md: 8, lg: 12},breakpoints: { value: ["400vp", "600vp", "800vp"],reference: BreakpointsReference.WindowSize },}){GridCol({span:{xs:1 ,sm: 2, md: 4, lg: 8},offset:{xs:0 ,sm: 1, md: 2, lg: 2}}){// 這里放的就是原Dialog里的column里的東西,稍微改改應該就可以用了Column() {Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 })TextInput({ placeholder: '', text: this.textValue }).height(60).width('90%').onChange((value: string) => {this.textValue = value})Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 })Flex({ justifyContent: FlexAlign.SpaceAround }) {Button('cancel').onClick(() => {if (this.visible == Visibility.Visible) {this.visible = Visibility.None} else {this.visible = Visibility.Visible}}).backgroundColor(0xffffff).fontColor(Color.Black)Button('jump').onClick(() => {router.pushUrl({url: 'pages/Second'})}).backgroundColor(0xffffff).fontColor(Color.Red)}.margin({ bottom: 10 })}.backgroundColor(0xffffff).visibility(this.visible).clip(true).borderRadius(20)}}}.width('95%')//設置彈窗寬度}}
}
2、HarmonyOS WaterFlow嵌套問題?

WaterFlow嵌套在父List控件中(利用的懶加載LazyForEach獲取的數據,cachedCount設置的是5) 若WaterFlow的數據有100條當List滑動到WaterFlow的時候,這100條數據對應的WaterFlowItem 都會加載出來(觸發了onAppear()),如果數據過多,如增長到1000條,這樣是否會導致列表卡頓呢?是否有其他方法控制 預加載的WaterFlowItem的數量呢?

數據過多是不會導致列表卡頓的,關于控制預加載的WaterFlowItem數量問題 可以參考此鏈接,其中有詳細介紹:https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/performance/waterflow_optimization.md

3、HarmonyOS setWindowSystemBarProperties修改狀態欄顏色?

調用系統api setWindowSystemBarProperties修改狀態欄顏色 , APP上滑動,狀態欄還會是當前app設置的顏色,這種有修改狀態欄顏色的需求,是調用系統api,還是自己寫組件

可以設置下窗口為全屏布局,不去設置setWindowSystemBarProperties

mainWindowClass.setWindowLayoutFullScreen(true, (err: BusinessError) => {let errCode: number = err.code;if (errCode) {console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err));return;}console.info('Succeeded in setting the window layout to full-screen mode.');
});
4、HarmonyOS 仿AppBarLayout吸附使用Scroll滾動到頂時出現抖動問題?

通過onScroll移動scroll上層的組件,實現吸附效果,在滾動到頂部的場景下出現抖動問題,使用onWillScroll,onDidScroll問題更明顯

出現抖動是因為回到頂層使用了動畫,然后Text沒有動畫效果,才會出現這樣,這個目前吸頂的效果不建議在scroll的時候margin,可以參考下這個demo:

enum ScrollPosition {start,center,end
}class ItemClass {content: string = '';color: Color = Color.White;
}@Entry
@Component
struct NestedScrollDemo {@State listPosition: number = ScrollPosition.start; // 0代表滾動到List頂部,1代表中間值,2代表滾動到List底部。@State scrollPosition: number = ScrollPosition.start; // 0代表滾動到頁面頂部,1代表中間值,2代表滾動到頁面底部。@State showTitle: boolean = false;@State currentYOffset: number = 0;private arr: ItemClass[] = [];private colorArr: Color[] = [Color.White, Color.Blue, Color.Brown, Color.Green, Color.Gray];private scrollerForScroll: Scroller = new Scroller();private scrollerForList: Scroller = new Scroller();private scrollerForTitle: Scroller = new Scroller();@State currentIndex: number = 0;aboutToAppear() {for (let i = 0; i < 6; i++) {let data: ItemClass = {content: i.toString(),color: this.colorArr[i % 5]}this.arr.push(data);}}@BuildermyBuilder() {Row() {List({ space: 2, initialIndex: 0, scroller: this.scrollerForTitle }) {ForEach(this.arr, (item: ItemClass, index) => {ListItem() {Column() {Text(item.content);Divider().color('#000000').strokeWidth(5).visibility(index == this.currentIndex ? Visibility.Visible : Visibility.Hidden)}.width('25%').height(50).onClick(() => {this.scrollerForList.scrollToIndex(index)this.scrollerForScroll.scrollEdge(Edge.Bottom)})}})}.listDirection(Axis.Horizontal).scrollBar(BarState.Off)}.backgroundColor('#ffe2d0d0').alignItems(VerticalAlign.Center)}build() {Stack({ alignContent: Alignment.Top }) {Scroll(this.scrollerForScroll) {Column() {Image($r('app.media.app_icon')).width("100%").height("40%")this.myBuilder();List({ space: 10, scroller: this.scrollerForList }) {ForEach(this.arr, (item: ItemClass, index) => {ListItem() {Column() {Text(item.content)//添加其他內容}.width('100%').height(500).backgroundColor(item.color)}.width("100%").height(500).onVisibleAreaChange([0.8], (isVisible) => {if (isVisible) {this.currentIndex = index;this.scrollerForTitle.scrollToIndex(this.currentIndex);}})}, (item: ItemClass) => item.content)}.padding({ left: 10, right: 10 }).width("100%").edgeEffect(EdgeEffect.None).scrollBar(BarState.Off).onReachStart(() => {this.listPosition = ScrollPosition.start}).onReachEnd(() => {this.listPosition = ScrollPosition.end}).onScrollFrameBegin((offset: number, state: ScrollState) => {// 滑動到列表中間時if (!((this.listPosition == ScrollPosition.start && offset < 0)|| (this.listPosition == ScrollPosition.end && offset > 0))) {this.listPosition = ScrollPosition.center}// 如果頁面已滾動到底部,列表不在頂部或列表有正向偏移量if (this.scrollPosition == ScrollPosition.end&& (this.listPosition != ScrollPosition.start || offset > 0)) {return { offsetRemain: offset };} else {this.scrollerForScroll.scrollBy(0, offset)return { offsetRemain: 0 };}}).width("100%").height("calc(100% - 50vp)").backgroundColor('#F1F3F5')}}.scrollBar(BarState.Off).width("100%").height("100%").onScroll((xOffset: number, yOffset: number) => {this.currentYOffset = this.scrollerForScroll.currentOffset().yOffset;// 非(頁面在頂部或頁面在底部),則頁面在中間if (!((this.scrollPosition == ScrollPosition.start && yOffset < 0)|| (this.scrollPosition == ScrollPosition.end && yOffset > 0))) {this.scrollPosition = ScrollPosition.center}}).onScrollEdge((side: Edge) => {if (side == Edge.Top) {// 頁面在頂部this.scrollPosition = ScrollPosition.start} else if (side == Edge.Bottom) {// 頁面在底部this.scrollPosition = ScrollPosition.end}}).onScrollFrameBegin(offset => {if (this.scrollPosition == ScrollPosition.end) {return { offsetRemain: 0 };} else {return { offsetRemain: offset };}})}.width('100%').height('100%').backgroundColor(0xDCDCDC)}
}
5、HarmonyOS Grid上下滑動的動效和需求的差距很大?

Grid上下滑動的動效和需求的差距很大

參考DEMO:

@Entry
@Component
export struct Page240605101412064_temp {weekDatas: string[] = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];// private startDay: Date = new Date(2024, 4, 1) // 當前顯示的月份的第一天data: Array<CalendaEntity> = [];@State gridTop: number = 0@State blankTop: number = 0private endBlankY: number = 0private endGridY: number = 0private isStart: boolean = trueprivate scroller: Scroller = new Scroller()private today: Date = new Date()private startDay: Date = new Date(this.today.getFullYear(), this.today.getMonth(), 1)aboutToAppear(): void {const monthDataWithWeekday = this.calcDatas(this.startDay)monthDataWithWeekday.forEach(item => {console.log("日期是》》》》》》》" + item.year, ' ', item.month, ' ', item.day, ' ', item.weekday);});}calcDatas(startDate: Date): Array<CalendaEntity> {const endDate = new Date(startDate.getFullYear(), startDate.getMonth() + 1, 0);let currentDate = new Date(startDate);while (currentDate <= endDate) {const weekday = currentDate.getDay();const weekdayNames = [0, 1, 2, 3, 4, 5, 6];const weekdayStr = weekdayNames[weekday];let year = currentDate.getFullYear()let month = currentDate.getMonth() + 1let day = currentDate.getDate().toString()if (day === this.today.getDate().toString()) {day = '今';}this.data.push({year,month,day,weekday: weekdayStr});currentDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() + 1)}if (this.data.length !== 0) {let firstWeek = this.data[0].weekday;let tempData: Array<CalendaEntity> = [];while (firstWeek > 0) {tempData.push(new CalendaEntity());firstWeek--;}this.data = tempData.concat(this.data);let lastWeek = this.data[this.data.length - 1].weekday;while (lastWeek < 6) {this.data.push(new CalendaEntity())lastWeek++;}}return this.data;}build() {Column() {Row() {ForEach(this.weekDatas, (item: string) => {Text(item).textAlign(TextAlign.Center).fontColor('#9E9E9E').fontSize(14).layoutWeight(1)})}// .backgroundColor().alignItems(VerticalAlign.Center).height(60)Scroll(this.scroller) {Column() {Grid() {ForEach(this.data, (item: CalendaEntity) => {GridItem() {Stack() {Image("").backgroundColor('#35cfba').borderRadius(100).width(34).height(34).visibility((item.day === "0" || item.day !== '今') ? Visibility.Hidden : Visibility.Visible)Column() {Text(item.day === "0" ? " " : item.day).fontSize(14).fontColor(Color.Gray).width('14%').textAlign(TextAlign.Center)Text().backgroundColor(Color.Red).width(4).height(4).borderRadius(50).visibility(item.day === "0" ? Visibility.Hidden : Visibility.Visible)}}}.onClick(() => {console.log("dddddddddd");})})}.rowsGap(20)// .columnsGap(10).backgroundColor('#fff').margin({ top: this.gridTop }).onAreaChange((oldValue: Area, newValue: Area) => {console.log('h', newValue.height)// h 304})Blank().layoutWeight(1).backgroundColor(Color.Gray).margin({ top: this.blankTop })}.height('calc(100% + 560vp)')}.height('100%').scrollBar(BarState.Off).onReachStart(() => {this.isStart = true}).onScrollFrameBegin((offset: number, state: ScrollState) => {console.log('offset', offset)if (this.isStart) {return { offsetRemain: 0 }}if (!this.scroller.currentOffset().yOffset) {this.isStart = false}return { offsetRemain: offset }}).parallelGesture(PanGesture({ direction: PanDirection.Vertical, distance: 1 }).onActionStart((event: GestureEvent) => {console.info('Pan start')}).onActionUpdate((event: GestureEvent) => {console.log('event.offsetY', event.offsetY)console.log('this.isStart', this.isStart)if (event && this.isStart) {if (this.blankTop == 0) {if (this.endGridY == 0) {this.gridTop = this.endGridY + event.offsetY < -(304 / 6 * 2) ? -(304 / 6 * 2) :this.endGridY + event.offsetY > 0 ? 0 : this.endGridY + event.offsetYconsole.log('this.gridTop', this.gridTop)} else {this.gridTop = this.endBlankY + this.endGridY + event.offsetY < -(304 / 6 * 2) ? -(304 / 6 * 2) :this.endBlankY + this.endGridY + event.offsetY > 0 ? 0 :this.endBlankY + this.endGridY + event.offsetYconsole.log('this.gridTop', this.gridTop)}}if (this.gridTop == -(304 / 6 * 2)) {if (this.endBlankY == 0) {this.blankTop =this.endBlankY + event.offsetY + (304 / 6 * 2) < -(304 / 6 * 3) ? -(304 / 6 * 3) :this.endBlankY + event.offsetY + (304 / 6 * 2) > 0 ? 0 :this.endBlankY + event.offsetY + (304 / 6 * 2)console.log('this.blankTop', this.blankTop)} else {this.blankTop =this.endBlankY + event.offsetY < -(304 / 6 * 3) ? -(304 / 6 * 3) :this.endBlankY + event.offsetY > 0 ? 0 :this.endBlankY + event.offsetYconsole.log('this.blankTop', this.blankTop)}}}}).onActionEnd((event: GestureEvent) => {this.endBlankY = this.blankTopthis.endGridY = this.gridTopconsole.log('this.endBlankY', this.endBlankY)console.log('this.endGridY', this.endGridY)}))}.width('100%')// .height(330)}
}export class CalendaEntity {year: number = 0;month: number = 0;day: string = "0";weekday: number = -1;
}export enum OptMode {WEEK = "week",MONTH = "month",
}

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

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

相關文章

【物聯網-WIFI】

物聯網-WIFI ■ ESP32-C3-模塊簡介■ ESP32-C3-■ ESP32-C3-■ WIFI-模組■ WIFI-■ WIFI- ■ ESP32-C3-模塊簡介 ■ ESP32-C3- ■ ESP32-C3- ■ WIFI-模組 ■ WIFI- ■ WIFI-

Xilinx ZYNQ FSBL解讀:LoadBootImage()

篇首 最近突發奇想&#xff0c;Xilinx 的集成開發環境已經很好了&#xff0c;很多必要的代碼都直接生成了&#xff0c;這給開發者帶來了巨大便利的同時&#xff0c;也讓人錯過了很多代碼的精彩&#xff0c;可能有很多人用了很多年了&#xff0c;都還無法清楚的理解其中過程。博…

LeetCode1871 跳躍游戲VII

LeetCode 跳躍游戲 IV&#xff1a;二進制字符串的跳躍問題 題目描述 給定一個下標從 0 開始的二進制字符串 s 和兩個整數 minJump 和 maxJump。初始時&#xff0c;你位于下標 0 處&#xff08;保證該位置為 0&#xff09;。你需要判斷是否能到達字符串的最后一個位置&#xf…

Burpsuite使用筆記

Burpsuite使用筆記 抓包設置代理open Browserintercept on輸入要抓包的網站回車ForwardHTTP history查看抓包數據其他瀏覽器配置burpsuite代理瀏覽器代理器插件配置打開代理同樣步驟訪問原理三級目錄抓包 設置代理 open Browser 打開內置瀏覽器 intercept on 輸入要抓包的網…

Windows 遠程桌面多端口訪問,局域網虛擬IP映射多個Windows 主機解決方案

情景 項目現場4G路由局域網中兩臺主機通過VPN連接到公司內網&#xff0c;實現遠程管理&#xff0c;要求映射兩個Windows 桌面進行管理。 目錄 情景 網絡 思路 已知 問題解決 1.客戶端通過VPN進入內網路由器配置NAT 2.使用遠程主機遠程桌面功能&#xff1a;IP端口號訪問 …

【深度學習】讀寫文件

讀寫文件 到目前為止&#xff0c;我們討論了如何處理數據&#xff0c;以及如何構建、訓練和測試深度學習模型。 然而&#xff0c;有時我們希望保存訓練的模型&#xff0c;以備將來在各種環境中使用&#xff08;比如在部署中進行預測&#xff09;。 此外&#xff0c;當運行一個…

仿Manus一

復制 ┌───────────────┐ ┌─────────────┐ │ 主界面UI │?─────?│ 會話管理模塊 │ └───────┬───────┘ └──────┬──────┘│ │▼ ▼ ┌─…

VS Code C++ 開發環境配置

VS Code 是當前非常流行的開發工具. 本文講述如何配置 VS Code 作為 C開發環境. 本文將按照如下步驟來介紹如何配置 VS Code 作為 C開發環境. 安裝編譯器安裝插件配置工作區 第一個步驟的具體操作會因為系統不同或者方案不同而有不同的選擇. 環境要求 首先需要立即 VS Code…

Flutter 學習之旅 之 flutter 不使用插件,實現簡單帶加載動畫的 LoadingToast 功能

Flutter 學習之旅 之 flutter 不使用插件&#xff0c;實現簡單帶加載動畫的 LoadingToast 功能 目錄 Flutter 學習之旅 之 flutter 不使用插件&#xff0c;實現簡單帶加載動畫的 LoadingToast 功能 一、簡單介紹 二、LoadingToast 三、簡單案例實現 四、關鍵代碼 一、簡單…

Spring (八)AOP-切面編程的使用

目錄 實現步驟&#xff1a; 1 導入AOP依賴 2 編寫切面Aspect 3 編寫通知方法 4 指定切入點表達式 5 測試AOP動態織入 圖示&#xff1a; 一 實現步驟&#xff1a; 1 導入AOP依賴 <!-- Spring Boot AOP依賴 --><dependency><groupId>org.springframewor…

開源數字人模型Heygem

一、Heygem是什么 Heygem 是硅基智能推出的開源數字人模型&#xff0c;專為 Windows 系統設計。基于先進的AI技術&#xff0c;僅需1秒視頻或1張照片&#xff0c;能在30秒內完成數字人形象和聲音克隆&#xff0c;在60秒內合成4K超高清視頻。Heygem支持多語言輸出、多表情動作&a…

uniapp開通開屏廣告后動態開啟或關閉開屏廣告

近期使用uniapp開發的APP有uniad的廣告對接&#xff0c;并且要求會員用戶不顯示包含開屏廣告在內的廣告&#xff0c;除開屏廣告外的廣告都可以通過uniapp廣告組件控制是否顯示 因uniad的開屏廣告無需代碼開發&#xff0c;經過uniad客服指點可在App.vue中的onLaunch生命周期中執…

神經網絡為什么要用 ReLU 增加非線性?

在神經網絡中使用 ReLU&#xff08;Rectified Linear Unit&#xff09; 作為激活函數的主要目的是引入非線性&#xff0c;這是神經網絡能夠學習復雜模式和解決非線性問題的關鍵。 1. 為什么需要非線性&#xff1f; 1.1 線性模型的局限性 如果神經網絡只使用線性激活函數&…

使用SSH密鑰連接本地git 和 github

目錄 配置本地SSH&#xff0c;添加到github首先查看本地是否有SSH密鑰生成SSH密鑰&#xff0c;和郵箱綁定將 SSH 密鑰添加到 ssh-agent&#xff1a;顯示本地公鑰*把下面這一串生成的公鑰存到github上* 驗證SSH配置是否成功終端跳轉到本地倉庫把http協議改為SSH&#xff08;如果…

關于AI數據分析可行性的初步評估

一、結論&#xff1a;可在部分環節嵌入&#xff0c;無法直接處理大量數據 1.非本地部署的AI應用處理非機密文件沒問題&#xff0c;內部文件要注意數據安全風險。 2.AI&#xff08;指高規格大模型&#xff09;十分適合探索性研究分析&#xff0c;對復雜報告無法全流程執行&…

矩陣分析-淺要理解(深度學習方向)

梯度分析與最優化 在深度學習的任務中&#xff0c;我們所期望的是訓練一個神經網絡&#xff0c;使得預測結果與真實標簽之間的誤差最小化&#xff0c;這可以近似看作是一個提供梯度下降等優化找到全局最優解的凸優化問題。 奇異值分解 在信息工程領域&#xff0c;對數據處理的…

使用DeepSeek+藍耘快速設計網頁簡易版《我的世界》小游戲

前言&#xff1a;如今&#xff0c;借助先進的人工智能模型與便捷的云平臺&#xff0c;即便是新手開發者&#xff0c;也能開啟創意游戲的設計之旅。DeepSeek 作為前沿的人工智能模型&#xff0c;具備強大的功能與潛力&#xff0c;而藍耘智算云平臺則為其提供了穩定高效的運行環境…

固定表頭、首列 —— uniapp、vue 項目

項目實地&#xff1a;也可以在 【微信小程序】搜索體驗&#xff1a;xny.handbook 另一個體驗項目&#xff1a;官網 一、效果展示 二、代碼展示 &#xff08;1&#xff09;html 部分 <view class"table"><view class"tr"><view class&quo…

【學習筆記】Numpy和Tensor的區別

1. NumPy 和 PyTorch Tensor 的格式對比 NumPy 使用的是 numpy.ndarray&#xff0c;而 PyTorch 使用的是 torch.Tensor&#xff0c;兩者的格式在數據存儲和計算方式上有所不同。 NumPy (numpy.ndarray) import numpy as np array np.array([[1.0, 2.0, 3.0], [4.0, 5.0, 6.…

每天一道算法題【藍橋杯】【在排序數組中查找元素的第一個位置和最后一個位置】

思路 本題為查找左邊界和右邊界的標準模型 查找左邊界 int left 0, right nums.size() - 1, mid 0; //查找左邊界 while (left < right) { mid left (right - left) / 2; if (nums[mid] < target) left mid 1; else right mid; } 查找右邊界 int left 0, r…