HarmonyOS第一课06：设置组件导航

文章索引

关联章节

说明：本章代码基于HarmonyOS第一课06：通过结构化数据构建页面代码

页面效果

文件变动

代码

default

pages/Index.ets

import { QuickStartPage } from '@ohos/quickstart'
import { CourseLearning } from '@ohos/learning'
import { KnowledgeMap } from '@ohos/map'

@Entry
@Component
struct Index {
  @State currentIndex: number = 0
  private tabsController: TabsController = new TabsController()

  @Builder
  tabBarBuilder(title: string, targetIndex: number, selectedIcon: Resource, unselectIcon: Resource) {
    Column() {
      Image(this.currentIndex === targetIndex ? selectedIcon : unselectIcon)
        .width(24)
        .height(24)

      Text(title)
        .fontFamily('HarmonyHeiTi-Medium')
        .fontSize(10)
        .fontColor(this.currentIndex === targetIndex ? '#0A59F7' : 'rgba(0,0,0,0.6)')
        .textAlign(TextAlign.Center)
        .lineHeight(14)
        .fontWeight(500)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
    .onClick(() => {
      this.currentIndex = targetIndex
      this.tabsController.changeIndex(targetIndex)
    })
  }

  build() {
    Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
      TabContent() {
        QuickStartPage()
      }
      .tabBar(this.tabBarBuilder('快速入门', 0, $r('app.media.ic_01_on'), $r('app.media.ic_01_off')))

      TabContent() {
        CourseLearning()
      }
      .tabBar(this.tabBarBuilder('课程学习', 1, $r('app.media.ic_02_on'), $r('app.media.ic_02_off')))

      TabContent() {
        KnowledgeMap()
      }
      .tabBar(this.tabBarBuilder('知识地图', 2, $r('app.media.ic_03_on'), $r('app.media.ic_03_off')))

    }
    .scrollable(false)
    .vertical(false)
    .divider({
      strokeWidth: 0.5,
      color: '#0D182431'
    })
    .backgroundColor('#F1F3F5')
    .padding({ top: 36, bottom: 28 })
  }
}

import { QuickStartPage } from '@ohos/quickstart'

import { CourseLearning } from '@ohos/learning'

import { KnowledgeMap } from '@ohos/map'

@Entry

@Component

struct Index {

@State currentIndex: number = 0

private tabsController: TabsController = new TabsController()

@Builder

tabBarBuilder(title: string, targetIndex: number, selectedIcon: Resource, unselectIcon: Resource) {

Column() {

Image(this.currentIndex === targetIndex ? selectedIcon : unselectIcon)

.width(24)

.height(24)

Text(title)

.fontFamily('HarmonyHeiTi-Medium')

.fontSize(10)

.fontColor(this.currentIndex === targetIndex ? '#0A59F7' : 'rgba(0,0,0,0.6)')

.textAlign(TextAlign.Center)

.lineHeight(14)

.fontWeight(500)

}

.width('100%')

.height('100%')

.justifyContent(FlexAlign.Center)

.alignItems(HorizontalAlign.Center)

.onClick(() => {

this.currentIndex = targetIndex

this.tabsController.changeIndex(targetIndex)

})

}

build() {

Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {

TabContent() {

QuickStartPage()

}

.tabBar(this.tabBarBuilder('快速入门', 0, $r('app.media.ic_01_on'), $r('app.media.ic_01_off')))

TabContent() {

CourseLearning()

}

.tabBar(this.tabBarBuilder('课程学习', 1, $r('app.media.ic_02_on'), $r('app.media.ic_02_off')))

TabContent() {

KnowledgeMap()

}

.tabBar(this.tabBarBuilder('知识地图', 2, $r('app.media.ic_03_on'), $r('app.media.ic_03_off')))

}

.scrollable(false)

.vertical(false)

.divider({

strokeWidth: 0.5,

color: '#0D182431'

})

.backgroundColor('#F1F3F5')

.padding({ top: 36, bottom: 28 })

}

map

pages/KnowledgeMap.ets

import { NavBarItemType, NavBarItem } from '../view/NavBarItem'
import { KnowledgeMapContent, Section } from '../view/KnowledgeMapContent'
import { BusinessError } from '@kit.BasicServicesKit'
import { util } from '@kit.ArkTS'

@Component
export struct KnowledgeMap {
  @State navBarList: NavBarItemType[] = [
    { order: '01', title: '准备与学习' },
    { order: '02', title: '构建应用' },
    { order: '03', title: '应用测试' },
    { order: '04', title: '上架' },
    { order: '05', title: '运营增长' },
    { order: '06', title: '商业变现' },
    { order: '07', title: '更多' }
  ]
  @State sections: Section[] = []
  @Provide('knowledgeMapPageStack') knowledgeMapPageStack: NavPathStack = new NavPathStack()
  @State currentNavBarIndex: number = -1

  @Builder
  PageMap(name: string) {
    if (name === 'KnowledgeMapContent') {
      KnowledgeMapContent({ section: this.sections[this.currentNavBarIndex] })
    }
  }

  private getSections() {
    try {
      getContext(this).resourceManager.getRawFileContent("MapData.json", (error: BusinessError, value: Uint8Array) => {
        const textDecoder = util.TextDecoder.create('utf-8')
        const res = textDecoder.decodeWithStream(value, {
          stream: false
        })
        this.sections = JSON.parse(res)
      })
    } catch (error) {
      console.error(`callback getRawFileContent failed, error is ${JSON.stringify(error)}`)
    }
  }

  aboutToAppear(): void {
    this.getSections()
  }

  build() {
    Navigation(this.knowledgeMapPageStack) {
      Scroll() {
        Column() {
          Text('知识地图')
            .fontFamily('HarmonyHeiTi-Bold')
            .fontSize(24)
            .fontColor(Color.Black)
            .textAlign(TextAlign.Start)
            .lineHeight(33)
            .fontWeight(700)
            .width('100%')

          Image($r('app.media.knowledge_map_banner'))
            .width('100%')
            .borderRadius(16)
            .margin({ top: 19, bottom: 8 })

          Text('通过循序渐进的学习路径，无经验和有经验的开发者都可以轻松掌握ArkTS语言声明式开发范式，体验更简洁、更友好的HarmonyOS应用开发旅程。')
            .fontFamily('HarmonyHeiti')
            .fontSize(14)
            .fontColor('rgba(0, 0, 0, 0.6)')
            .fontWeight(400)
            .textAlign(TextAlign.Start)

          List({ space: 12 }) {
            ForEach(this.navBarList, (item: NavBarItemType, index: number) => {
              ListItem() {
                NavBarItem({ navBarItem: item, currentNavBarIndex: this.currentNavBarIndex })
              }
              .width('100%')
            }, (item: NavBarItemType): string => item.title)
          }
          .width('100%')
          .margin({ top: 24 })
        }
        .padding({
          top: 12,
          right: 16,
          bottom: 12,
          left: 16
        })
        .backgroundColor("#F1F3F5")
      }
      .backgroundColor('#F1F3F5')
      .align(Alignment.TopStart)
      .constraintSize({ minHeight: '100%' })
      .edgeEffect(EdgeEffect.Spring)
    }
    .hideTitleBar(true)
    .navDestination(this.PageMap)
    .mode(NavigationMode.Stack)
  }
}

100

import { NavBarItemType, NavBarItem } from '../view/NavBarItem'

import { KnowledgeMapContent, Section } from '../view/KnowledgeMapContent'

import { BusinessError } from '@kit.BasicServicesKit'

import { util } from '@kit.ArkTS'

@Component

export struct KnowledgeMap {

@State navBarList: NavBarItemType[] = [

{ order: '01', title: '准备与学习' },

{ order: '02', title: '构建应用' },

{ order: '03', title: '应用测试' },

{ order: '04', title: '上架' },

{ order: '05', title: '运营增长' },

{ order: '06', title: '商业变现' },

{ order: '07', title: '更多' }

]

@State sections: Section[] = []

@Provide('knowledgeMapPageStack') knowledgeMapPageStack: NavPathStack = new NavPathStack()

@State currentNavBarIndex: number = -1

@Builder

PageMap(name: string) {

if (name === 'KnowledgeMapContent') {

KnowledgeMapContent({ section: this.sections[this.currentNavBarIndex] })

}

private getSections() {

try {

getContext(this).resourceManager.getRawFileContent("MapData.json", (error: BusinessError, value: Uint8Array) => {

const textDecoder = util.TextDecoder.create('utf-8')

const res = textDecoder.decodeWithStream(value, {

stream: false

})

this.sections = JSON.parse(res)

})

} catch (error) {

console.error(`callback getRawFileContent failed, error is ${JSON.stringify(error)}`)

}

aboutToAppear(): void {

this.getSections()

}

build() {

Navigation(this.knowledgeMapPageStack) {

Scroll() {

Column() {

Text('知识地图')

.fontFamily('HarmonyHeiTi-Bold')

.fontSize(24)

.fontColor(Color.Black)

.textAlign(TextAlign.Start)

.lineHeight(33)

.fontWeight(700)

.width('100%')

Image($r('app.media.knowledge_map_banner'))

.width('100%')

.borderRadius(16)

.margin({ top: 19, bottom: 8 })

Text('通过循序渐进的学习路径，无经验和有经验的开发者都可以轻松掌握ArkTS语言声明式开发范式，体验更简洁、更友好的HarmonyOS应用开发旅程。')

.fontFamily('HarmonyHeiti')

.fontSize(14)

.fontColor('rgba(0, 0, 0, 0.6)')

.fontWeight(400)

.textAlign(TextAlign.Start)

List({ space: 12 }) {

ForEach(this.navBarList, (item: NavBarItemType, index: number) => {

ListItem() {

NavBarItem({ navBarItem: item, currentNavBarIndex: this.currentNavBarIndex })

}

.width('100%')

}, (item: NavBarItemType): string => item.title)

}

.width('100%')

.margin({ top: 24 })

}

.padding({

top: 12,

right: 16,

bottom: 12,

left: 16

})

.backgroundColor("#F1F3F5")

}

.backgroundColor('#F1F3F5')

.align(Alignment.TopStart)

.constraintSize({ minHeight: '100%' })

.edgeEffect(EdgeEffect.Spring)

}

.hideTitleBar(true)

.navDestination(this.PageMap)

.mode(NavigationMode.Stack)

}

view/KnowledgeMapContent.ets

interface KnowledgeBaseItem {
  type: string,
  title: string
}

interface Material {
  subtitle: string,
  knowledgeBase: KnowledgeBaseItem[]
}

export interface Section {
  title: string,
  brief: string,
  materials: Material[]
}

const TypeMapIcon: Record<string, string> = {
  '指南': 'app.media.ic_guide',
  '准备': 'app.media.ic_prepare',
  '学习与获取证书': 'app.media.ic_medals',
  '视频教程': 'app.media.ic_video'
}

@Component
export struct KnowledgeMapContent {
  @Prop section: Section

  @Builder
  KnowledgeBlockLine(knowledgeBaseItem: KnowledgeBaseItem) {
    Row() {
      Image($r(TypeMapIcon[knowledgeBaseItem.type]))
        .width(20)
        .height(20)
      Column() {
        Text(knowledgeBaseItem.title)
          .fontFamily('HarmonyHeiTi-Medium')
          .fontSize(16)
          .fontWeight(500)

        Text(knowledgeBaseItem.type)
          .fontFamily('HarmonyHeiTi')
          .fontSize(14)
          .fontWeight(400)
      }
      .alignItems(HorizontalAlign.Start)
      .margin({ left: 18 })

      Blank()

      Image($r('app.media.ic_arrow'))
        .width(12)
        .height(24)
    }
    .width('100%')
    .height(64)
    .alignItems(VerticalAlign.Center)
  }

  @Builder
  KnowledgeBlock(material: Material) {
    Column() {
      Text(material.subtitle)
        .fontFamily('HarmonyHeiTi-Medium')
        .fontSize(14)
        .fontWeight(500)
        .margin({ bottom: 8 })

      List({ space: 12 }) {
        ForEach(material.knowledgeBase, (item: KnowledgeBaseItem, index: number) => {
          ListItem() {
            this.KnowledgeBlockLine(item)
          }
        }, (item: KnowledgeBaseItem, index: number) => item.title)
      }
      .backgroundColor(Color.White)
      .borderRadius(16)
      .padding({ left: 12, right: 12 })
      .divider({
        strokeWidth: 0.5,
        startMargin: 38,
        endMargin: 0,
        color: '#F2F2F2'
      })
    }
    .width('100%')
    .margin({ top: 28 })
    .alignItems(HorizontalAlign.Start)
  }

  build() {
    NavDestination() {
      Scroll() {
        Column() {
          Text(this.section.title)
            .fontFamily('HarmonyHeiTi-Bold')
            .fontSize(20)
            .fontWeight(700)
            .fontColor(Color.Black)

          Text(this.section.brief)
            .fontFamily('HarmonyHeiTi')
            .fontSize(12)
            .fontColor('rgba(0, 0, 0, 0.6)')
            .textAlign(TextAlign.JUSTIFY)
            .fontWeight(400)
            .margin({ top: 12 })

          ForEach(this.section.materials, (material: Material) => {
            this.KnowledgeBlock(material)
          }, (material: Material, index: number) => material.subtitle)
        }
        .alignItems(HorizontalAlign.Start)
        .padding({
          top: 12,
          left: 16,
          bottom: 12,
          right: 16
        })
        .backgroundColor('#F1F3F5')
        .width('100%')
      }
      .align(Alignment.TopStart)
      .constraintSize({ minHeight: '100%' })
      .edgeEffect(EdgeEffect.Spring)
      .scrollable(ScrollDirection.Vertical)
      .scrollBar(BarState.Auto)
      .backgroundColor('#F1F3F5')
    }
    .hideTitleBar(true)
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

interface KnowledgeBaseItem {

type: string,

title: string

}

interface Material {

subtitle: string,

knowledgeBase: KnowledgeBaseItem[]

}

export interface Section {

title: string,

brief: string,

materials: Material[]

}

const TypeMapIcon: Record<string, string> = {

'指南': 'app.media.ic_guide',

'准备': 'app.media.ic_prepare',

'学习与获取证书': 'app.media.ic_medals',

'视频教程': 'app.media.ic_video'

}

@Component

export struct KnowledgeMapContent {

@Prop section: Section

@Builder

KnowledgeBlockLine(knowledgeBaseItem: KnowledgeBaseItem) {

Row() {

Image($r(TypeMapIcon[knowledgeBaseItem.type]))

.width(20)

.height(20)

Column() {

Text(knowledgeBaseItem.title)

.fontFamily('HarmonyHeiTi-Medium')

.fontSize(16)

.fontWeight(500)

Text(knowledgeBaseItem.type)

.fontFamily('HarmonyHeiTi')

.fontSize(14)

.fontWeight(400)

}

.alignItems(HorizontalAlign.Start)

.margin({ left: 18 })

Blank()

Image($r('app.media.ic_arrow'))

.width(12)

.height(24)

}

.width('100%')

.height(64)

.alignItems(VerticalAlign.Center)

}

@Builder

KnowledgeBlock(material: Material) {

Column() {

Text(material.subtitle)

.fontFamily('HarmonyHeiTi-Medium')

.fontSize(14)

.fontWeight(500)

.margin({ bottom: 8 })

List({ space: 12 }) {

ForEach(material.knowledgeBase, (item: KnowledgeBaseItem, index: number) => {

ListItem() {

this.KnowledgeBlockLine(item)

}

}, (item: KnowledgeBaseItem, index: number) => item.title)

}

.backgroundColor(Color.White)

.borderRadius(16)

.padding({ left: 12, right: 12 })

.divider({

strokeWidth: 0.5,

startMargin: 38,

endMargin: 0,

color: '#F2F2F2'

})

}

.width('100%')

.margin({ top: 28 })

.alignItems(HorizontalAlign.Start)

}

build() {

NavDestination() {

Scroll() {

Column() {

Text(this.section.title)

.fontFamily('HarmonyHeiTi-Bold')

.fontSize(20)

.fontWeight(700)

.fontColor(Color.Black)

Text(this.section.brief)

.fontFamily('HarmonyHeiTi')

.fontSize(12)

.fontColor('rgba(0, 0, 0, 0.6)')

.textAlign(TextAlign.JUSTIFY)

.fontWeight(400)

.margin({ top: 12 })

ForEach(this.section.materials, (material: Material) => {

this.KnowledgeBlock(material)

}, (material: Material, index: number) => material.subtitle)

}

.alignItems(HorizontalAlign.Start)

.padding({

top: 12,

left: 16,

bottom: 12,

right: 16

})

.backgroundColor('#F1F3F5')

.width('100%')

}

.align(Alignment.TopStart)

.constraintSize({ minHeight: '100%' })

.edgeEffect(EdgeEffect.Spring)

.scrollable(ScrollDirection.Vertical)

.scrollBar(BarState.Auto)

.backgroundColor('#F1F3F5')

}

.hideTitleBar(true)

}

view/NavBarItem.ets

export interface NavBarItemType {
  order: string
  title: string
}

@Component
export struct NavBarItem {
  @Prop navBarItem: NavBarItemType
  @Consume('knowledgeMapPageStack') knowledgeMapPageStack: NavPathStack
  @Link currentNavBarIndex: number

  build() {
    Row() {
      Text(this.navBarItem.order)
        .margin({ right: 6 })
        .fontFamily('HarmonyHeiti-Bold')
        .fontSize(21)
        .fontColor('#182431')
        .textAlign(TextAlign.Start)
        .lineHeight(22)
        .fontWeight(700)

      Text(this.navBarItem.title)
        .fontFamily('HarmonyHeiti-Medium')
        .fontSize(16)
        .fontColor('#182431')
        .lineHeight(22)
        .fontWeight(500)

      Blank()

      Image($r('app.media.ic_arrow'))
        .width(12)
        .height(24)
    }
    .width('100%')
    .height(48)
    .borderRadius(16)
    .alignItems(VerticalAlign.Center)
    .padding({ left: 12, right: 12 })
    .backgroundColor(
      this.currentNavBarIndex === Number(this.navBarItem.order) - 1 ?
        '#1A0A59F7' :
      Color.Transparent
    )
    .onClick(() => {
      const index = Number(this.navBarItem.order) - 1
      this.currentNavBarIndex = index
      this.knowledgeMapPageStack.replacePath({ name: 'KnowledgeMapContent' })
    })

  }
}

export interface NavBarItemType {

order: string

title: string

}

@Component

export struct NavBarItem {

@Prop navBarItem: NavBarItemType

@Consume('knowledgeMapPageStack') knowledgeMapPageStack: NavPathStack

@Link currentNavBarIndex: number

build() {

Row() {

Text(this.navBarItem.order)

.margin({ right: 6 })

.fontFamily('HarmonyHeiti-Bold')

.fontSize(21)

.fontColor('#182431')

.textAlign(TextAlign.Start)

.lineHeight(22)

.fontWeight(700)

Text(this.navBarItem.title)

.fontFamily('HarmonyHeiti-Medium')

.fontSize(16)

.fontColor('#182431')

.lineHeight(22)

.fontWeight(500)

Blank()

Image($r('app.media.ic_arrow'))

.width(12)

.height(24)

}

.width('100%')

.height(48)

.borderRadius(16)

.alignItems(VerticalAlign.Center)

.padding({ left: 12, right: 12 })

.backgroundColor(

this.currentNavBarIndex === Number(this.navBarItem.order) - 1 ?

'#1A0A59F7' :

Color.Transparent

)

.onClick(() => {

const index = Number(this.navBarItem.order) - 1

this.currentNavBarIndex = index

this.knowledgeMapPageStack.replacePath({ name: 'KnowledgeMapContent' })

})

}

quickstart

pages/QuickStartPage.ets

import { TutorialView } from '../view/TutorialView'
import { Banner } from '../view/Banner'
import { EnablementView } from '../view/EnablementView'
import { ArticleClass } from '../model/ArticleClass'
import { BannerClass } from '../model/BannerClass'
import { ArticleDetailPage } from './ArticleDetailPage'
import { BannerDetailPage } from './BannerDetailPage'

@Component
export struct QuickStartPage {
  @State message: string = '快速入门'
  @Provide('articlePathStack') articlePathStack: NavPathStack = new NavPathStack()

  @Builder
  quickStartRouter(name: string, param?: ArticleClass | BannerClass) {
    if (name === 'articleDetail') {
      ArticleDetailPage()
    } else if (name === 'bannerDetailPage') {
      BannerDetailPage()
    }
  }

  build() {
    Navigation(this.articlePathStack) {
      Column() {
        Text(this.message)
          .fontFamily('HarmonyHeiTi-Bold')
          .fontSize(24)
          .fontWeight(700)
          .lineHeight(33)
          .width('100%')
          .textAlign(TextAlign.Start)
          .margin({ left: 16 })

        Scroll() {
          Column() {
            Banner()
            EnablementView()
            TutorialView()
          }
        }
        .layoutWeight(1)
        .scrollBar(BarState.Off)
        .align(Alignment.TopStart)

      }
      .height('100%')
      .width('100%')
      .backgroundColor('#F1F3F5')
    }
    .navDestination(this.quickStartRouter)
    .hideTitleBar(true)
    .mode(NavigationMode.Stack)
  }
}

import { TutorialView } from '../view/TutorialView'

import { Banner } from '../view/Banner'

import { EnablementView } from '../view/EnablementView'

import { ArticleClass } from '../model/ArticleClass'

import { BannerClass } from '../model/BannerClass'

import { ArticleDetailPage } from './ArticleDetailPage'

import { BannerDetailPage } from './BannerDetailPage'

@Component

export struct QuickStartPage {

@State message: string = '快速入门'

@Provide('articlePathStack') articlePathStack: NavPathStack = new NavPathStack()

@Builder

quickStartRouter(name: string, param?: ArticleClass | BannerClass) {

if (name === 'articleDetail') {

ArticleDetailPage()

} else if (name === 'bannerDetailPage') {

BannerDetailPage()

}

build() {

Navigation(this.articlePathStack) {

Column() {

Text(this.message)

.fontFamily('HarmonyHeiTi-Bold')

.fontSize(24)

.fontWeight(700)

.lineHeight(33)

.width('100%')

.textAlign(TextAlign.Start)

.margin({ left: 16 })

Scroll() {

Column() {

Banner()

EnablementView()

TutorialView()

}

.layoutWeight(1)

.scrollBar(BarState.Off)

.align(Alignment.TopStart)

}

.height('100%')

.width('100%')

.backgroundColor('#F1F3F5')

}

.navDestination(this.quickStartRouter)

.hideTitleBar(true)

.mode(NavigationMode.Stack)

}

pages/ArticleDetailPage.ets

import { ArticleClass } from '../model/ArticleClass'
import { webview } from '@kit.ArkWeb'

@Preview
@Component
export struct ArticleDetailPage {
  @State articleDetail: ArticleClass | null = null
  @Consume('articlePathStack') articlePathStack: NavPathStack

  aboutToAppear(): void {
    this.articleDetail = this.articlePathStack.getParamByName('articleDetail')[0] as ArticleClass
  }

  build() {
    NavDestination() {
      Column() {
        Row() {
          Row() {

            Image($r('app.media.ic_back'))
              .width(40)
              .height(40)
              .onClick(() => {
                this.articlePathStack.pop()
              })
            Row() {
              Text(this.articleDetail?.title)
                .fontFamily('HarmonyHeiTi-Bold')
                .fontSize(20)
                .textAlign(TextAlign.Center)
                .textOverflow({ overflow: TextOverflow.Ellipsis })
                .maxLines(1)
                .fontWeight(700)
                .margin({ left: 8 })
            }
          }
          .width('80%')
        }
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%')
        .height(56)

        WebComponent({ articleDetail: this.articleDetail })
      }
      .padding({ left: 16, right: 16 })
      .width('100%')
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.SpaceBetween)
    }
    .hideTitleBar(true)
  }
}


@Component
struct WebComponent {
  @Prop articleDetail: ArticleClass | null
  private webviewController: webview.WebviewController = new webview.WebviewController()

  build() {
    Column() {
      Web({ src: this.articleDetail?.webUrl, controller: this.webviewController })
        .darkMode(WebDarkMode.Auto)
        .domStorageAccess(true)
        .zoomAccess(true)
        .fileAccess(true)
        .mixedMode(MixedMode.All)
        .cacheMode(CacheMode.None)
        .javaScriptAccess(true)
        .width('100%')
        .layoutWeight(1)
    }
  }
}

import { ArticleClass } from '../model/ArticleClass'

import { webview } from '@kit.ArkWeb'

@Preview

@Component

export struct ArticleDetailPage {

@State articleDetail: ArticleClass | null = null

@Consume('articlePathStack') articlePathStack: NavPathStack

aboutToAppear(): void {

this.articleDetail = this.articlePathStack.getParamByName('articleDetail')[0] as ArticleClass

}

build() {

NavDestination() {

Column() {

Row() {

Image($r('app.media.ic_back'))

.width(40)

.height(40)

.onClick(() => {

this.articlePathStack.pop()

})

Row() {

Text(this.articleDetail?.title)

.fontFamily('HarmonyHeiTi-Bold')

.fontSize(20)

.textAlign(TextAlign.Center)

.textOverflow({ overflow: TextOverflow.Ellipsis })

.maxLines(1)

.fontWeight(700)

.margin({ left: 8 })

}

.width('80%')

}

.justifyContent(FlexAlign.SpaceBetween)

.width('100%')

.height(56)

WebComponent({ articleDetail: this.articleDetail })

}

.padding({ left: 16, right: 16 })

.width('100%')

.height('100%')

.justifyContent(FlexAlign.SpaceBetween)

}

.hideTitleBar(true)

}

@Component

struct WebComponent {

@Prop articleDetail: ArticleClass | null

private webviewController: webview.WebviewController = new webview.WebviewController()

build() {

Column() {

Web({ src: this.articleDetail?.webUrl, controller: this.webviewController })

.darkMode(WebDarkMode.Auto)

.domStorageAccess(true)

.zoomAccess(true)

.fileAccess(true)

.mixedMode(MixedMode.All)

.cacheMode(CacheMode.None)

.javaScriptAccess(true)

.width('100%')

.layoutWeight(1)

}

pages/BannerDetailPage.ets

import { BannerClass } from '../model/BannerClass'
import { webview } from '@kit.ArkWeb'

@Component
export struct BannerDetailPage {
  @State bannerClass: BannerClass | null = null
  controller: webview.WebviewController = new webview.WebviewController()
  @Consume('articlePathStack') articlePathStack: NavPathStack

  aboutToAppear(): void {
    this.bannerClass = this.articlePathStack.getParamByName('bannerDetailPage')[0] as BannerClass
  }

  build() {
    NavDestination() {
      Column() {
        Web({
          src: this.bannerClass?.url,
          controller: this.controller
        })
          .darkMode(WebDarkMode.Auto)
          .domStorageAccess(true)
          .zoomAccess(true)
          .fileAccess(true)
          .mixedMode(MixedMode.All)
          .javaScriptAccess(true)
          .width('100%')
          .layoutWeight(1)
      }
    }
    .width('100%')
    .height('100%')

  }
}

import { BannerClass } from '../model/BannerClass'

import { webview } from '@kit.ArkWeb'

@Component

export struct BannerDetailPage {

@State bannerClass: BannerClass | null = null

controller: webview.WebviewController = new webview.WebviewController()

@Consume('articlePathStack') articlePathStack: NavPathStack

aboutToAppear(): void {

this.bannerClass = this.articlePathStack.getParamByName('bannerDetailPage')[0] as BannerClass

}

build() {

NavDestination() {

Column() {

Web({

src: this.bannerClass?.url,

controller: this.controller

})

.darkMode(WebDarkMode.Auto)

.domStorageAccess(true)

.zoomAccess(true)

.fileAccess(true)

.mixedMode(MixedMode.All)

.javaScriptAccess(true)

.width('100%')

.layoutWeight(1)

}

.width('100%')

.height('100%')

}

view/Banner.ets

import { BannerClass } from '../model/BannerClass'
import { bufferToString } from '../util/BufferUtil'

@Preview
@Component
export struct Banner {
  @State bannerList: BannerClass[] = []
  @Consume('articlePathStack') articlePathStack: NavPathStack

  getBannerDataFromJSON() {
    getContext(this).resourceManager.getRawFileContent('BannerData.json').then(value => {
      // 获取buffer内容
      // let buffer: ArrayBufferLike = value.buffer

      // 转换为字符串
      // let res: string = bufferToString(buffer)

      // 解析为数据结构
      // this.bannerList = JSON.parse(res) as BannerClass[]

      // 简写
      this.bannerList = JSON.parse(bufferToString(value.buffer)) as BannerClass[]
    })
  }

  aboutToAppear(): void {
    this.getBannerDataFromJSON()
  }

  build() {
    Swiper() {
      ForEach(this.bannerList, (item: BannerClass, index: number) => {
        Image($r(item.imageSrc))
          .objectFit(ImageFit.Contain)
          .width('100%')
          .padding({ top: 11, left: 16, right: 16 })
          .borderRadius(16)
          .onClick(() => {
            this.articlePathStack.pushPathByName('bannerDetailPage', item)
          })
      }, (item: BannerClass, index: number) => item.id)
    }
    .autoPlay(true)
    .loop(true)
    .indicator(
      new DotIndicator()
        .color('#1a000000')
        .selectedColor('#0A59F7')
    )

  }
}

import { BannerClass } from '../model/BannerClass'

import { bufferToString } from '../util/BufferUtil'

@Preview

@Component

export struct Banner {

@State bannerList: BannerClass[] = []

@Consume('articlePathStack') articlePathStack: NavPathStack

getBannerDataFromJSON() {

getContext(this).resourceManager.getRawFileContent('BannerData.json').then(value => {

// 获取buffer内容

// let buffer: ArrayBufferLike = value.buffer

// 转换为字符串

// let res: string = bufferToString(buffer)

// 解析为数据结构

// this.bannerList = JSON.parse(res) as BannerClass[]

// 简写

this.bannerList = JSON.parse(bufferToString(value.buffer)) as BannerClass[]

})

}

aboutToAppear(): void {

this.getBannerDataFromJSON()

}

build() {

Swiper() {

ForEach(this.bannerList, (item: BannerClass, index: number) => {

Image($r(item.imageSrc))

.objectFit(ImageFit.Contain)

.width('100%')

.padding({ top: 11, left: 16, right: 16 })

.borderRadius(16)

.onClick(() => {

this.articlePathStack.pushPathByName('bannerDetailPage', item)

})

}, (item: BannerClass, index: number) => item.id)

}

.autoPlay(true)

.loop(true)

.indicator(

new DotIndicator()

.color('#1a000000')

.selectedColor('#0A59F7')

)

}

view/EnablementView.ets

import { ArticleClass } from '../model/ArticleClass'
import { bufferToString } from '../util/BufferUtil'

@Component
struct EnablementItem {
  @Prop enablementItem: ArticleClass

  build() {
    Column() {
      Image($r(this.enablementItem.imageSrc))
        .width('100%')
        .objectFit(ImageFit.Cover)
        .height(96)
        .borderRadius({
          topLeft: 16,
          topRight: 16
        })

      Text(this.enablementItem.title)
        .height(19)
        .width('100%')
        .fontSize(14)
        .textAlign(TextAlign.Start)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .maxLines(1)
        .fontWeight(400)
        .padding({ left: 12, right: 12 })
        .margin({ top: 8 })
      Text(this.enablementItem.brief)
        .height(32)
        .width('100%')
        .fontSize(12)
        .textAlign(TextAlign.Start)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .maxLines(2)
        .fontWeight(400)
        .fontColor('rgba(0, 0, 0, 0.6)')
        .padding({ left: 12, right: 12 })
        .margin({ top: 2 })
    }
    .width(160)
    .height(169)
    .borderRadius(16)
    .backgroundColor(Color.White)
  }
}


@Preview
@Component
export struct EnablementView {
  @State enablementList: Array<ArticleClass> = []
  @Consume('articlePathStack') articlePathStack: NavPathStack

  aboutToAppear(): void {
    this.getEnablementDataFromJSON()
  }

  getEnablementDataFromJSON() {
    getContext(this).resourceManager.getRawFileContent('EnablementData.json').then(value => {
      this.enablementList = JSON.parse(bufferToString(value.buffer)) as ArticleClass[]
    })
  }

  build() {
    Column() {

      Text('赋能套件')
        .width('100%')
        .fontColor('#182431')
        .fontSize(16)
        .fontWeight(500)
        .fontFamily('HarmonyHeiTi-medium')
        .textAlign(TextAlign.Start)
        .padding({ left: 16 })
        .margin({ bottom: 8.5 })

      Grid() {
        ForEach(this.enablementList, (item: ArticleClass) => {
          GridItem() {
            EnablementItem({ enablementItem: item })
              .onClick(() => {
                this.articlePathStack.pushPathByName('articleDetail', item)
              })
          }
        }, (item: ArticleClass) => item.id)
      }
      .rowsTemplate('1fr')
      .columnsGap(8)
      .scrollBar(BarState.Off)
      .height(169)
      .padding({ top: 2, left: 16, right: 16 })
    }
    .width('100%')
    .margin({ top: 18 })
  }
}

import { ArticleClass } from '../model/ArticleClass'

import { bufferToString } from '../util/BufferUtil'

@Component

struct EnablementItem {

@Prop enablementItem: ArticleClass

build() {

Column() {

Image($r(this.enablementItem.imageSrc))

.width('100%')

.objectFit(ImageFit.Cover)

.height(96)

.borderRadius({

topLeft: 16,

topRight: 16

})

Text(this.enablementItem.title)

.height(19)

.width('100%')

.fontSize(14)

.textAlign(TextAlign.Start)

.textOverflow({ overflow: TextOverflow.Ellipsis })

.maxLines(1)

.fontWeight(400)

.padding({ left: 12, right: 12 })

.margin({ top: 8 })

Text(this.enablementItem.brief)

.height(32)

.width('100%')

.fontSize(12)

.textAlign(TextAlign.Start)

.textOverflow({ overflow: TextOverflow.Ellipsis })

.maxLines(2)

.fontWeight(400)

.fontColor('rgba(0, 0, 0, 0.6)')

.padding({ left: 12, right: 12 })

.margin({ top: 2 })

}

.width(160)

.height(169)

.borderRadius(16)

.backgroundColor(Color.White)

}

@Preview

@Component

export struct EnablementView {

@State enablementList: Array<ArticleClass> = []

@Consume('articlePathStack') articlePathStack: NavPathStack

aboutToAppear(): void {

this.getEnablementDataFromJSON()

}

getEnablementDataFromJSON() {

getContext(this).resourceManager.getRawFileContent('EnablementData.json').then(value => {

this.enablementList = JSON.parse(bufferToString(value.buffer)) as ArticleClass[]

})

}

build() {

Column() {

Text('赋能套件')

.width('100%')

.fontColor('#182431')

.fontSize(16)

.fontWeight(500)

.fontFamily('HarmonyHeiTi-medium')

.textAlign(TextAlign.Start)

.padding({ left: 16 })

.margin({ bottom: 8.5 })

Grid() {

ForEach(this.enablementList, (item: ArticleClass) => {

GridItem() {

EnablementItem({ enablementItem: item })

.onClick(() => {

this.articlePathStack.pushPathByName('articleDetail', item)

})

}

}, (item: ArticleClass) => item.id)

}

.rowsTemplate('1fr')

.columnsGap(8)

.scrollBar(BarState.Off)

.height(169)

.padding({ top: 2, left: 16, right: 16 })

}

.width('100%')

.margin({ top: 18 })

}

view/TutorialView.ets

import { ArticleClass } from '../model/ArticleClass'
import { bufferToString } from '../util/BufferUtil'


@Component
struct TutorialItem {
  @Prop tutorialItem: ArticleClass

  build() {
    Row() {
      Column() {
        Text(this.tutorialItem.title)
          .height(19)
          .width('100%')
          .fontSize(14)
          .textAlign(TextAlign.Start)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .maxLines(1)
          .fontWeight(400)
          .margin({ top: 4 })
        Text(this.tutorialItem.brief)
          .height(32)
          .width('100%')
          .fontSize(12)
          .textAlign(TextAlign.Start)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .maxLines(2)
          .fontWeight(400)
          .fontColor('rgba(0, 0, 0, 0.6)')
          .margin({ top: 5 })
      }
      .height('100%')
      .layoutWeight(1)
      .alignItems(HorizontalAlign.Start)
      .margin({ right: 12 })

      Image($r(this.tutorialItem.imageSrc))
        .height(64)
        .width(108)
        .objectFit(ImageFit.Cover)
        .borderRadius(16)

    }
    .width('100%')
    .height(88)
    .borderRadius(16)
    .backgroundColor(Color.White)
    .padding(12)
    .alignItems(VerticalAlign.Top)
  }
}

@Preview
@Component
export struct TutorialView {
  @State tutorialList: Array<ArticleClass> = []
  @Consume('articlePathStack') articlePathStack: NavPathStack

  aboutToAppear(): void {
    this.getTutorialDataFromJSON()
  }

  getTutorialDataFromJSON() {
    getContext(this).resourceManager.getRawFileContent('TutorialData.json').then(value => {
      this.tutorialList = JSON.parse(bufferToString(value.buffer)) as ArticleClass[]
    })
  }

  build() {

    Column() {
      Text('入门教程')
        .fontColor('#182431')
        .fontSize(16)
        .fontWeight(500)
        .fontFamily('HarmonyHeiTi-medium')
        .textAlign(TextAlign.Start)
        .padding({ left: 16 })
        .margin({ bottom: 8.5 })

      List({ space: 12 }) {
        ForEach(this.tutorialList, (item: ArticleClass) => {
          ListItem() {
            TutorialItem({ tutorialItem: item })
              .onClick(() => {
                this.articlePathStack.pushPathByName('articleDetail', item)
              })
          }
        }, (item: ArticleClass) => item.id)
      }
      .scrollBar(BarState.Off)
      .padding({ left: 16, right: 16 })

    }
    .width('100%')
    .margin({ top: 18 })
    .alignItems(HorizontalAlign.Start)

  }
}

100

import { ArticleClass } from '../model/ArticleClass'

import { bufferToString } from '../util/BufferUtil'

@Component

struct TutorialItem {

@Prop tutorialItem: ArticleClass

build() {

Row() {

Column() {

Text(this.tutorialItem.title)

.height(19)

.width('100%')

.fontSize(14)

.textAlign(TextAlign.Start)

.textOverflow({ overflow: TextOverflow.Ellipsis })

.maxLines(1)

.fontWeight(400)

.margin({ top: 4 })

Text(this.tutorialItem.brief)

.height(32)

.width('100%')

.fontSize(12)

.textAlign(TextAlign.Start)

.textOverflow({ overflow: TextOverflow.Ellipsis })

.maxLines(2)

.fontWeight(400)

.fontColor('rgba(0, 0, 0, 0.6)')

.margin({ top: 5 })

}

.height('100%')

.layoutWeight(1)

.alignItems(HorizontalAlign.Start)

.margin({ right: 12 })

Image($r(this.tutorialItem.imageSrc))

.height(64)

.width(108)

.objectFit(ImageFit.Cover)

.borderRadius(16)

}

.width('100%')

.height(88)

.borderRadius(16)

.backgroundColor(Color.White)

.padding(12)

.alignItems(VerticalAlign.Top)

}

@Preview

@Component

export struct TutorialView {

@State tutorialList: Array<ArticleClass> = []

@Consume('articlePathStack') articlePathStack: NavPathStack

aboutToAppear(): void {

this.getTutorialDataFromJSON()

}

getTutorialDataFromJSON() {

getContext(this).resourceManager.getRawFileContent('TutorialData.json').then(value => {

this.tutorialList = JSON.parse(bufferToString(value.buffer)) as ArticleClass[]

})

}

build() {

Column() {

Text('入门教程')

.fontColor('#182431')

.fontSize(16)

.fontWeight(500)

.fontFamily('HarmonyHeiTi-medium')

.textAlign(TextAlign.Start)

.padding({ left: 16 })

.margin({ bottom: 8.5 })

List({ space: 12 }) {

ForEach(this.tutorialList, (item: ArticleClass) => {

ListItem() {

TutorialItem({ tutorialItem: item })

.onClick(() => {

this.articlePathStack.pushPathByName('articleDetail', item)

})

}

}, (item: ArticleClass) => item.id)

}

.scrollBar(BarState.Off)

.padding({ left: 16, right: 16 })

}

.width('100%')

.margin({ top: 18 })

.alignItems(HorizontalAlign.Start)

}

下载源码

Arkui01-设置组件导航下载

官网地址

https://developer.huawei.com/consumer/cn/training/course/slightMooc/C101717497640610394