0
  • 聊天消息
  • 系統(tǒng)消息
  • 評(píng)論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線課程
  • 觀看技術(shù)視頻
  • 寫(xiě)文章/發(fā)帖/加入社區(qū)
會(huì)員中心
創(chuàng)作中心

完善資料讓更多小伙伴認(rèn)識(shí)你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

harmonyos開(kāi)發(fā)者聯(lián)盟

jf_46214456 ? 來(lái)源:jf_46214456 ? 作者:jf_46214456 ? 2024-05-06 15:27 ? 次閱讀

介紹

本篇Codelab是基于Flex容器組件,實(shí)現(xiàn)彈性布局效果。彈性布局的特點(diǎn)是頁(yè)面元素的寬度按照屏幕分辨率進(jìn)行適配調(diào)整,但整體布局不變。

相關(guān)概念

  • [Flex組件]:以彈性方式布局子組件的容器組件。
  • [Search組件]:搜索框組件,適用于瀏覽器的搜索內(nèi)容輸入框等應(yīng)用場(chǎng)景。
  • [Text組件]:顯示一段文本的組件。
  • [Image組件]:圖片組件,支持本地圖片和網(wǎng)絡(luò)圖片的渲染展示。
  • [Scroll組件]:可滑動(dòng)的容器組件,當(dāng)子組件的布局尺寸超過(guò)父組件的視口時(shí),內(nèi)容可以滑動(dòng)。
  • [條件渲染]:條件渲染可根據(jù)應(yīng)用的不同狀態(tài),使用if、else和else if渲染對(duì)應(yīng)狀態(tài)下的UI內(nèi)容。
  • [循環(huán)渲染]:基于數(shù)組類(lèi)型數(shù)據(jù)執(zhí)行循環(huán)渲染。

環(huán)境搭建

軟件要求

  • [DevEco Studio]版本:DevEco Studio 3.1 Release。
  • OpenHarmony SDK版本:API version 9。

硬件要求

  • 開(kāi)發(fā)板類(lèi)型:[潤(rùn)和RK3568開(kāi)發(fā)板]。
  • OpenHarmony系統(tǒng):3.2 Release。

環(huán)境搭建

完成本篇Codelab我們首先要完成開(kāi)發(fā)環(huán)境的搭建,本示例以RK3568開(kāi)發(fā)板為例,參照以下步驟進(jìn)行:

  1. [獲取OpenHarmony系統(tǒng)版本]:標(biāo)準(zhǔn)系統(tǒng)解決方案(二進(jìn)制)。以3.2 Release版本為例:
  2. 搭建燒錄環(huán)境。
    1. [完成DevEco Device Tool的安裝]
    2. [完成RK3568開(kāi)發(fā)板的燒錄](méi)
  3. 搭建開(kāi)發(fā)環(huán)境。
    1. 開(kāi)始前請(qǐng)參考[工具準(zhǔn)備],完成DevEco Studio的安裝和開(kāi)發(fā)環(huán)境配置。
    2. 開(kāi)發(fā)環(huán)境配置完成后,請(qǐng)參考[使用工程向?qū)創(chuàng)建工程(模板選擇“Empty Ability”)。
    3. 工程創(chuàng)建完成后,選擇使用[真機(jī)進(jìn)行調(diào)測(cè)]。
    4. 鴻蒙開(kāi)發(fā)指導(dǎo)文檔:[qr23.cn/FBD4cY]

代碼結(jié)構(gòu)解讀

本篇Codelab只對(duì)核心代碼進(jìn)行講解,對(duì)于完整代碼,我們會(huì)在gitee中提供。

├──entry/src/main/ets	           // 代碼區(qū)
│  ├──common
│  │  └──constants
│  │     └──StyleConstants.ets     // 樣式常量類(lèi) 
│  ├──entryability
│  │  └──EntryAbility.ts           // 程序入口類(lèi)
│  ├──pages
│  │  └──HomePage.ets              // 主界面	
│  ├──view
│  │  ├──ClearSearch.ets           // 清除歷史記錄自定義組件
│  │  ├──FlexLayout.ets            // 彈性布局自定義組件
│  │  └──SearchInput.ets           // 搜索輸入框自定義組件
│  └──viewmodel
│     └──SearchViewModel.ets       // 歷史搜索數(shù)據(jù)類(lèi)
└──entry/src/main/resources        // 資源文件目錄

`HarmonyOSOpenHarmony鴻蒙文檔籽料:mau123789v直接拿`

搜狗高速瀏覽器截圖20240326151450.png

編寫(xiě)搜索框布局

在這個(gè)章節(jié)中,我們需要完成搜索框布局的編寫(xiě),并實(shí)現(xiàn)文本輸入和點(diǎn)擊事件。效果如圖所示:

在ets目錄下,點(diǎn)擊鼠標(biāo)右鍵 > New > Directory,新建名為view的自定義子組件目錄。然后在view目錄下,點(diǎn)擊鼠標(biāo)右鍵 > New > ArkTS File,新建名為SearchInput的ArkTS文件。最后在SearchInput.ets文件中,逐步完成如下操作:

  1. 使用@Component新增一個(gè)自定義組件,組件名為SearchInput。
  2. 在build()中使用Flex作為容器組件,實(shí)現(xiàn)子組件水平排列。
  3. 使用Search組件作為搜索框布局,Text組件作為搜索文本按鈕布局。
// SearchInput.ets
@Component
export default struct SearchInput {
  build() {
    Flex({ alignItems: ItemAlign.Center }) {
      // 搜索框布局
      Search()
        ...
	
      // 搜索文本按鈕布局
      Text($r('app.string.search'))
        ...
    }
    ...
  }
}

接下來(lái)我們實(shí)現(xiàn)Search組件的樣式及輸入功能,并將輸入的數(shù)據(jù)添加到數(shù)組searchArr中:

  1. 使用@State定義變量searchInput,存儲(chǔ)搜索框輸入的文本內(nèi)容。
  2. 在Search組件參數(shù)中,將變量searchInput賦值給參數(shù)value,參數(shù)placeholder填寫(xiě)提示內(nèi)容,參數(shù)icon表示搜索圖標(biāo)路徑。
  3. 設(shè)置高度height、寬度width、背景顏色backgroundColor、提示內(nèi)容顏色placeholderColor等屬性。
  4. 設(shè)置onChange事件,將用戶(hù)輸入的內(nèi)容綁定到變量searchInput中。
  5. 使用@Link定義一個(gè)數(shù)組變量searchArr,點(diǎn)擊搜索文本按鈕時(shí),將用戶(hù)輸入的內(nèi)容即searchInput的值,通過(guò)數(shù)組的unshift()方法,在數(shù)組searchArr的頭部添加數(shù)據(jù)。
// SearchInput.ets
@Component
export default struct SearchInput {
  @State searchInput: string = '';
  @Link searchArr: Array< string >;

  build() {
    Flex({ alignItems: ItemAlign.Center }) {
      // 搜索框布局
      Search({
        value: this.searchInput,
        placeholder: StyleConstants.SEARCH_PLACEHOLDER,
        icon: StyleConstants.SEARCH_ICON
      })
        .placeholderColor($r('app.color.placeholder_color'))
        .placeholderFont({ size: $r('app.float.font_size') })
        .textFont({ size: $r('app.float.font_size') })
        .height(StyleConstants.SEARCH_HEIGHT)
        .width(StyleConstants.SEARCH_WIDTH)
        .backgroundColor(Color.White)
        ...
        .onChange((value: string) = > {
          this.searchInput = value;
        })

      // 搜索文本按鈕布局
      Text($r('app.string.search'))
        ...
        .onClick(() = > {
          if (this.searchInput !== '' && this.searchInput.trim().length > 0) {
            // 使用unshift在數(shù)組頭部添加數(shù)據(jù)
            this.searchArr.unshift(this.searchInput.trim());
          }
          this.searchInput = '';
        })
    }
    ...
  }
}

然后我們?cè)贖omePage.ets首頁(yè)中,引入SearchInput搜索輸入框自定義組件。

  1. 使用@State定義數(shù)組變量searchArr,存放最近搜索文本內(nèi)容。
  2. 在構(gòu)造參數(shù)中,使用$符號(hào)引用@State修飾的變量searchArr,將父組件的變量searchArr與子組件searchArr變量關(guān)聯(lián)起來(lái)。
// HomePage.ets
import SearchInput from '../view/SearchInput';

@Entry
@Component
struct HomePage {
  @State searchArr: Array< string > = SearchViewModel.getSearchArrData();

  build() {
    Column() {
      // 搜索輸入框自定義組件
      SearchInput({ searchArr: $searchArr })
    }
    ...
  }
}

編寫(xiě)清除記錄布局

在這個(gè)章節(jié)中,我們需要完成清除記錄布局的編寫(xiě),并實(shí)現(xiàn)條件渲染。效果如圖所示:

在view目錄下,點(diǎn)擊鼠標(biāo)右鍵 > New > ArkTS File,新建名為ClearSearch的ArkTS文件。然后在ClearSearch.ets文件中,逐步完成如下操作:

  1. 使用@Component新增一個(gè)自定義組件,組件名為ClearSearch。
  2. 在build()中使用Flex作為容器組件,實(shí)現(xiàn)子組件水平排列。
  3. 使用if/else實(shí)現(xiàn)條件渲染:當(dāng)有搜索內(nèi)容時(shí),顯示最近搜索的文本和清除搜索內(nèi)容圖標(biāo);否則就顯示沒(méi)有搜索內(nèi)容和相關(guān)圖片。
  4. 使用@Link定義數(shù)組變量searchArr,當(dāng)點(diǎn)擊清除搜索內(nèi)容圖標(biāo)時(shí),所有最近搜索內(nèi)容清空。
// ClearSearch.ets
@Component
export default struct ClearSearch {
  // 搜索內(nèi)容數(shù)組
  @Link searchArr: Array< string >;

  build() {
    Flex({ alignItems: ItemAlign.Center }) {
      if (this.searchArr.length > 0) {
        Text($r('app.string.recent_searches'))
          ...

        Image($r('app.media.ic_delete'))
          ...
          .onClick(() = > {
            this.searchArr.splice(0, this.searchArr.length);
            this.searchArr.length = 0;
          })
      } else {
        Column() {
          Image($r('app.media.ic_no_search'))
            ...

          Text($r('app.string.no_search_content'))
            ...
        }
        ...
      }
    }
  }
}

然后我們?cè)贖omePage.ets首頁(yè)中,引入ClearSearch搜索輸入框自定義組件。

// HomePage.ets
import SearchInput from '../view/SearchInput';
import ClearSearch from '../view/ClearSearch';

@Entry
@Component
struct HomePage {
  @State searchArr: Array< string > = SearchViewModel.getSearchArrData();

  build() {
    Column() {
      // 搜索輸入框自定義組件
      SearchInput({ searchArr: $searchArr })
      // 清除搜索記錄自定義組件
      ClearSearch({ searchArr: $searchArr })
    }
    ...
  }
}

編寫(xiě)彈性布局

在這個(gè)章節(jié)中,我們需要完成彈性布局的功能樣式,并實(shí)現(xiàn)循環(huán)渲染。效果如圖所示:

在view目錄下,點(diǎn)擊鼠標(biāo)右鍵 > New > ArkTS File,新建名為FlexLayout的ArkTS文件。然后在FlexLayout.ets文件中,逐步完成如下操作:

  1. 使用@Component新增一個(gè)自定義組件,組件名為FlexLayout。
  2. 在build()中使用Flex作為容器,設(shè)置參數(shù)wrap為FlexWrap.Wrap時(shí)為彈性布局,實(shí)現(xiàn)自動(dòng)換行。
  3. 使用if實(shí)現(xiàn)條件渲染,當(dāng)有搜索內(nèi)容時(shí),顯示最近搜索的所有內(nèi)容。
  4. 使用@Link定義數(shù)組變量searchArr,表示子組件要顯示的所有最近搜索文本內(nèi)容。
  5. 使用ForEach遍歷變量searchArr,實(shí)現(xiàn)循環(huán)渲染。
// FlexLayout.ets
@Component
export default struct FlexLayout {
  @Link searchArr: Array< string >;

  build() {
    Scroll() {
      // Flex布局, wrap設(shè)置成FlexWrap.Wrap時(shí)為彈性布局
      Flex({ justifyContent: FlexAlign.Start, wrap: FlexWrap.Wrap }) {
        if (this.searchArr.length > 0) {
          // 循環(huán)渲染		
          ForEach(this.searchArr, (item: string) = > {
            Text(`${item}`)
              ...
          }, (item: string) = > JSON.stringify(item))
        }
      }
      ...
    }
  }
}

然后我們?cè)贖omePage.ets首頁(yè)中,引入FlexLayout搜索輸入框自定義組件。

// HomePage.ets
import SearchInput from '../view/SearchInput';
import ClearSearch from '../view/ClearSearch';
import FlexLayout from '../view/FlexLayout';

@Entry
@Component
struct HomePage {
  @State searchArr: Array< string > = SearchViewModel.getSearchArrData();

  build() {
    Column() {
      // 搜索輸入框自定義組件
      SearchInput({ searchArr: $searchArr })
      // 清除搜索記錄自定義組件
      ClearSearch({ searchArr: $searchArr })
      // 彈性布局自定義組件
      FlexLayout({ searchArr: $searchArr })
    }
    ...
  }
}

審核編輯 黃宇

聲明:本文內(nèi)容及配圖由入駐作者撰寫(xiě)或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場(chǎng)。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問(wèn)題,請(qǐng)聯(lián)系本站處理。 舉報(bào)投訴
  • 開(kāi)發(fā)板
    +關(guān)注

    關(guān)注

    25

    文章

    5119

    瀏覽量

    97944
  • 開(kāi)發(fā)者
    +關(guān)注

    關(guān)注

    1

    文章

    590

    瀏覽量

    17055
  • 鴻蒙
    +關(guān)注

    關(guān)注

    57

    文章

    2388

    瀏覽量

    42964
  • HarmonyOS
    +關(guān)注

    關(guān)注

    79

    文章

    1980

    瀏覽量

    30403
  • OpenHarmony
    +關(guān)注

    關(guān)注

    25

    文章

    3744

    瀏覽量

    16473
收藏 人收藏

    評(píng)論

    相關(guān)推薦

    線下 | HarmonyOS 2.0 手機(jī)開(kāi)發(fā)者 Beta 活動(dòng)

    /consumer/cn/activity/101608287564994799歡迎在鏈接中點(diǎn)擊 “我要報(bào)名”按鈕,注冊(cè)成為華為開(kāi)發(fā)者聯(lián)盟會(huì)員后免費(fèi)報(bào)名。報(bào)名成功后,我們將以官方郵件和短信的形式通知您報(bào)名結(jié)果。歡迎關(guān)注HarmonyOS
    發(fā)表于 12-21 10:11

    HarmonyOS開(kāi)發(fā)者

    HarmonyOS開(kāi)發(fā)者,HarmonyOS設(shè)備開(kāi)發(fā)學(xué)習(xí)路線HarmonyOS 2.0如約而至,內(nèi)存在128KB~128MB的終端設(shè)備廠商有
    發(fā)表于 07-22 09:53

    絕對(duì)干貨!HarmonyOS開(kāi)發(fā)者日資料全公開(kāi),鴻蒙開(kāi)發(fā)者都在看

    731HarmonyOS開(kāi)發(fā)者日大會(huì)PPT資料全在這了,想要了解的小伙伴可以自行下載啦~下載資料的小伙伴還可以在評(píng)論區(qū)回復(fù)領(lǐng)取5個(gè)積分哦1、HarmonyOS 職業(yè)認(rèn)證解讀:該主題是開(kāi)發(fā)者
    發(fā)表于 08-04 14:36

    請(qǐng)問(wèn)海外開(kāi)發(fā)者如何開(kāi)發(fā)HarmonyOS應(yīng)用?

    海外開(kāi)發(fā)者如何開(kāi)發(fā)HarmonyOS應(yīng)用?
    發(fā)表于 06-02 15:50

    喜報(bào)|HarmonyOS開(kāi)發(fā)者社區(qū)連獲業(yè)內(nèi)獎(jiǎng)項(xiàng),持續(xù)深耕開(kāi)發(fā)者生態(tài)

    臨近年末,各大平臺(tái)陸續(xù)揭曉年度榜單,表彰了具備強(qiáng)大影響力與做出突出貢獻(xiàn)的優(yōu)秀項(xiàng)目與團(tuán)隊(duì),而HarmonyOS開(kāi)發(fā)者社區(qū)作為技術(shù)分享,學(xué)習(xí)和展示的平臺(tái),輸出高質(zhì)量技術(shù)文章百余篇,連續(xù)獲得業(yè)內(nèi)各大
    發(fā)表于 01-19 14:32

    華為開(kāi)發(fā)者HarmonyOS零基礎(chǔ)入門(mén):四步實(shí)現(xiàn)HarmonyOS應(yīng)用

    華為開(kāi)發(fā)者HarmonyOS零基礎(chǔ)入門(mén):四步實(shí)現(xiàn)HarmonyOS應(yīng)用,可以自定義主鍵實(shí)際應(yīng)用在開(kāi)發(fā)者界面。
    的頭像 發(fā)表于 10-23 10:05 ?1968次閱讀
    華為<b class='flag-5'>開(kāi)發(fā)者</b><b class='flag-5'>HarmonyOS</b>零基礎(chǔ)入門(mén):四步實(shí)現(xiàn)<b class='flag-5'>HarmonyOS</b>應(yīng)用

    華為開(kāi)發(fā)者大會(huì)2021 HarmonyOS 3開(kāi)發(fā)者預(yù)覽版

    華為開(kāi)發(fā)者大會(huì)2021上,隨著全新的 HarmonyOS 3 開(kāi)發(fā)者預(yù)覽版發(fā)布,HarmonyOS 應(yīng)用與服務(wù)開(kāi)發(fā)工具套件全家桶也全面升級(jí),
    的頭像 發(fā)表于 10-23 11:20 ?1374次閱讀
    華為<b class='flag-5'>開(kāi)發(fā)者</b>大會(huì)2021 <b class='flag-5'>HarmonyOS</b> 3<b class='flag-5'>開(kāi)發(fā)者</b>預(yù)覽版

    華為開(kāi)發(fā)者分論壇HarmonyOS學(xué)生公開(kāi)課-10分鐘成為HarmonyOS開(kāi)發(fā)者

    2021華為開(kāi)發(fā)者分論壇HarmonyOS學(xué)生公開(kāi)課-10分鐘成為HarmonyOS開(kāi)發(fā)者
    的頭像 發(fā)表于 10-24 11:03 ?1965次閱讀
    華為<b class='flag-5'>開(kāi)發(fā)者</b>分論壇<b class='flag-5'>HarmonyOS</b>學(xué)生公開(kāi)課-10分鐘成為<b class='flag-5'>HarmonyOS</b><b class='flag-5'>開(kāi)發(fā)者</b>

    華為開(kāi)發(fā)者分論壇HarmonyOS學(xué)生公開(kāi)課-如何學(xué)習(xí)HarmonyOS應(yīng)用開(kāi)發(fā)?

    2021華為開(kāi)發(fā)者分論壇HarmonyOS學(xué)生公開(kāi)課-如何學(xué)習(xí)HarmonyOS應(yīng)用開(kāi)發(fā)
    的頭像 發(fā)表于 10-24 11:09 ?2162次閱讀
    華為<b class='flag-5'>開(kāi)發(fā)者</b>分論壇<b class='flag-5'>HarmonyOS</b>學(xué)生公開(kāi)課-如何學(xué)習(xí)<b class='flag-5'>HarmonyOS</b>應(yīng)用<b class='flag-5'>開(kāi)發(fā)</b>?

    2021華為開(kāi)發(fā)者大會(huì)HarmonyOS學(xué)生公開(kāi)課上教你10分鐘成為HarmonyOS開(kāi)發(fā)者

    2021華為開(kāi)發(fā)者大會(huì)HarmonyOS學(xué)生公開(kāi)課上教你10分鐘成為HarmonyOS開(kāi)發(fā)者 學(xué)習(xí)HarmonyOS應(yīng)用
    的頭像 發(fā)表于 10-24 11:03 ?2159次閱讀
    2021華為<b class='flag-5'>開(kāi)發(fā)者</b>大會(huì)<b class='flag-5'>HarmonyOS</b>學(xué)生公開(kāi)課上教你10分鐘成為<b class='flag-5'>HarmonyOS</b><b class='flag-5'>開(kāi)發(fā)者</b>

    華為開(kāi)發(fā)者分論壇HarmonyOS學(xué)生公開(kāi)課-開(kāi)發(fā)者成長(zhǎng)圖譜

    2021華為開(kāi)發(fā)者分論壇HarmonyOS學(xué)生公開(kāi)課-開(kāi)發(fā)者成長(zhǎng)圖譜
    的頭像 發(fā)表于 10-24 11:25 ?2004次閱讀
    華為<b class='flag-5'>開(kāi)發(fā)者</b>分論壇<b class='flag-5'>HarmonyOS</b>學(xué)生公開(kāi)課-<b class='flag-5'>開(kāi)發(fā)者</b>成長(zhǎng)圖譜

    華為開(kāi)發(fā)者分論壇HarmonyOS學(xué)生公開(kāi)課-HarmonyOS開(kāi)發(fā)者三大成長(zhǎng)階段與學(xué)習(xí)資源

    2021華為開(kāi)發(fā)者分論壇HarmonyOS學(xué)生公開(kāi)課-HarmonyOS開(kāi)發(fā)者三大成長(zhǎng)階段與學(xué)習(xí)資源
    的頭像 發(fā)表于 10-24 11:43 ?2064次閱讀
    華為<b class='flag-5'>開(kāi)發(fā)者</b>分論壇<b class='flag-5'>HarmonyOS</b>學(xué)生公開(kāi)課-<b class='flag-5'>HarmonyOS</b><b class='flag-5'>開(kāi)發(fā)者</b>三大成長(zhǎng)階段與學(xué)習(xí)資源

    面向HarmonyOS開(kāi)發(fā)者HarmonyOS 3.0 Beta介紹

    2021年10月,我們面向開(kāi)發(fā)者發(fā)布了HarmonyOS 3.0 Developer Preview版,但開(kāi)發(fā)的腳步永不停歇,現(xiàn)在我們又更新了API版本,配套發(fā)布了HarmonyOS
    的頭像 發(fā)表于 07-06 20:34 ?3338次閱讀

    HarmonyOS年度開(kāi)發(fā)者活動(dòng),賦能逾萬(wàn)名開(kāi)發(fā)者開(kāi)啟HarmonyOS學(xué)習(xí)之旅

    11月4日-11月6日,華為開(kāi)發(fā)者大會(huì)2022(Together)在東莞松山湖成功舉辦!與此同時(shí),HarmonyOS重磅推出HarmonyOS第一課、ArkUI入門(mén)訓(xùn)練營(yíng)、ArkUI開(kāi)發(fā)
    的頭像 發(fā)表于 12-19 11:08 ?994次閱讀
    <b class='flag-5'>HarmonyOS</b>年度<b class='flag-5'>開(kāi)發(fā)者</b>活動(dòng),賦能逾萬(wàn)名<b class='flag-5'>開(kāi)發(fā)者</b>開(kāi)啟<b class='flag-5'>HarmonyOS</b>學(xué)習(xí)之旅

    HarmonyOS 4.0開(kāi)發(fā)者Beta版來(lái)了!

    目前 HarmonyOS 4.0 開(kāi)發(fā)者 Beta 版招募活動(dòng)分批進(jìn)行,專(zhuān)屬 OTA 升級(jí)優(yōu)先對(duì)已在華為應(yīng)用市場(chǎng)上架了應(yīng)用的開(kāi)發(fā)者 / 合作伙伴開(kāi)放,未上架過(guò)華為應(yīng)用市場(chǎng)的開(kāi)發(fā)者請(qǐng)耐心
    的頭像 發(fā)表于 06-25 16:40 ?3484次閱讀
    <b class='flag-5'>HarmonyOS</b> 4.0<b class='flag-5'>開(kāi)發(fā)者</b>Beta版來(lái)了!