(目錄)

背景

ArkUI-eTS目前已經能夠多種裝置運作，同時也為我們提供了越來越豐富的元件和硬體開發能力。本次主要是寫一個智能晾曬系統的頁面來在DAYU200上面進行運作測試。

eTS入門或擷取eTS官方API文檔可參照本人另外文章：ArkUI_eTS手把手入門

開發環境

DevEco Studio for OpenHarmony3.0.0.900

OpenHarmony版本：3.1_Release

開發闆：DAYU200 ( 基于openHarmony3.1_Release版本 )

具體開發過程

1.建立工程

建立工程完成後，工程目錄如下：

随後，需在“MainAbility”目錄下建立“image”目錄用于存放部分頁面素材資源。

（右擊“MainAbility”檔案名-“New”-“Directory”-輸入“image”進行建立）

建立完成後，工程目錄結構如下：(同時我們知道“image”目錄和“resources-base-media”均可存放部分素材資源)

2.頁面結構設計

首頁面結構：

副頁面結構：

3.代碼結構

......
  build() {
    Column() {
      Tabs() {
        TabContent() {
          Column() {
            Flex() {
              Text('天氣 : ' + this.weather)
              Text('溫度 : ' + this.temp + ' ℃')
              Text('濕度 : ' + this.humidity + ' RH')
            }

            Flex() {
              Text(this.sub)   # 環境情況
            }
	    // 1
            Row({ space: 2 }) {
              Button() {
                Column() {
                  Text('晾曬狀态')
		  Image($r("app.media.drying"))
                }
              }
              Button() {
                Column() {
                  Text('手動調節')
                  Image($r("app.media.hand"))
                }
              }
            }
            // 2
            Row({ space: 2 }) {
              Button() {
                Column() {
                  Text('時間統計')
                  Image($r("app.media.time"))
                }
              }
              Button() {
                Column() {
                  Text('我的裝置')
                  Image($r("app.media.IoT"))
                }
              }
            }
            // 3
            Row({ space: 2 }) {
              Button() {
                Column() {
                  Text('定時提醒')
                  Image($r("app.media.clock"))
                }
              }
            }
          }
        }.tabBar({ icon: ("/image/home.png"), text: '首頁' })
        .backgroundImage('/image/background.jpg', ImageRepeat.NoRepeat)
        .backgroundImageSize(ImageSize.Cover)

        TabContent() {
          Column() {
            Flex() {
              Row({ space: 2 }) {
                Image('/image/user.png')
                Text(this.user_name)
              }
              Image('/image/message.png')
            }

            Flex() {
              Flex(){
                Row({ space: 2 }) {
                  Image('/image/mech.png')
                  Text('我的裝置')
                }

                Image('/image/right.png')
              }

              Flex(){
                Row({ space: 2 }) {
                  Image('/image/set.png')
                  Text('設定')
                }.width('50%').height(50)

                Image('/image/right.png')
              }
              Flex(){
                Row({ space: 2 }) {
                  Image('/image/change_user.png')
                  Text('切換使用者')
                }

                Image('/image/right.png')
              }.width('90%').height(50).margin({top:10})

              Flex(){
                Row({ space: 2 }) {
                  Image('/image/help.png')
                  Text('回報與建議')
                }
                Image('/image/right.png')
              }
            }
          }
        }.tabBar({ icon: $r("app.media.me"), text: '個人' })
      }
    }
  }
......

4.完整代碼

// @ts-nocheck
@Entry
@Component
struct Index {
  private controller: TabsController = new TabsController()
  private weather: string = '晴'
  private temp: number = 20.6
  private humidity: number = 30
  private sub: string = '适合曬衣'
  private user_name: string = 'Cool_breeze'

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent() {
          Column() {
            Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center }) {
              Text('天氣 : ' + this.weather)
                .fontSize(30)
                .fontWeight(FontWeight.Bold)
                .fontColor(Color.White)

              Text('溫度 : ' + this.temp + ' ℃')
                .fontSize(30)
                .fontColor(Color.White)
                .fontWeight(FontWeight.Bold)
                .margin({ top: 5 })

              Text('濕度 : ' + this.humidity + ' RH')
                .fontSize(30)
                .fontColor(Color.White)
                .fontWeight(FontWeight.Bold)
                .margin({ top: 5 })
            }
            .height('25%')
            .width('85%')

            Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
              Text(this.sub)
                .fontSize(30)
            }
            .opacity(0.6)
            .backgroundColor(Color.White)
            .width('90%')
            .height(70)
            .borderRadius(10)

            Row({ space: 2 }) {
              Button({ type: ButtonType.Normal }) {
                Column() {
                  Text('晾曬狀态')
                    .fontSize(20)
                  Image($r("app.media.drying"))
                    .width(50)
                    .height(50)
                    .margin({ top: 10 })
                }
              }
              .height('100%')
              .width('48%')
              .borderRadius(30)
              .backgroundColor(Color.White)
              .margin({ right: 15 })

              Button({ type: ButtonType.Normal }) {
                Column() {
                  Text('手動調節')
                    .fontSize(20)
                  Image($r("app.media.hand"))
                    .width(50)
                    .height(50)
                    .margin({ top: 10 })
                }
              }
              .height('100%')
              .width('48%')
              .borderRadius(30)
              .backgroundColor(Color.White)
            }
            .width('90%')
            .height(180)
            .margin({ left: 10, top: 10})
            //2
            Row({ space: 2 }) {
              Button({ type: ButtonType.Normal }) {
                Column() {
                  Text('時間統計')
                    .fontSize(20)
                  Image($r("app.media.time"))
                    .width(50)
                    .height(50)
                    .margin({ top: 10 })
                }
              }
              .height('100%')
              .width('48%')
              .borderRadius(30)
              .backgroundColor(Color.White)
              .margin({ right: 15 })

              Button({ type: ButtonType.Normal }) {
                Column() {
                  Text('我的裝置')
                    .fontSize(20)
                  Image($r("app.media.IoT"))
                    .width(50)
                    .height(50)
                    .margin({ top: 10 })
                }
              }
              .height('100%')
              .width('48%')
              .borderRadius(30)
              .backgroundColor(Color.White)
            }
            .width('90%')
            .height(180)
            .margin({ top: 15, left: '10' })
            //3
            Row({ space: 2 }) {
              Button({ type: ButtonType.Normal }) {
                Column() {
                  Text('定時提醒')
                    .fontSize(20)
                  Image($r("app.media.clock"))
                    .width(50)
                    .height(50)
                    .margin({ top: 10 })
                }
              }
              .height('100%')
              .width('48%')
              .borderRadius(30)
              .backgroundColor(Color.White)
              .margin({ right: 15 })

            }
            .width('90%')
            .height(180)
            .margin({ top: 15, left: '10' })
          }

          .height('100%')
          .width('100%')
        }.tabBar({ icon: ("/image/home.png"), text: '首頁' })
        .backgroundImage('/image/background.jpg', ImageRepeat.NoRepeat)
        .backgroundImageSize(ImageSize.Cover)

        TabContent() {
          Column() {
            Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
              Row({ space: 2 }) {
                Image('/image/user.png')
                  .clip(new Circle({ width: 50, height: 50 }))
                  .width(50)
                  .height(50)
                  .backgroundColor('#dbdb00')
                  .margin({ left: 5 })
                Text(this.user_name)
                  .fontSize(20)
                  .margin({ left: 5 })
              }.width('50%').height(50)

              Image('/image/message.png')
                .height(40)
                .width(50)
                .margin({ right: 5 })
            }
            .width('90%')
            .height(60)
            .margin({top:10})

            Flex({direction: FlexDirection.Column,alignItems:ItemAlign.Center}) {
              Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }){
                Row({ space: 2 }) {
                  Image('/image/mech.png')
                    .width(30)
                    .height(30)
                    .margin({ left: 5 })
                  Text('我的裝置')
                    .fontSize(20)
                    .margin({ left: 10 })
                }.width('50%').height(50)

                Image('/image/right.png')
                  .height(20)
                  .width(15)
                  .margin({ right: 5 })
              }.width('90%').height(50).margin({top:30})

              Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }){
                Row({ space: 2 }) {
                  Image('/image/set.png')
                    .width(30)
                    .height(30)
                    .margin({ left: 5 })
                  Text('設定')
                    .fontSize(20)
                    .margin({ left: 10 })
                }.width('50%').height(50)

                Image('/image/right.png')
                  .height(20)
                  .width(15)
                  .margin({ right: 5 })
              }.width('90%').height(50).margin({top:10})
              Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }){
                Row({ space: 2 }) {
                  Image('/image/change_user.png')
                    .width(30)
                    .height(30)
                    .margin({ left: 5 })
                  Text('切換使用者')
                    .fontSize(20)
                    .margin({ left: 10 })
                }.width('50%').height(50)

                Image('/image/right.png')
                  .height(20)
                  .width(15)
                  .margin({ right: 5 })
              }.width('90%').height(50).margin({top:10})

              Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }){
                Row({ space: 2 }) {
                  Image('/image/help.png')
                    .width(30)
                    .height(30)
                    .margin({ left: 5 })
                  Text('回報與建議')
                    .fontSize(20)
                    .margin({ left: 10 })
                }.width('50%').height(50)

                Image('/image/right.png')
                  .height(20)
                  .width(15)
                  .margin({ right: 5 })
              }.width('90%').height(50).margin({top:10})
            }
            .height('50%')
            .width('100%')
            .borderRadius(20)
            .margin({top:10})
            .backgroundColor(Color.White)
          }
          .height('100%')
          .width('100%')
        }.tabBar({ icon: $r("app.media.me"), text: '個人' })
      }
      .vertical(false)
      .barWidth(300)
      .barHeight(60)
      .backgroundColor('#eeeeee')
      .width('100%')
    }
    .width('100%')
    .height('100%')
  }
}

5.所用部分素材

背景素材：

6.Previewer預覽效果

DAYU200運作效果

gitee位址

原始版本連結（能夠運作在DAYU200上的版本可下載下傳本貼下方資源代碼）

示範視訊

https://ost.51cto.com/show/14309

後續開發計劃

基于此晾曬系統界面和DAYU200開發闆，

（1）連接配接Hi3861智能家居套件擷取真實環境資料；

（2）調用天氣API，使DAYU200聯網後能夠實時擷取天氣預報資訊，進而更好的實作晾曬功能；

（3）若DAYU200本身攝像頭條件不允許，可連外接攝像頭或利用Hi3516 AI Camera開發套件的功能更加智能的實時監控衣物晾曬狀态。

（4）同時除了硬體功能完善，也要對軟體部分相容性和功能進行更新，不僅能夠将程式運作在DAYU200開發闆上，也能夠在所有HarmonyOS裝置上運作。

#DAYU200體驗官# 在DAYU200運作基于ArkUI-eTS的智能晾曬系統頁面背景開發環境具體開發過程DAYU200運作效果gitee位址示範視訊後續開發計劃

背景

開發環境

具體開發過程

1.建立工程

2.頁面結構設計

3.代碼結構

4.完整代碼

5.所用部分素材

6.Previewer預覽效果

DAYU200運作效果

gitee位址

示範視訊

後續開發計劃

繼續閱讀

[OpenHarmony] [RK2206] 建構OpenHarmony編譯器 (二)

#DAYU200# OpenHarmony跳轉撥号界面

#打卡不停更#OpenHarmony資料轉碼應用開發實戰（上）背景需求設計建立項目頁面布局規劃UI界面編碼實作總結

賦能千行百業數字化轉型，OpenHarmony生态新成果即将亮相HDC2022

基于OpenHarmony标準接口的檔案讀寫實作案例

前行不綴未來可期，鴻蒙生态發展邁入全新階段

哔哩哔哩已經開始開發鴻蒙版本了目前第一版V0.1.0Beta采用eTS語言，基于OpenHarmonyApi9開發支援功

#DAYU200體驗官# OpenHarmony3.1 Release 編譯

#沖刺創作新星# #跟着小白一起學鴻蒙# [十二]簡單Http用戶端

我把分布式音樂播放器适配了Stage模型

想開發DAYU200，我教你

在DAYU200上實作OpenHarmony視訊播放器

OpenHarmony移植案例： build lite源碼分析之hb指令entry.py

共築使能千行百業的數字底座 | HDC 2022松湖對話順利召開

OpenHarmony社群營運報告（2022年10月）

開源鴻蒙OpenHarmony 4.0 Beta2釋出，方舟架構ArkUI-X首發