desc:设置页面UI

+import ArrayList from '@ohos.util.ArrayList'
+import { MineSettingComponent } from 'wdComponent';
+
+@Entry
+@Component
+struct SettingPage {
+  @State message: string = 'Hello World 02'
+
+  build() {
+    Column() {
+      MineSettingComponent()
+    }.setFullWidth()
+  }
+
+  // 私有方法
+  @Styles setFullWidth(){
+    .width('100%')
+  }
+}
+/*
+
+* */

@@ -3,6 +3,7 @@
     "pages/Index",
     "pages/Index",
     "pages/MainPage",
     "pages/MainPage",
     "pages/ColumnPage",
     "pages/ColumnPage",
-    "pages/TestPage"
+    "pages/TestPage",
+    "pages/SettingPage"
   ]
   ]
 }
 }

@@ -27,3 +27,5 @@ export { TriPicCardComponent } from "./components/view/TriPicCardComponent"
 export { BigPicCardComponent } from "./components/view/BigPicCardComponent"
 export { BigPicCardComponent } from "./components/view/BigPicCardComponent"
 
 
 export { HeadPictureCardComponent } from "./components/view/HeadPictureCardComponent"
 export { HeadPictureCardComponent } from "./components/view/HeadPictureCardComponent"
+
+export { MineSettingComponent } from "./components/page/MineSettingComponent"

@@ -345,6 +345,9 @@ export struct MinePageComponent {
           }.padding({left:'27lpx'})
           }.padding({left:'27lpx'})
           .onClick(()=>{
           .onClick(()=>{
             console.log(index+"")
             console.log(index+"")
+            if (index == 4) {
+              RouteManager.jumpNewPage("pages/SettingPage") // 调用跳转方法，跳转新页面
+            }
           })
           })
           .height('117lpx')
           .height('117lpx')
         }, item => item)
         }, item => item)

+// @ts-nocheck
+import { BottomNavi, CommonConstants } from 'wdConstant';
+import { Logger } from 'wdKit';
+import { TopNavigationComponent } from './TopNavigationComponent';
+import { BottomNavDTO } from '../../repository/bean/BottomNavDTO';
+import { UIUtils } from '../../repository/UIUtils';
+import { MinePageComponent } from './MinePageComponent';
+import PageViewModel from '../../viewmodel/PageViewModel';
+
+import storageStatistics from "@ohos.file.storageStatistics";
+import { BusinessError } from '@ohos.base';
+
+
+@Component
+export struct MineSettingComponent {
+  @State listData: Array<string | Array<string>> = new Array();
+  @State privacySwitch:boolean = false
+  @State cacheSice:number = 0
+
+  aboutToAppear() {
+    // 获取设置页面数据
+    this.getSettingPageData()
+
+    // 获取缓存数据
+    storageStatistics.getCurrentBundleStats((err: BusinessError, bundleStats: storageStatistics.BundleStats) => {
+      if (err) {
+        console.error(`Invoke getCurrentBundleStats failed, code is ${err.code}, message is ${err.message}`);
+      } else {
+        this.cacheSice =  bundleStats.appSize / 1024.00 / 1024.00.toFixed(2);
+      }
+    });
+  }
+
+  getSettingPageData() {
+    let listArr = [['账户与安全', '接收推送', '隐私设罝', '仅WiFi网络加载图片', 'WiFi网络情况下自动播放视频', '开户播放器悬浮窗'], ['清除缓存', '去评分']];
+    this.listData = listArr;
+  }
+
+  build() {
+    Navigation() {
+      //滑动区域
+      this.settingList()
+    }.titleMode(NavigationTitleMode.Mini)
+    .title('设置')
+  }
+
+  // 页面布局
+  @Builder settingList() {
+    Column() {
+      List() {
+        // 循环渲染ListItemGroup，contactsGroups为多个分组联系人contacts和标题title的数据集合
+        ForEach(this.listData, (item: Array<string>, index: number) => {
+          ListItemGroup({ header: index === 0 ? this.itemHead("") : this.itemHead("1") }) {
+            // 循环渲染ListItem
+            ForEach(item, (subItem: string, subIndex: number) => {
+              ListItem() {
+                if (subIndex == 6) {
+                  this.getArrowCell(subItem, subIndex, index)
+                } else if (subIndex == 1 || subIndex == 3 || subIndex == 4 || subIndex == 5) {
+                  this.getSwitchCell(subItem, subIndex)
+                } else {
+                  this.getArrowCell(subItem, subIndex, index)
+                }
+
+              }.padding({ left: '27lpx' })
+              .onClick(() => {
+                console.log(subIndex + "")
+                if (subIndex == 4) {
+                  // RouteManager.jumpNewPage("pages/SettingPage") // 调用跳转方法，跳转新页面
+                }
+              })
+              .height('117lpx')
+            }, subItem => subItem)
+          }
+          .divider({
+            strokeWidth: 1,
+            startMargin: 15,
+            endMargin: 10,
+            color: '#f0f0f0'
+          })
+        })
+      }.onScrollFrameBegin((offset, state) => {
+        return { offsetRemain: 0 }
+      })
+    }
+    .backgroundColor(Color.White)
+    .borderRadius(8)
+  }
+
+  @Builder itemHead(text: string) {
+    // 列表分组的头部组件，对应联系人分组A、B等位置的组件
+    if (text.length > 0) {
+      Row().width('100%').height('20lpx').backgroundColor(0xf0f0f0)
+    }
+  }
+
+  // 右侧开关cell
+  @Builder getSwitchCell(item, index) {
+    Column() {
+      Row() {
+        // 左侧logo和标题
+        Row() {
+          // 判断有没有图片
+          if (0) {
+            Image('https://pic.rmb.bdstatic.com/e182cf67c341d1128d2a6cc05886bf62.jpeg@s_0,h_2000')
+              .height('38lpx')
+              .margin({ right: '5lpx' })
+
+            Text(`${item}`)
+              .margin({ top: '8lpx' })
+              .height('38lpx')
+              .fontColor('#333333')
+              .fontSize('29lpx')
+          } else {
+            Text(`${item}`)
+              .margin({ top: '8lpx' })
+              .height('38lpx')
+              .fontColor('#333333')
+              .fontSize('29lpx')
+          }
+        }.width('60%')
+
+        // 右侧文案和右箭头
+        Row() {
+          Toggle({ type: ToggleType.Switch, isOn: false })
+            .height('50lpx')
+            .margin({ left: '81lpx', right: '29lpx' })
+            .selectedColor(Color.Pink)
+            .onChange((isOn: boolean) => {
+              this.privacySwitch = isOn;
+            })
+        }.width('40%')
+        .margin({ right: '29lpx' })
+        .justifyContent(FlexAlign.End)
+
+      }
+      .alignItems(VerticalAlign.Center)
+      .justifyContent(FlexAlign.SpaceBetween)
+    }.height('54lpx')
+  }
+
+  // 右文字+箭头cell
+  @Builder getArrowCell(item, index, mainIndex) {
+    Column() {
+
+      Row() {
+        // 左侧logo和标题
+        Row() {
+          // 判断有没有图片
+          if (this.privacySwitch) {
+            Image('https://pic.rmb.bdstatic.com/e182cf67c341d1128d2a6cc05886bf62.jpeg@s_0,h_2000')
+              .height('38lpx')
+              .margin({ right: '5lpx' })
+          }
+          Text(`${item}`)
+            .margin({ top: '8lpx' })
+            .height('38lpx')
+            .fontColor('#333333')
+            .fontSize('29lpx')
+        }.width('60%')
+
+        // 右侧文案和右箭头
+        Row() {
+          Text((index == 0 && mainIndex != 0) ? this.cacheSice.toString() + 'MB' : '')
+            .fontColor('#999999')
+            .maxLines(1)
+          Image($r('app.media.mine_user_arrow'))
+            .width('27lpx')
+            .height('27lpx')
+            .objectFit(ImageFit.Auto)
+          Column().width('29lpx')
+        }.width('40%')
+        .margin({ right: '29lpx' })
+        .justifyContent(FlexAlign.End)
+
+      }
+      .alignItems(VerticalAlign.Center)
+      .justifyContent(FlexAlign.SpaceBetween)
+
+    }
+    .height('54lpx')
+  }
+}