偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

一篇帶給你ETS自定義導(dǎo)航欄組件

系統(tǒng) OpenHarmony
這次給大家?guī)?lái)的是ETS自定義導(dǎo)航欄組件,以仿淘寶的導(dǎo)航欄為案例Demo來(lái)講解。

??想了解更多關(guān)于開源的內(nèi)容,請(qǐng)?jiān)L問:??

??51CTO 開源基礎(chǔ)軟件社區(qū)??

??https://ost.51cto.com??

概述

效果圖如下:

當(dāng)被選中時(shí),字體樣式和圖片都會(huì)相應(yīng)變化。

正文

新建空項(xiàng)目

SDK選擇7以上,language選擇ets。

初始化導(dǎo)航欄

在media文件夾下存放所需的圖片,初始設(shè)置導(dǎo)航欄選中的頁(yè)簽index為0,同時(shí)定義一個(gè)靜態(tài)數(shù)組存放導(dǎo)航菜單的數(shù)據(jù)——標(biāo)題名稱、選中與未選中狀態(tài)的圖片。案例Demo代碼如下:

@State selectedIndex: number = 0
@State menuData: any[]= [{
"text": " 首頁(yè) ",
"inActiveImg": $r('app.media.shouye'),
"activeImg": $r('app.media.taobao')
},
{
"text": " 逛逛 ",
"inActiveImg": $r('app.media.guangguang'),
"activeImg": $r('app.media.guangguang_on'),
},
{
"text": " 消息 ",
"inActiveImg": $r('app.media.msg'),
"activeImg": $r('app.media.msg_on'),
},
{
"text": "購(gòu)物車",
"inActiveImg": $r('app.media.gouwuche'),
"activeImg": $r('app.media.gouwuche_on'),
},
{
"text": "我的淘寶",
"inActiveImg": $r('app.media.wode'),
"activeImg": $r('app.media.wode_on'),
},
]

布局樣式

單個(gè)頁(yè)簽由圖片和文本組成,為縱向布局;整體導(dǎo)航欄為水平布局;利用ForEach循環(huán)遍歷導(dǎo)航菜單欄的數(shù)據(jù),并通過(guò)判斷是否選中來(lái)確定所顯示的圖片及文本樣式(邊框可根據(jù)喜好添加),案例代碼如下:

build() {
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceAround }) {
ForEach(this.menuData.map((item1, index1) => {
return { i: index1, data: item1 };
}),
item => { // Parameter 2: item generator
Column({ space: 5 }) {
Image(this.selectedIndex === item.i ? item.data.activeImg : item.data.inActiveImg
).width(30).height(30).objectFit(ImageFit.Cover)

Text(item.data.text)
.fontSize(15)
.fontWeight(FontWeight.Bold)
.fontColor(this.selectedIndex === item.i ? '#FC7D0C' : '#bfbfbf')

}.height('60').onClick(() => {
this.selectedIndex = item.i;
})
}, item => item.i.toString()
)
}
.borderColor(Color.Gray)
.borderWidth(0.2)
.width('100%')
.height('9%')
}

到此步,可預(yù)覽效果如下:

封裝使用

1、可以新建一個(gè)etsPage,將MyTab組件設(shè)置為export,然后在新頁(yè)面import來(lái)使用

將:

@State selectedIndex: number = 0

改為:

@Link selectedIndex: number

這是為了雙向數(shù)據(jù)綁定:

案例Demo新建的頁(yè)面Test.ets,代碼如下:

import { MyTab } from './MyTab'
@Entry
@Component
struct Test {
@State selectedIndex: number = 0
build() {
Flex({ direction: FlexDirection.Column }) {
Flex({ direction: FlexDirection.Column }) {
if (this.selectedIndex == 0) {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text('這是首頁(yè)的界面').fontSize(30)
}.height('92%').width('98%')
} else if (this.selectedIndex == 1) {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text('這是逛逛的界面').fontSize(30)
}.height('92%').width('98%')
} else if (this.selectedIndex == 2) {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text('這是消息界面').fontSize(30)
}.height('92%').width('98%')
} else if (this.selectedIndex == 3) {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text('這是購(gòu)物車的界面').fontSize(30)
}.height('92%').width('98%')
} else if (this.selectedIndex == 4) {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text('這是我的界面').fontSize(30)
}.height('92%').width('98%')
}
}
.width('98%')
.height('91%')
MyTab({ selectedIndex: $selectedIndex })
}
.width('100%')
.height('100%')
}
}

2、也可以在同一Page將其作為子組件來(lái)使用

作為子組件來(lái)使用的話就直接將MyTab移至同一ets文件,無(wú)需添加export和import模塊,不過(guò)同樣需要將選中的索引selectedindex類型改為雙向數(shù)據(jù)綁定@Link。

結(jié)語(yǔ)

以上就是我這次的小分享啦!

文章相關(guān)附件可以點(diǎn)擊下面的原文鏈接前往下載:

https://ost.51cto.com/resource/2179。

??想了解更多關(guān)于開源的內(nèi)容,請(qǐng)?jiān)L問:??

??51CTO 開源基礎(chǔ)軟件社區(qū)??

??https://ost.51cto.com??。

責(zé)任編輯:jianghua 來(lái)源: 鴻蒙社區(qū)
相關(guān)推薦

2022-02-25 15:50:05

OpenHarmonToggle組件鴻蒙

2022-02-25 08:29:49

opencv.jsEmscriptenWindows 10

2021-07-12 06:11:14

SkyWalking 儀表板UI篇

2021-04-23 08:59:35

ClickHouse集群搭建數(shù)據(jù)庫(kù)

2021-07-08 07:30:13

Webpack 前端Tree shakin

2021-04-14 07:55:45

Swift 協(xié)議Protocol

2023-03-13 09:31:04

2021-05-08 08:36:40

ObjectString前端

2021-10-28 08:51:53

GPIO軟件框架 Linux

2021-06-21 14:36:46

Vite 前端工程化工具

2021-01-28 08:55:48

Elasticsear數(shù)據(jù)庫(kù)數(shù)據(jù)存儲(chǔ)

2023-03-29 07:45:58

VS編輯區(qū)編程工具

2021-04-14 14:16:58

HttpHttp協(xié)議網(wǎng)絡(luò)協(xié)議

2021-04-08 11:00:56

CountDownLaJava進(jìn)階開發(fā)

2021-07-21 09:48:20

etcd-wal模塊解析數(shù)據(jù)庫(kù)

2022-03-22 09:09:17

HookReact前端

2024-06-13 08:34:48

2022-04-29 14:38:49

class文件結(jié)構(gòu)分析

2021-04-01 10:51:55

MySQL鎖機(jī)制數(shù)據(jù)庫(kù)

2021-03-12 09:21:31

MySQL數(shù)據(jù)庫(kù)邏輯架構(gòu)
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)