diff --git a/zh-cn/application-dev/key-features/multi-device-app-dev/responsive-layout.md b/zh-cn/application-dev/key-features/multi-device-app-dev/responsive-layout.md index 6da55b1e785e4a4db3c69a7e2047c433ac434609..ce5f47f69eeb3459efd9feb3ca58a73b9046bccb 100644 --- a/zh-cn/application-dev/key-features/multi-device-app-dev/responsive-layout.md +++ b/zh-cn/application-dev/key-features/multi-device-app-dev/responsive-layout.md @@ -52,16 +52,16 @@ ```ts // MainAbility.ts - import type window from '@ohos.window' + import window from '@ohos.window' import display from '@ohos.display' import Ability from '@ohos.app.ability.Ability' export default class MainAbility extends Ability { - private windowObj: window.Window - private curBp: string + private windowObj?: window.Window + private curBp: string = '' //... // 根据当前窗口尺寸更新断点 - private updateBreakpoint(windowWidth) :void{ + private updateBreakpoint(windowWidth: number) :void{ // 将长度的单位由px换算为vp let windowWidthVp = windowWidth / (display.getDefaultDisplaySync().densityDPI / 160) let newBp: string = '' @@ -166,7 +166,7 @@ export class BreakpointType { this.md = md this.lg = lg } - GetValue(currentBreakpoint: string):T { + GetValue(currentBreakpoint: string):T | undefined{ if (currentBreakpoint === 'sm') { return this.sm } @@ -182,9 +182,9 @@ export class BreakpointType { export class BreakpointSystem { private currentBreakpoint: string = 'md' - private smListener: mediaquery.MediaQueryListener - private mdListener: mediaquery.MediaQueryListener - private lgListener: mediaquery.MediaQueryListener + private smListener?: mediaquery.MediaQueryListener + private mdListener?: mediaquery.MediaQueryListener + private lgListener?: mediaquery.MediaQueryListener private updateCurrentBreakpoint(breakpoint: string) :void{ if (this.currentBreakpoint !== breakpoint) { diff --git a/zh-cn/application-dev/key-features/multi-device-app-dev/settings-application-page.md b/zh-cn/application-dev/key-features/multi-device-app-dev/settings-application-page.md index 13531ae35efb4610815474c350244d565563766c..1e8364e1a503aaf874e52f2fbc43cb004575f4a5 100644 --- a/zh-cn/application-dev/key-features/multi-device-app-dev/settings-application-page.md +++ b/zh-cn/application-dev/key-features/multi-device-app-dev/settings-application-page.md @@ -58,9 +58,162 @@ struct Index { } } ``` +```typescript +//核心代码 SettingList.ets +class ItemObj { + title?: Resource + tag?: string + icon?:Resource +} +let bluetoothTab:ItemObj={ + title: $r('app.string.bluetoothTab'), + tag: $r('app.string.enabled'), + icon: $r('app.media.blueTooth'), +} +let mobileData:ItemObj={ + title: $r('app.string.mobileData'), + icon: $r('app.media.mobileData'), +} +let brightnessTab:ItemObj={ + title: $r('app.string.brightnessTab'), + icon: $r('app.media.displayAndBrightness'), +} +let volumeControlTab:ItemObj={ + title: $r('app.string.volumeControlTab'), + icon: $r('app.media.volume'), +} +let biometricsAndPassword:ItemObj={ + title: $r('app.string.biometricsAndPassword'), + icon: $r('app.media.biometricsAndPassword'), +} +let applyTab:ItemObj={ + title: $r('app.string.applyTab'), + icon: $r('app.media.application'), +} +let storageTab:ItemObj={ + title: $r('app.string.storageTab'), + icon: $r('app.media.storage'), +} +let security:ItemObj={ + title: $r('app.string.security'), + icon: $r('app.media.security'), +} +let privacy:ItemObj={ + title: $r('app.string.privacy'), + icon: $r('app.media.privacy'), +} +let usersAccountsTab:ItemObj={ + title: $r('app.string.usersAccountsTab'), + icon: $r('app.media.userAccounts'), +} +let systemTab:ItemObj={ + title: $r('app.string.systemTab'), + icon: $r('app.media.system'), +} +let aboutTab:ItemObj={ + title: $r('app.string.aboutTab'), + icon: $r('app.media.aboutDevice'), +} + +import { MainItem } from '../components/MainItem' +import { ItemGroup } from '../components/ItemGroup' +import { SearchBox } from '../components/SearchBox' +import { MoreConnectionsItem } from '../moreconnections/MoreConnectionsItem' +import { WlanSettingItem } from '../wlan/WlanSettingItem' + +@Component +export struct SettingList { + @Builder + CustomDivider() { + Divider() + .strokeWidth('1px') + .color($r('sys.color.ohos_id_color_list_separator')) + .margin({ left: 48, right: 8 }) + } + + build() { + List({ space: 12 }) { + ListItem() { + SearchBox() + } + .padding({ top: 8, bottom: 8 }) + .width('100%') + + ListItem() { + ItemGroup() { + WlanSettingItem() + + this.CustomDivider() + + MainItem(bluetoothTab) + + this.CustomDivider() + + MainItem(mobileData) + + this.CustomDivider() + MoreConnectionsItem() + } + } + + ListItem() { + ItemGroup() { + MainItem(brightnessTab) + } + } + + ListItem() { + ItemGroup() { + MainItem(volumeControlTab) + } + } + + ListItem() { + ItemGroup() { + MainItem(biometricsAndPassword) + + this.CustomDivider() + + MainItem(applyTab) + + this.CustomDivider() + + MainItem(storageTab) + + this.CustomDivider() + + MainItem(security) + + this.CustomDivider() + + MainItem(privacy) + } + } + ListItem() { + ItemGroup() { + MainItem(usersAccountsTab) + this.CustomDivider() + MainItem(systemTab) + + this.CustomDivider() + + MainItem(aboutTab) + } + } + + } + .padding({ left: 12, right: 12 }) + .width('100%') + .height('100%') + .backgroundColor($r('sys.color.ohos_id_color_sub_background')) + } +} + + +``` ## 如何实现点击跳转或刷新 Navigation组件通常搭配[NavRouter组件](../../reference/arkui-ts/ts-basic-components-navrouter.md)以及[NavDestination组件](../../reference/arkui-ts/ts-basic-components-navdestination.md)一起使用： @@ -84,6 +237,18 @@ NavRouter组件默认提供了点击响应处理，不需要开发者自定义 结合设置应用的具体场景来看，上图1号小红框是NavRouter的第一个孩子节点，2号红框是NavRouter的第二个孩子节点，相应的核心代码实现如下。 ```typescript +class MainItemObj { + title?: Resource + tag?: string + icon?:Resource + label?: string +} +let mainItem:MainItemObj={ + title: $r('app.string.wifiTab'), + tag: 'UX', + icon: $r('app.media.wlan'), + label: 'WLAN' +} @Component export struct WlanSettingItem { @LocalStorageLink('selectedLabel') selectedLabel: string = '' @@ -91,12 +256,7 @@ export struct WlanSettingItem { build() { Column() { NavRouter() { - MainItem({ - title: $r('app.string.wifiTab'), - tag: 'UX', - icon: $r('app.media.wlan'), - label: 'WLAN' - }) + MainItem(mainItem) NavDestination() { WlanSetting() @@ -135,13 +295,19 @@ NavDestination组件用于实际刷新Navigation组件Content区域的显示。 结合具体场景，红框3是一个NavRouter组件，点击后可以控制Navigation组件中的Content区域刷新为红框4对应的NavDestination组件吗，其核心代码实现如下所示。 ```typescript +class SubItemArrowObj{ + title?: Resource +} +let subItemArrow:SubItemArrowObj={ + title: $r('app.string.moreWlanSettings') +} @Component export struct WlanMoreSettingItem { @LocalStorageLink('selectedLabel') selectedLabel: string = '' build() { NavRouter() { - SubItemArrow({ title: $r('app.string.moreWlanSettings') }) + SubItemArrow(subItemArrow) NavDestination() { WlanMoreSetting()