From 52893f4deb28bc2a2fe404137e730754851743d7 Mon Sep 17 00:00:00 2001
From: swx1239486 <songqinqin4@huawei.com>
Date: Wed, 6 Sep 2023 15:29:40 +0800
Subject: [PATCH] =?UTF-8?q?akrts=E6=95=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: swx1239486 <songqinqin4@huawei.com>
---
 .../settings-application-page.md              | 180 +++++++++++++++++-
 1 file changed, 173 insertions(+), 7 deletions(-)

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 13531ae35e..b3bd979647 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()
-- 
GitLab