色影院波多野结衣,国产精品日韩无码,免费国产无码99久久久

前言

對于剛剛接觸OpenHarmony應用開發的開發者，最快的入門方式就是開發一個簡單的應用，下面記錄了一個日歷應用的開發過程，通過日歷應用的開發，來熟悉基本圖形的繪制，ArkUI的組件的使用，UI組件生命周期，加深對OpenHarmony應用開發的理解。

效果展示

開發環境

開發工具：DevEco Studio 3.1 Release
開發環境：OpenHarmony API 9
開發語言：eTS

關于eTS

eTS語言：基于TypeScript（簡稱TS）拓展的出來的，是OpenHarmony應用開發語言，使用ArkUI框架提供的組件進行界面開發。

什么是TypeScript：
TypeScript 是微軟開發的一個開源的編程語言，是面向對象強類型化的，在 JAVAScript 的基礎上引入了靜態類型、類、接口的概念。

TypeScript 和 JavaScript 的區別：

TypeScript 是 JavaScript 的超集，在JavaScript的基礎上拓展了語法，包含了 JavaScript 的所有元素
在TypeScript 中的數據要求有明確的類型，而JavaScript中沒有
TypeScript在編譯時可以發現錯誤，JavaScript只有在運行時報錯

布局容器組件

Column ：沿垂直方向布局的容器，可以包含多個子組件
Row：沿水平方向布局容器，可以包含多個子組件
Stack：堆疊容器，子組件按照順序依次入棧，后一個子組件覆蓋前一個子組件，可以包含多個子組件
Flex：彈性布局，元素在容器內水平居中，垂直等間隔分散，可以包含多個子組件
Scroll：可滑動的容器組件，當子組件的布局尺寸超過父組件的視口時，內容可以滑動，內部只支持單個子組件，可支持垂直或者水平滑動
Tabs：一種可以通過頁簽進行內容視圖切換的容器組件，每個頁簽對應一個內容視圖，只能包含子組件TabContent
List：列表包含一系列相同寬度的列表項。適合連續、多行呈現同類數據，例如圖片和文本，只能包含ListItem子組件
Swiper：滑動容器，提供左右切換子組件顯示的能力，可以包含多個子組件
Grid：網格容器，由“行”和“列”分割的單元格所組成，通過指定“項目”所在的單元格做出各種各樣的布局，只能包含GridItem子組件

繪制組件

Circle：圓形繪制組件
Ellipse：橢圓繪制組件
Line：直線繪制組件
Polyline：折線繪制組件
Polygon：多邊形繪制組件
Path：路徑繪制組件
Rect：矩形繪制組件
Shape：繪制組件的父組件，父組件中會描述所有繪制組件均支持的通用屬性。

自定義組件

自定義組件生命周期函數

aboutToAppear：在組件的 build 函數之前執行，可以做數據的初始化操作。
aboutToDisappear：在組件銷毀之前執行，不允許改變狀態變量，會導致應用程序行為不穩定，可以做資源的釋放操作。
onPageShow：僅@Entry修飾的自定義組件生效，應用進入前臺臺，頁面顯示時觸發。
onPageHide：僅@Entry修飾的自定義組件生效，應用進入后臺，頁面消失時觸發。

自定義組件常用屬性

@State ：變量需要本地初始化，初始化的值可以被構造參數覆蓋；
@Prop：必須通過構造函數參數初始化，屬于單向數據綁定，使用其父組件提供的@State變量進行初始化
@Link：必須通過構造函數參數進行初始化，屬于雙向數據綁定，子組件對@Link變量的更改將同步修改父組件的@State變量；

實現過程

日歷一頁顯示42天，包括上個月、當前月、下個月的天數，上個月和下個月的日期顯示灰色，點擊日期顯示選中效果。
支持選擇年份、月份，指定一個日期，獲取當前月的天數，根據該月1號在一周中的第幾天，獲取上個月顯示的天數，以及下個月顯示的天數。

獲取上一個月的天數，根據指定月份的1號在一周的第幾天，上月最大天數，計算出上個月天數，以object的形式添加到數組，以便區分，代碼如下：

const prevMonthDays = [];
//獲取上個月最大天數
let prevLastDay = new Date(year, month-1, 0).getDate();
//獲取某月1號所在一周的第幾天
let startWeek = new Date(year, month, 1).getDay();
// 上個月的最大天數減去當前月1號所在一周的第幾天
for (let i = prevLastDay - startWeek + 1; i <= prevLastDay; i++) {
      prevMonthDays.push({
        date: new Date(year, month - 1, i),
        status: 'prev'
      });
}

獲取下一個月的天數，根據當前月份的1號在一周的第幾天，當前月份的最大天數，計算出下個月天數，以object的形式添加到數組，以便區分，代碼如下：

const nextMonthDays = [];
//獲取下個月最大天數
let curLastDay = new Date(year, month, 0).getDate();
//獲取當前月份1號在一周的第幾天
let startWeek = new Date(year, month, 1).getDay();
//一頁的天數減去當前月份的天數和上個月的天數
for (let i = 1; i <= 42 - startWeek - curLastDay + 1; i++) {
      nextMonthDays.push({
        date: new Date(year, month + 1, i),
        status: 'next'
      });
}

獲取當前月的天數，以object的形式添加到數組，以便區分，代碼如下：

let curLastDay = new Date(year, month, 0).getDate();
for (let i = 1; i <= curLastDay; i++) {
      curMonthDays.push({
        date: new Date(year, month, i),
		
        status: 'current'
      });
}

屏幕適配

屏幕適配需要用到媒體查詢的接口，可以根據設備參數，例如：屏幕分辨率、橫豎屏切換來修改應用的樣式。

首先導入媒體查詢模塊：

import mediaquery from '@ohos.mediaquery'

然后通過matchMediaSync接口設置媒體查詢條件，并保存返回的條件監聽句柄，例如：監聽設備類型，橫豎屏狀態。

//監聽橫豎屏狀態
private listener: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(orientation: landscape)');
//監聽當前設備類型
private deviceListener: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('screen and (device-type: default)');

定義觸發回調函數，當匹配到媒體查詢條件時會觸發此回調函數。

onOrientationChange = (mediaQueryResult) => {
  if (mediaQueryResult.matches) {
    this.calendarWidth = "70%"
    this.titleBarLeft = 80
  } else {
    this.calendarWidth = "100%"
    this.titleBarLeft = 20
  }
}
onDeviceTypeChange = (mediaQueryResult) => {
  if(mediaQueryResult.matches){
    this.titleBarLeftTop = 10
    this.weekHeight = 30
    this.pikerDialogHeight = 200
    console.log("onDeviceTypeChange  device-type: default")
  }else{
    this.titleBarLeftTop = 40
    this.weekHeight = 50
    this.pikerDialogHeight = 280
  }
}

通過條件監聽句柄去注冊回調函數，在 aboutToAppear 組件初始化的時候執行注冊，退出時銷毀監聽。

//組件初始化
aboutToAppear() {
  this.listener.on('change', this.onOrientationChange);
}

//組件銷毀
aboutToDisappear(){
  this.listener.off('change', this.onOrientationChange);
}

數據懶加載

當列表加載的數據過大時，直接采用循環渲染方式，導致頁面啟動時間過長，可以使用LazyForEach組件進行數據的懶加載進行優化，按需加載數據并創建相應組件。

定義一個類并實現IDataSource接口：

export class YearData implements IDataSource{

  private list: number[] = []
  private listener: DataChangeListener

  constructor(list: number[]) {
    this.list = list
  }

  totalCount(): number {
    return this.list.length
  }

  getData(index: number): any {
    return this.list[index]
  }

  getDatAIndex(data:any){
    return this.list.indexOf(data)
  }

  registerDataChangeListener(listener: DataChangeListener): void {
    this.listener = listener
  }

  unregisterDataChangeListener() {
  }
}

在頁面中導入并使用。

import { YearData } from '../datasource/YearData'

private data: YearData = new YearData([])

LazyForEach(this.data, (item: string) => {
        ListItem() {
          Row() {
            Text(item).fontSize(20).margin({ left: 10 })
          }
        }
        .onClick(() => {
          this.data.pushData('item value: ' + this.data.totalCount())
        })
      }, item => item)
}