HarmonyOS（鸿蒙）开发工具 DevEco Studio app（应用）生成仿个人手机管家【内含全部源码并且附带详尽注释】

本文章提供全部源码和详尽注释（注意相同概念每个页面仅重复一次），适用于使用DevEco Studio开发工具建造手机app

m0_75269074

1953人浏览 · 2024-07-20 11:19:49

m0_75269074 · 2024-07-20 11:19:49 发布

一、首页：广告页（3秒后自动跳转）

图1-1

二：登陆页面（输入后跳转）

图2-1

三：app主要页面

图3-1 图3-2

图3-3 图3-4

图3-5 图3-6

四：补充说明

1.登陆页面图2-1涉及到传值到下一个页面的问题，在图2-1与图3-1中能够体现，昵称:AD，详情请观看代码

2.图3-2中有自定义弹窗

图4-1

3.某些图片中显示未显示完全，其实是有滚动效果，详情请观看代码

4.若是觉得图片文字不清晰，是截图工具的问题，文字本身没有问题

五、开发工具自带模型机视频展示

若是观看不了可进入看个人主页观看（嘿嘿，第一次弄）

展示

六、源码

图1-1：广告页面

ArkUI框架

文件名：AD.ets

import { router } from '@kit.ArkUI'

@Entry       //装饰器，代表是该页面的入口
@Component  //装饰器，代表自定义组件（一个页面是由多个自定义组件组成）
struct Index {  //struct 关键字 组件 Index 自定义组件的组件名


  build() {                       //结构体，也叫函数
    Column(){
      Image($r("app.media.mount"))  //加载图片
        .width("100%")              //图片宽度与高度设定
        .height("100%")

    }
    .height('100%')
    .width('100%')
  }onPageShow(){            //页面显示
    setTimeout(()=>{
      router.pushUrl({       //跳转
        url: "pages/denglu" //所跳转的页面
      })

    },3000)               //3秒后执行
  }

}

图2-1：登陆页面

文件名：denglu.ets

import { Prompt, router } from '@kit.ArkUI';

export  class Person{     //导出，供别人使用
  name:string
  constructor(nname:string) { //将数值传入name
    this.name=nname
  }
}
@Entry  //装饰器，页面的入口组件
@Component  //装饰器，代表自定义组件
struct Indexa { //struct 关键字 组件 Indexa 自定义组件的组件名
  @State message: string = '';  //传入所输入的内容至message

  build() {
    Column(){

      TextInput({placeholder:'请输入昵称'}).type(InputType.Normal)//文字输入框
        .height("8%") //高度
        .fontSize(25) //所输入文字大小
        .fontColor(Color.White) //所输入文字颜色
        .placeholderColor(Color.White)		//默认文字颜色
        .placeholderFont({size:20})   //默认文字样式
        .caretColor(Color.Yellow)	//光标颜色
        .onChange((value:string)=>{	//输入的字符串
          this.message=value
        })
        .margin({top:"90%"}) //外间距
        .borderWidth(2) //边框大小
        .borderColor(Color.Black)//边框颜色

      Button("确认")  //按钮
        .fontSize(20)
        .backgroundColor("#95e89b") //背景颜色
        .fontColor(Color.Black) //文字颜色
        .width("20%")
        .onClick(()=>{
          const mt:Person=new Person(this.message) //注册传导结构体，将所输入字符串传到所定义结构体

          if(this.message!="") {   //所输入非空
            router.pushUrl({ //跳转
              url:"pages/Index",
              params:mt   //传递信息（结构体）
            })
            Prompt.showToast({
              //吐司
              message: "欢迎您，" + this.message + "!", //吐司内容
              duration: 3000//显示持续时间  单位毫秒

            })
          }
          else{//所输入为空
            Prompt.showToast({
              //吐司
              message: "！！！昵称不能为空", //吐司内容
              duration: 3000//显示持续时间  单位毫秒

            })
          }

        })
        .margin({top:"30%"})
    }.backgroundImage($r("app.media.mount1"))
    .backgroundImageSize(ImageSize.Cover)
    .height('100%')
    .width('100%')
  }
}

图3-1与图3-2：

文件名：Index.ets

import { router } from '@kit.ArkUI'       //导包
import { Person } from './denglu'


@Entry  //装饰器，代表是该页面的入口
@Component  //装饰器，代表自定义组件（一个页面是由多个自定义组件组成）
struct msds{//struct 关键字 组件 msds 自定义组件的组件名

  controller1: CustomDialogController = new CustomDialogController({  //注册控制器（自定义弹窗）
    builder: CustomDialogText(),    //弹窗内容
    alignment: DialogAlignment.Center,  //对齐方式
    offset:{dx: 0, dy: -10},      //出现位置
    backgroundColor:"#858b85",    //背景颜色
    cornerRadius:20,    //弹窗弧度
    //maskColor:Color.Black,    //遮盖颜色，即除弹窗外的屏幕其他区域
    borderColor:Color.Black     //边框颜色
  })
  controller2: CustomDialogController = new CustomDialogController({
    builder: CustomDialogText1(),
    alignment: DialogAlignment.Center,
    offset:{dx: 0, dy: -10},
    backgroundColor:"#858b85",
    cornerRadius:20,
    //maskColor:Color.Black,
    borderColor:Color.Black
  })
  controller3: CustomDialogController = new CustomDialogController({
    builder: CustomDialogText2(),
    alignment: DialogAlignment.Center,
    offset:{dx: 0, dy: -10},
    backgroundColor:"#858b85",
    cornerRadius:20,
    //maskColor:Color.Black,
    borderColor:Color.Black
  })
  controller4: CustomDialogController = new CustomDialogController({
    builder: CustomDialogText3(),
    alignment: DialogAlignment.Center,
    offset:{dx: 0, dy: -10},
    backgroundColor:"#858b85",
    cornerRadius:20,
    //maskColor:Color.Black,
    borderColor:Color.Black
  })
  private swiperController:SwiperController =new SwiperController()   //注册轮播控制器
  scrmy:Scroller=new Scroller()   //注册滚动器
  @State currentIndex:number=0    //菜单标号
  @State chuan:Person=router.getParams() as Person    //传输结构体注册
  private controller:TabsController=new TabsController()    //注册菜单控制器
  @Builder TabBuilder(title:string,targetIndex:number,selectedImg:Resource,normalImg:Resource){//定义菜单的内部逻辑
    Column(){
      Image(this.currentIndex===targetIndex ? selectedImg : normalImg).size({width:25,height:25})//点击菜单图片改变并定义图片大小
      Text(title).fontColor(this.currentIndex===targetIndex?"#1698CE":"#6B6B6B")  //点击菜单文字改变
        .fontSize(15)//定义文字大小
    }.width("100%").height(50).justifyContent(FlexAlign.Center)//内容对齐方式：中心
  }
  build(){
    Tabs({barPosition:BarPosition.End,controller:this.controller}){//导航栏位置
      TabContent(){
        Column(){
          Row(){
            Text("i 管家")  //文字框
              .width("80%") //文字框宽高
              .height("100%")
              .fontSize(30)   //文字大小
              .fontWeight(FontWeight.Bold)//文字样式：加粗
              .fontColor(Color.White)//文字颜色
              .margin({left:"5%"})//边框外间距
            Button()//按钮
              .backgroundColor(Color.Black) //背景颜色
              .width("10%")
              .height("80%")
              .backgroundImage($r("app.media.F_1"))//背景图片加载
              .backgroundImageSize(ImageSize.Contain)//背景图片大小

              .onClick(()=>{  //点击做出相应改变
                router.pushUrl({  //跳转至相应页面
                  url:"pages/set1"
                })

              })
          }.width("100%").height("8%")
          Row(){
            Column(){
              Row(){
                Text("欢迎您，"+this.chuan.name+"！")
                  .fontSize(23)
                  .width("100%")
                  .height("20%")
                  .textAlign(TextAlign.Center)
                  .fontColor(Color.White)
              }
              Row(){
            Text("100")
              .width("38%")
              .height("80%")
              .fontSize(70)
              .fontWeight(FontWeight.Bold)
              .fontColor(Color.White)
              .padding({left:"%2"})//文字内间距
              .textAlign(TextAlign.End)//文字对齐方式
            Text("分")
              .width("2%")
              .height("80%")
              .fontSize(20)
              .fontWeight(FontWeight.Bold)
              .fontColor(Color.White)
              .margin({left:"5%"})
              .textAlign(TextAlign.Start)
              .padding({bottom:"15%"})
            Button("继续优化")
              .width("30%")
              .height("25%")
              .backgroundColor("#42cc9e")
              .fontSize(18)
              .fontWeight(FontWeight.Bold)
              .fontColor(Color.White)
              .margin({left:"22%"})

            }
            }
          }.width("100%").height("30%")
          Row(){
            Column(){
              Text("空间清理")
                .width("100%")
                .height("15%")
                .fontSize(25)
                .fontWeight(FontWeight.Bold)
                .fontColor(Color.White)
                .padding({left:0})
                .textAlign(TextAlign.Start)
                .margin({top:10})
                .padding({left:"8%"})
              Text("0.92GB垃圾清理")
                .width("100%")
                .height("15%")
                .fontSize(15)
                .fontWeight(FontWeight.Bold)
                .fontColor("#c14c4c")
                .padding({left:0})
                .textAlign(TextAlign.Start)
                .margin({top:5})
                .padding({left:"8%"})

              Text("")
                .width("100%")
                .height("60%")
                .backgroundImage($r("app.media.F_2_1"))
                .backgroundImageSize(ImageSize.FILL)
            }.width("45%").height("100%").backgroundColor("#5a2c2c").margin({left:"3%"})
            Column(){
              Text("安全检测")
                .width("100%")
                .height("15%")
                .fontSize(25)
                .fontWeight(FontWeight.Bold)
                .fontColor(Color.White)
                .padding({left:0})
                .textAlign(TextAlign.Start)
                .margin({top:10})
                .padding({left:"8%"})
              Text("手机安全防护")
                .width("100%")
                .height("15%")
                .fontSize(15)
                .fontWeight(FontWeight.Bold)
                .fontColor(Color.Gray)
                .padding({left:0})
                .textAlign(TextAlign.Start)
                .margin({top:5})
                .padding({left:"8%"})


              Text("")
                .width("100%")
                .height("60%")
                .backgroundImage($r("app.media.F_2_2"))
                .backgroundImageSize(ImageSize.FILL)
            }.width("45%").height("100%").backgroundColor("#5a2c2c").margin({left:"4%"})
          }.width("100%").height("25%")
          Row(){
            Column(){
              Text("流量管理")
                .width("100%")
                .height("40%")
                .fontSize(20)
                .fontWeight(FontWeight.Bold)
                .fontColor(Color.White)
                .padding({left:20})

                .margin({top:10})

              Text("15.69GB已使用")
                .width("100%")
                .height("15%")
                .fontSize(15)
                .fontWeight(FontWeight.Bold)
                .fontColor("#c14c4c")
                .padding({left:20})

                .margin({top:5})


              Text("")
                .width("100%")
                .height("45%")
            }.width("45%").height("100%").backgroundColor("#5a2c2c").margin({left:"3%"})
            Column(){
              Text("应用管理")
                .width("100%")
                .height("40%")
                .fontSize(20)
                .fontWeight(FontWeight.Bold)
                .fontColor(Color.White)
                .padding({left:20})

                .margin({top:10})


              Text("应用与权限管理")
                .width("100%")
                .height("15%")
                .fontSize(15)
                .fontWeight(FontWeight.Bold)
                .fontColor(Color.Gray)
                .padding({left:20})

                .margin({top:5})



              Text("")
                .width("100%")
                .height("45%")
            }.width("45%").height("100%").backgroundColor("#5a2c2c").margin({left:"4%"})
          }.width("100%").height("10%")
          Row(){
            Column() {
              Row() {
                Text("推荐工具").width("100%").height("100%")
                  .fontSize(15)
                  .fontColor(Color.Gray)
                    .padding({left:20,bottom:10})
              }.width("100%").height("18%")
              Row() { Swiper(this.swiperController){ //轮播

                Column() {
                  Text("隐私保护")
                    .width("90%")
                    .height("20%")
                    .fontColor(Color.Green)
                    .fontSize(25)
                    .fontWeight(FontWeight.Bold)
                    .padding({left:70,top:20})
                  Text("保护个人信息，避免隐私泄露")
                    .width("90%")
                    .height("40%")
                    .fontColor(Color.Gray)
                    .fontSize(15)
                    .fontWeight(FontWeight.Bold)
                    .padding({left:70,top:0})


                }.margin({left:"5%",right:"5%"}).backgroundColor(Color.White).borderRadius(20).backgroundImage($r("app.media.F_3_1")).backgroundImageSize({width:70,height:60},).backgroundImagePosition(Alignment.Start)
                .onClick(()=>{
                  router.pushUrl({
                    url:"pages/yinsibaohu"
                  })
                })
                Column() {
                  Text("紧急呼叫")
                    .width("90%")
                    .height("20%")
                    .fontColor(Color.Green)
                    .fontSize(25)
                    .fontWeight(FontWeight.Bold)
                    .padding({left:70,top:20})
                  Text("开启紧急呼叫，危急时刻救援")
                    .width("90%")
                    .height("40%")
                    .fontColor(Color.Gray)
                    .fontSize(15)
                    .fontWeight(FontWeight.Bold)
                    .padding({left:70,top:0})


                }.margin({left:"5%",right:"5%"}).backgroundColor(Color.White).borderRadius(20).backgroundImage($r("app.media.F_3_2")).backgroundImageSize({width:70,height:60},).backgroundImagePosition(Alignment.Start)
                .onClick(()=>{
                  router.pushUrl({
                    url:"pages/jinjihujiao"
                  })
                }).onClick(()=>{
                  router.pushUrl({
                    url:"pages/jinjihujiao"
                  })
                })
                Column() {
                  Text("防骗中心")
                    .width("90%")
                    .height("20%")
                    .fontColor(Color.Green)
                    .fontSize(25)
                    .fontWeight(FontWeight.Bold)
                    .padding({left:70,top:20})
                  Text("诈骗预警，风险查询")
                    .width("90%")
                    .height("40%")
                    .fontColor(Color.Gray)
                    .fontSize(15)
                    .fontWeight(FontWeight.Bold)
                    .padding({left:70,top:0})


                }.margin({left:"5%",right:"5%"}).backgroundColor(Color.White).borderRadius(20).backgroundImage($r("app.media.F_3_3")).backgroundImageSize({width:70,height:60},).backgroundImagePosition(Alignment.Start)
                .onClick(()=>{
                  router.pushUrl({
                    url:"pages/fangzhazhongxin"
                  })
                })
              }.width("100%")
              .autoPlay(false) //自动轮播
              .interval(2000) //轮播间隔
              .vertical(false)//轮播方向
              .indicator(false)//是否要有指示器，圆点
              .loop(false)  //是否要循环
              .displayCount(1)//每页显示个数
              }.width("100%")

            }
          }.width("100%").height("25%")
        }.width("100%").height("100%").backgroundColor(Color.Black)
      }.tabBar(this.TabBuilder("手机管理",0,$r("app.media.E11"),$r("app.media.E12")))
      TabContent(){//菜单内容
        Column(){
          Row(){
            Text("实用工具")
              .width("80%")
              .height("100%")
              .fontSize(30)
              .fontWeight(FontWeight.Bold)
              .fontColor(Color.White)
              .margin({left:"5%"})
            Button()
              .backgroundColor(Color.Black)
              .width("10%")
              .height("80%")
              .backgroundImage($r("app.media.F_1"))
              .backgroundImageSize(ImageSize.Contain)
              .margin("")
              .onClick(()=>{
                router.pushUrl({
                  url:"pages/set1"
                })

              })
          }.width("100%").height("8%")
          Scroll(this.scrmy)  {//滚动
            Column(){
          Row(){
            Column(){
            Text("常用工具")
              .width("100%").height("20%")
              .fontColor(Color.Gray)
              .fontSize(15)
              .padding({})
              .margin({top:"10%"})
            Row(){
              Text("电池管理")
                .textAlign(TextAlign.Center)
                .width("21%").height("50%")
                .fontColor(Color.White)
                .fontSize(11)
                .padding({top:35})
              .backgroundColor("#574646")
                .borderRadius(15)
                .backgroundImage($r("app.media.S_1_1"))
                .backgroundImageSize({width:35,height:35},)
                .backgroundImagePosition(Alignment.Top)
                .margin({left:"0%",bottom:"10%"})

              Text("手机降温")
                .textAlign(TextAlign.Center)
                .width("21%").height("50%")
                .fontColor(Color.White)
                .fontSize(11)
                .padding({top:35})
                .backgroundColor("#574646")
                .borderRadius(15)
                .backgroundImage($r("app.media.S_1_2"))
                .backgroundImageSize({width:35,height:35},)
                .backgroundImagePosition(Alignment.Top)
                .margin({left:"5%",bottom:"10%"})
              Text("骚扰拦截")
                .textAlign(TextAlign.Center)
                .width("21%").height("50%")
                .fontColor(Color.White)
                .fontSize(11)
                .padding({top:35})
                .backgroundColor("#574646")
                .borderRadius(15)
                .backgroundImage($r("app.media.S_1_3"))
                .backgroundImageSize({width:35,height:35},)
                .backgroundImagePosition(Alignment.Top)
                .margin({left:"5%",bottom:"10%"})
              Text("健康使用设备")
                .textAlign(TextAlign.Center)
                .width("22%").height("50%")
                .fontColor(Color.White)
                .fontSize(11)
                .padding({top:35})
                .backgroundColor("#574646")
                .borderRadius(15)
                .backgroundImage($r("app.media.S_1_4"))
                .backgroundImageSize({width:35,height:35},)
                .backgroundImagePosition(Alignment.Top)
                .margin({left:"5%",bottom:"10%"})
            }.width("100%").height("70%")
            }
          }.width("90%").height("25%").margin({top:"0%"})
          Row(){
            Text("其他工具")
              .width("100%").height("20%")
              .fontColor(Color.Gray)
              .fontSize(15)
              .padding({})

              .margin({bottom:"5%"})
          }.width("90%").height("5%").margin({top:"5%"})
          Row(){
            Column(){
              Row() {
                Text("    安全防护")
                  .width("70%")
                  .height("30%")
                  .fontSize(15)
                  .fontColor(Color.White)
                Button(">")
                  .width("30%")
                  .height("10%")
                  .fontSize(15)
                  .fontColor(Color.White)
                  .backgroundColor("#574646")
                  .onClick(()=>{
                    this.controller1.open()
                  })
              }
              Row() {
                Text("防骗中心")
                  .textAlign(TextAlign.Center)
                  .width("45%")
                  .height("90%")
                  .fontColor(Color.White)
                  .fontSize(11)
                  .padding({ top: 35 })
                  .backgroundColor("#574646")
                  .borderRadius(15)
                  .backgroundImage($r("app.media.S_2_11"))
                  .backgroundImageSize({ width: 35, height: 35 },)
                  .backgroundImagePosition(Alignment.Top)
                  .margin({ left: "0%", bottom: "0%" })

                Text("紧急呼叫")
                  .textAlign(TextAlign.Center)
                  .width("45%")
                  .height("90%")
                  .fontColor(Color.White)
                  .fontSize(11)
                  .padding({ top: 35 })
                  .backgroundColor("#574646")
                  .borderRadius(15)
                  .backgroundImage($r("app.media.S_2_12"))
                  .backgroundImageSize({ width: 35, height: 35 },)
                  .backgroundImagePosition(Alignment.Top)
                  .margin({ left: "10%", bottom: "0%" })
              }.width("100%").height("35%")
              Row() {
                Text("查找")
                  .textAlign(TextAlign.Center)
                  .width("45%")
                  .height("90%")
                  .fontColor(Color.White)
                  .fontSize(11)
                  .padding({ top: 35 })
                  .backgroundColor("#574646")
                  .borderRadius(15)
                  .backgroundImage($r("app.media.S_2_21"))
                  .backgroundImageSize({ width: 35, height: 35 },)
                  .backgroundImagePosition(Alignment.Top)
                  .margin({ left: "0%", bottom: "0%" })

                Text("支付宝险箱")
                  .textAlign(TextAlign.Center)
                  .width("45%")
                  .height("90%")
                  .fontColor(Color.White)
                  .fontSize(11)
                  .padding({ top: 35 })
                  .backgroundColor("#574646")
                  .borderRadius(15)
                  .backgroundImage($r("app.media.S_2_22"))
                  .backgroundImageSize({ width: 35, height: 35 },)
                  .backgroundImagePosition(Alignment.Top)
                  .margin({ left: "10%", bottom: "0%" })
              }.width("100%").height("35%")
            }.width("47%").backgroundColor("#574646").borderRadius(10)
            Column(){
              Row() {
                Text("    隐私保护")
                  .width("70%")
                  .height("30%")
                  .fontSize(15)
                  .fontColor(Color.White)
                Button(">")
                  .width("30%")
                  .height("10%")
                  .fontSize(15)
                  .fontColor(Color.White)
                  .backgroundColor("#574646")
                  .onClick(()=>{
                    this.controller2.open()
                  })
              }
              Row() {
                Text("后台弹窗管控")
                  .textAlign(TextAlign.Center)
                  .width("45%")
                  .height("90%")
                  .fontColor(Color.White)
                  .fontSize(11)
                  .padding({ top: 35 })
                  .backgroundColor("#574646")
                  .borderRadius(15)
                  .backgroundImage($r("app.media.S_2_13"))
                  .backgroundImageSize({ width: 35, height: 35 },)
                  .backgroundImagePosition(Alignment.Top)
                  .margin({ left: "0%", bottom: "0%" })

                Text("应用加密")
                  .textAlign(TextAlign.Center)
                  .width("45%")
                  .height("90%")
                  .fontColor(Color.White)
                  .fontSize(11)
                  .padding({ top: 35 })
                  .backgroundColor("#574646")
                  .borderRadius(15)
                  .backgroundImage($r("app.media.S_2_14"))
                  .backgroundImageSize({ width: 35, height: 35 },)
                  .backgroundImagePosition(Alignment.Top)
                  .margin({ left: "10%", bottom: "0%" })
              }.width("100%").height("35%")
              Row() {
                Text("文件保密柜")
                  .textAlign(TextAlign.Center)
                  .width("45%")
                  .height("90%")
                  .fontColor(Color.White)
                  .fontSize(11)
                  .padding({ top: 35 })
                  .backgroundColor("#574646")
                  .borderRadius(15)
                  .backgroundImage($r("app.media.S_2_23"))
                  .backgroundImageSize({ width: 35, height: 35 },)
                  .backgroundImagePosition(Alignment.Top)
                  .margin({ left: "0%", bottom: "0%" })

                Text("应用分身")
                  .textAlign(TextAlign.Center)
                  .width("45%")
                  .height("90%")
                  .fontColor(Color.White)
                  .fontSize(11)
                  .padding({ top: 35 })
                  .backgroundColor("#574646")
                  .borderRadius(15)
                  .backgroundImage($r("app.media.S_2_24"))
                  .backgroundImageSize({ width: 35, height: 35 },)
                  .backgroundImagePosition(Alignment.Top)
                  .margin({ left: "10%", bottom: "0%" })
              }.width("100%").height("35%")
            }.width("47%").margin({left:"6%"}).backgroundColor("#574646").borderRadius(10)
          }.width("90%").height("30%").margin({top:"5%"})
          Row(){
             Column(){
               Row() {
                 Text("    手机优化")
                   .width("100%")
                   .height("30%")
                   .fontSize(15)
                   .fontColor(Color.White)

               }
                  Row() {
                    Text("电池管理")
                      .textAlign(TextAlign.Center)
                      .width("45%")
                      .height("90%")
                      .fontColor(Color.White)
                      .fontSize(11)
                      .padding({ top: 35 })
                      .backgroundColor("#574646")
                      .borderRadius(15)
                      .backgroundImage($r("app.media.S_3_11"))
                      .backgroundImageSize({ width: 35, height: 35 },)
                      .backgroundImagePosition(Alignment.Top)
                      .margin({ left: "0%", bottom: "0%" })

                    Text("网络测速")
                      .textAlign(TextAlign.Center)
                      .width("45%")
                      .height("90%")
                      .fontColor(Color.White)
                      .fontSize(11)
                      .padding({ top: 35 })
                      .backgroundColor("#574646")
                      .borderRadius(15)
                      .backgroundImage($r("app.media.S_3_12"))
                      .backgroundImageSize({ width: 35, height: 35 },)
                      .backgroundImagePosition(Alignment.Top)
                      .margin({ left: "10%", bottom: "0%" })
                  }.width("100%").height("35%")
                  Row() {
                    Text("网络诊断")
                      .textAlign(TextAlign.Center)
                      .width("45%")
                      .height("90%")
                      .fontColor(Color.White)
                      .fontSize(11)
                      .padding({ top: 35 })
                      .backgroundColor("#574646")
                      .borderRadius(15)
                      .backgroundImage($r("app.media.S_3_21"))
                      .backgroundImageSize({ width: 35, height: 35 },)
                      .backgroundImagePosition(Alignment.Top)
                      .margin({ left: "0%", bottom: "0%" })

                    Text("游戏魔盒")
                      .textAlign(TextAlign.Center)
                      .width("45%")
                      .height("90%")
                      .fontColor(Color.White)
                      .fontSize(11)
                      .padding({ top: 35 })
                      .backgroundColor("#574646")
                      .borderRadius(15)
                      .backgroundImage($r("app.media.S_3_22"))
                      .backgroundImageSize({ width: 35, height: 35 },)
                      .backgroundImagePosition(Alignment.Top)
                      .margin({ left: "10%", bottom: "0%" })
                  }.width("100%").height("35%")
                }.width("47%").backgroundColor("#574646").borderRadius(10)
             Column(){
               Row() {
                 Text("    空间清理")
                   .width("70%")
                   .height("30%")
                   .fontSize(15)
                   .fontColor(Color.White)
                 Button(">")
                   .width("30%")
                   .height("10%")
                   .fontSize(15)
                   .fontColor(Color.White)
                   .backgroundColor("#574646")
                   .onClick(()=>{
                     this.controller3.open()
                   })
               }
                  Row() {
                    Text("垃圾清理")
                      .textAlign(TextAlign.Center)
                      .width("45%")
                      .height("90%")
                      .fontColor(Color.White)
                      .fontSize(11)
                      .padding({ top: 35 })
                      .backgroundColor("#574646")
                      .borderRadius(15)
                      .backgroundImage($r("app.media.S_3_13"))
                      .backgroundImageSize({ width: 35, height: 35 },)
                      .backgroundImagePosition(Alignment.Top)
                      .margin({ left: "0%", bottom: "0%" })

                    Text("微信清理")
                      .textAlign(TextAlign.Center)
                      .width("45%")
                      .height("90%")
                      .fontColor(Color.White)
                      .fontSize(11)
                      .padding({ top: 35 })
                      .backgroundColor("#574646")
                      .borderRadius(15)
                      .backgroundImage($r("app.media.S_3_14"))
                      .backgroundImageSize({ width: 35, height: 35 },)
                      .backgroundImagePosition(Alignment.Top)
                      .margin({ left: "10%", bottom: "0%" })
                  }.width("100%").height("35%")
                  Row() {
                    Text("QQ清理")
                      .textAlign(TextAlign.Center)
                      .width("45%")
                      .height("90%")
                      .fontColor(Color.White)
                      .fontSize(11)
                      .padding({ top: 35 })
                      .backgroundColor("#574646")
                      .borderRadius(15)
                      .backgroundImage($r("app.media.S_3_23"))
                      .backgroundImageSize({ width: 35, height: 35 },)
                      .backgroundImagePosition(Alignment.Top)
                      .margin({ left: "0%", bottom: "0%" })

                    Text("图片清理")
                      .textAlign(TextAlign.Center)
                      .width("45%")
                      .height("90%")
                      .fontColor(Color.White)
                      .fontSize(11)
                      .padding({ top: 35 })
                      .backgroundColor("#574646")
                      .borderRadius(15)
                      .backgroundImage($r("app.media.S_3_24"))
                      .backgroundImageSize({ width: 35, height: 35 },)
                      .backgroundImagePosition(Alignment.Top)
                      .margin({ left: "10%", bottom: "0%" })
                  }.width("100%").height("35%")
                }.width("47%").margin({left:"6%"}).backgroundColor("#574646").borderRadius(10)
              }.width("90%").height("30%").margin({top:"5%"})
          Row(){
              Column(){
                Row() {
                  Text("    辅助功能")
                    .width("70%")
                    .height("30%")
                    .fontSize(15)
                    .fontColor(Color.White)
                  Button(">")
                    .width("30%")
                    .height("10%")
                    .fontSize(15)
                    .fontColor(Color.White)
                    .backgroundColor("#574646")
                    .onClick(()=>{
                      this.controller4.open()
                    })
                }
                  Row() {
                    Text("图片备份")
                      .textAlign(TextAlign.Center)
                      .width("45%")
                      .height("90%")
                      .fontColor(Color.White)
                      .fontSize(11)
                      .padding({ top: 35 })
                      .backgroundColor("#574646")
                      .borderRadius(15)
                      .backgroundImage($r("app.media.S_4_11"))
                      .backgroundImageSize({ width: 35, height: 35 },)
                      .backgroundImagePosition(Alignment.Top)
                      .margin({ left: "0%", bottom: "0%" })

                    Text("数据备份")
                      .textAlign(TextAlign.Center)
                      .width("45%")
                      .height("90%")
                      .fontColor(Color.White)
                      .fontSize(11)
                      .padding({ top: 35 })
                      .backgroundColor("#574646")
                      .borderRadius(15)
                      .backgroundImage($r("app.media.S_4_12"))
                      .backgroundImageSize({ width: 35, height: 35 },)
                      .backgroundImagePosition(Alignment.Top)
                      .margin({ left: "10%", bottom: "0%" })
                  }.width("100%").height("35%")
                  Row() {
                    Text("红包助手")
                      .textAlign(TextAlign.Center)
                      .width("45%")
                      .height("90%")
                      .fontColor(Color.White)
                      .fontSize(11)
                      .padding({ top: 35 })
                      .backgroundColor("#574646")
                      .borderRadius(15)
                      .backgroundImage($r("app.media.S_4_21"))
                      .backgroundImageSize({ width: 35, height: 35 },)
                      .backgroundImagePosition(Alignment.Top)
                      .margin({ left: "0%", bottom: "0%" })

                    Text("通话录音")
                      .textAlign(TextAlign.Center)
                      .width("45%")
                      .height("90%")
                      .fontColor(Color.White)
                      .fontSize(11)
                      .padding({ top: 35 })
                      .backgroundColor("#574646")
                      .borderRadius(15)
                      .backgroundImage($r("app.media.S_4_22"))
                      .backgroundImageSize({ width: 35, height: 35 },)
                      .backgroundImagePosition(Alignment.Top)
                      .margin({ left: "10%", bottom: "0%" })
                  }.width("100%").height("35%")
                }.width("47%").backgroundColor("#574646").borderRadius(10)
              Column(){
                Row() {
                  Text("    生活服务")
                    .width("100%")
                    .height("30%")
                    .fontSize(15)
                    .fontColor(Color.White)

                }
                  Row() {
                    Text("话费充值")
                      .textAlign(TextAlign.Center)
                      .width("45%")
                      .height("90%")
                      .fontColor(Color.White)
                      .fontSize(11)
                      .padding({ top: 35 })
                      .backgroundColor("#574646")
                      .borderRadius(15)
                      .backgroundImage($r("app.media.S_4_13"))
                      .backgroundImageSize({ width: 35, height: 35 },)
                      .backgroundImagePosition(Alignment.Top)
                      .margin({ left: "0%", bottom: "0%" })

                    Text("流量充值")
                      .textAlign(TextAlign.Center)
                      .width("45%")
                      .height("90%")
                      .fontColor(Color.White)
                      .fontSize(11)
                      .padding({ top: 35 })
                      .backgroundColor("#574646")
                      .borderRadius(15)
                      .backgroundImage($r("app.media.S_4_14"))
                      .backgroundImageSize({ width: 35, height: 35 },)
                      .backgroundImagePosition(Alignment.Top)
                      .margin({ left: "10%", bottom: "0%" })
                  }.width("100%").height("35%")
                  Row() {
                    Text("5G特惠包")
                      .textAlign(TextAlign.Center)
                      .width("45%")
                      .height("90%")
                      .fontColor(Color.White)
                      .fontSize(11)
                      .padding({ top: 35 })
                      .backgroundColor("#574646")
                      .borderRadius(15)
                      .backgroundImage($r("app.media.S_4_23"))
                      .backgroundImageSize({ width: 35, height: 35 },)
                      .backgroundImagePosition(Alignment.Top)
                      .margin({ left: "0%", bottom: "0%" })

                    Text("V粉卡")
                      .textAlign(TextAlign.Center)
                      .width("45%")
                      .height("90%")
                      .fontColor(Color.White)
                      .fontSize(11)
                      .padding({ top: 35 })
                      .backgroundColor("#574646")
                      .borderRadius(15)
                      .backgroundImage($r("app.media.S_4_24"))
                      .backgroundImageSize({ width: 35, height: 35 },)
                      .backgroundImagePosition(Alignment.Top)
                      .margin({ left: "10%", bottom: "0%" })
                  }.width("100%").height("35%")
                }.width("47%").margin({left:"6%"}).backgroundColor("#574646").borderRadius(10)
              }.width("90%").height("30%").margin({top:"5%"})
          }.width("100%")
          }
          .scrollable(ScrollDirection.Vertical)//滚动方向：垂直
          .scrollBarColor(Color.Blue)//滚动条颜色
          .scrollBarWidth(0)//滚动条大小
          .height("91%")//滚动区域高度
        }.backgroundColor(Color.Black)
        .width("100%")
        .height("100%")


      }.tabBar(this.TabBuilder("实用工具",1,$r("app.media.E21"),$r("app.media.E22")))

    }.vertical(false)  //设置侧边导航  +{‘barPosition:BarPosition.End}可变成右侧
    .scrollable(false)    //整体是否可滑动
    .barMode(BarMode.Fixed) //导航栏是否可以滚动，默认值为Fixed
    .barHeight("10%") //导航栏高度
    .barBackgroundColor("#352f2f")//导航栏背景颜色
    .onChange((index)=>{ //index：菜单的编号参数
      this.currentIndex=index
    })
  }
}

@CustomDialog
struct CustomDialogText {  //自定义弹窗内容
  controller: CustomDialogController = new CustomDialogController({ builder: CustomDialogText() })

  build() {
    Column({ space: 20 }) {  //20为子组件间距
      Row() {
        Text("防骗中心")
          .textAlign(TextAlign.Center)
          .width("23%")
          .height("10%")
          .fontColor(Color.White)
          .fontSize(11)
          .padding({ top: 35 })
          .backgroundColor("#574646")
          .borderRadius(15)
          .backgroundImage($r("app.media.S_2_11"))
          .backgroundImageSize({ width: 35, height: 35 },)
          .backgroundImagePosition(Alignment.Top)
          .margin({ left: "0%", bottom: "0%" })

        Text("紧急呼叫")
          .textAlign(TextAlign.Center)
          .width("23%")
          .height("10%")
          .fontColor(Color.White)
          .fontSize(11)
          .padding({ top: 35 })
          .backgroundColor("#574646")
          .borderRadius(15)
          .backgroundImage($r("app.media.S_2_12"))
          .backgroundImageSize({ width: 35, height: 35 },)
          .backgroundImagePosition(Alignment.Top)
          .margin({ left: "3%", bottom: "0%" })
        Text("查找")
          .textAlign(TextAlign.Center)
          .width("23%")
          .height("10%")
          .fontColor(Color.White)
          .fontSize(11)
          .padding({ top: 35 })
          .backgroundColor("#574646")
          .borderRadius(15)
          .backgroundImage($r("app.media.S_2_21"))
          .backgroundImageSize({ width: 35, height: 35 },)
          .backgroundImagePosition(Alignment.Top)
          .margin({ left: "3%", bottom: "0%" })

        Text("支付宝险箱")
          .textAlign(TextAlign.Center)
          .width("23%")
          .height("10%")
          .fontColor(Color.White)
          .fontSize(11)
          .padding({ top: 35 })
          .backgroundColor("#574646")
          .borderRadius(15)
          .backgroundImage($r("app.media.S_2_22"))
          .backgroundImageSize({ width: 35, height: 35 },)
          .backgroundImagePosition(Alignment.Top)
          .margin({ left: "3%", bottom: "0%" })
      }
      Row(){
        Text("密码保险箱")
          .textAlign(TextAlign.Center)
          .width("23%")
          .height("10%")
          .fontColor(Color.White)
          .fontSize(11)
          .padding({ top: 35 })
          .backgroundColor("#574646")
          .borderRadius(15)
          .backgroundImage($r("app.media.S_4_22"))
          .backgroundImageSize({ width: 35, height: 35 },)
          .backgroundImagePosition(Alignment.Top)
          .margin({ right: "80%", bottom: "0%" })
      }
    }
    .margin(20)
    .onClick(() => {
      this.controller.close()  //任意点击关闭
    })
  }
}
@CustomDialog
struct CustomDialogText1 {
  controller: CustomDialogController = new CustomDialogController({ builder: CustomDialogText() })

  build() {
    Column({ space: 20 }) {
      Row() {
        Text("后台弹窗管控")
          .textAlign(TextAlign.Center)
          .width("23%")
          .height("10%")
          .fontColor(Color.White)
          .fontSize(11)
          .padding({ top: 35 })
          .backgroundColor("#574646")
          .borderRadius(15)
          .backgroundImage($r("app.media.S_2_13"))
          .backgroundImageSize({ width: 35, height: 35 },)
          .backgroundImagePosition(Alignment.Top)
          .margin({ left: "0%", bottom: "0%" })

        Text("应用加密")
          .textAlign(TextAlign.Center)
          .width("23%")
          .height("10%")
          .fontColor(Color.White)
          .fontSize(11)
          .padding({ top: 35 })
          .backgroundColor("#574646")
          .borderRadius(15)
          .backgroundImage($r("app.media.S_2_14"))
          .backgroundImageSize({ width: 35, height: 35 },)
          .backgroundImagePosition(Alignment.Top)
          .margin({ left: "3%", bottom: "0%" })
        Text("文件保密柜")
          .textAlign(TextAlign.Center)
          .width("23%")
          .height("10%")
          .fontColor(Color.White)
          .fontSize(11)
          .padding({ top: 35 })
          .backgroundColor("#574646")
          .borderRadius(15)
          .backgroundImage($r("app.media.S_2_23"))
          .backgroundImageSize({ width: 35, height: 35 },)
          .backgroundImagePosition(Alignment.Top)
          .margin({ left: "3%", bottom: "0%" })

        Text("应用分身")
          .textAlign(TextAlign.Center)
          .width("23%")
          .height("10%")
          .fontColor(Color.White)
          .fontSize(11)
          .padding({ top: 35 })
          .backgroundColor("#574646")
          .borderRadius(15)
          .backgroundImage($r("app.media.S_2_24"))
          .backgroundImageSize({ width: 35, height: 35 },)
          .backgroundImagePosition(Alignment.Top)
          .margin({ left: "3%", bottom: "0%" })
      }
      Row(){
        Text("摄像头检测")
          .textAlign(TextAlign.Center)
          .width("23%")
          .height("10%")
          .fontColor(Color.White)
          .fontSize(11)
          .padding({ top: 35 })
          .backgroundColor("#574646")
          .borderRadius(15)
          .backgroundImage($r("app.media.S_2_12"))
          .backgroundImageSize({ width: 35, height: 35 },)
          .backgroundImagePosition(Alignment.Top)
          .margin({ right: "80%", bottom: "0%" })
      }
    }
    .margin(20)
    .onClick(() => {
      this.controller.close()
    })
  }
}
@CustomDialog
struct CustomDialogText2 {
  controller: CustomDialogController = new CustomDialogController({ builder: CustomDialogText() })

  build() {
    Column({ space: 20 }) {
      Row() {
        Text("垃圾清理")
          .textAlign(TextAlign.Center)
          .width("23%")
          .height("10%")
          .fontColor(Color.White)
          .fontSize(11)
          .padding({ top: 35 })
          .backgroundColor("#574646")
          .borderRadius(15)
          .backgroundImage($r("app.media.S_3_13"))
          .backgroundImageSize({ width: 35, height: 35 },)
          .backgroundImagePosition(Alignment.Top)
          .margin({ left: "0%", bottom: "0%" })

        Text("微信清理")
          .textAlign(TextAlign.Center)
          .width("23%")
          .height("10%")
          .fontColor(Color.White)
          .fontSize(11)
          .padding({ top: 35 })
          .backgroundColor("#574646")
          .borderRadius(15)
          .backgroundImage($r("app.media.S_3_14"))
          .backgroundImageSize({ width: 35, height: 35 },)
          .backgroundImagePosition(Alignment.Top)
          .margin({ left: "3%", bottom: "0%" })
        Text("QQ清理")
          .textAlign(TextAlign.Center)
          .width("23%")
          .height("10%")
          .fontColor(Color.White)
          .fontSize(11)
          .padding({ top: 35 })
          .backgroundColor("#574646")
          .borderRadius(15)
          .backgroundImage($r("app.media.S_3_23"))
          .backgroundImageSize({ width: 35, height: 35 },)
          .backgroundImagePosition(Alignment.Top)
          .margin({ left: "3%", bottom: "0%" })

        Text("图片清理")
          .textAlign(TextAlign.Center)
          .width("23%")
          .height("10%")
          .fontColor(Color.White)
          .fontSize(11)
          .padding({ top: 35 })
          .backgroundColor("#574646")
          .borderRadius(15)
          .backgroundImage($r("app.media.S_3_24"))
          .backgroundImageSize({ width: 35, height: 35 },)
          .backgroundImagePosition(Alignment.Top)
          .margin({ left: "3%", bottom: "0%" })
      }
      Row() {
        Text("视频清理")
          .textAlign(TextAlign.Center)
          .width("23%")
          .height("10%")
          .fontColor(Color.White)
          .fontSize(11)
          .padding({ top: 35 })
          .backgroundColor("#574646")
          .borderRadius(15)
          .backgroundImage($r("app.media.S_3_11"))
          .backgroundImageSize({ width: 35, height: 35 },)
          .backgroundImagePosition(Alignment.Top)
          .margin({ left: "0%", bottom: "0%" })

        Text("音频清理")
          .textAlign(TextAlign.Center)
          .width("23%")
          .height("10%")
          .fontColor(Color.White)
          .fontSize(11)
          .padding({ top: 35 })
          .backgroundColor("#574646")
          .borderRadius(15)
          .backgroundImage($r("app.media.S_3_12"))
          .backgroundImageSize({ width: 35, height: 35 },)
          .backgroundImagePosition(Alignment.Top)
          .margin({ left: "3%", bottom: "0%" })
        Text("重复文件")
          .textAlign(TextAlign.Center)
          .width("23%")
          .height("10%")
          .fontColor(Color.White)
          .fontSize(11)
          .padding({ top: 35 })
          .backgroundColor("#574646")
          .borderRadius(15)
          .backgroundImage($r("app.media.S_3_21"))
          .backgroundImageSize({ width: 35, height: 35 },)
          .backgroundImagePosition(Alignment.Top)
          .margin({ left: "3%", bottom: "0%",right:"26%" })

      }
    }
    .margin(20)
    .onClick(() => {
      this.controller.close()
    })
  }
}
@CustomDialog
struct CustomDialogText3 {
  controller: CustomDialogController = new CustomDialogController({ builder: CustomDialogText() })

  build() {
    Column({ space: 20 }) {
      Row() {
        Text("照片备份")
          .textAlign(TextAlign.Center)
          .width("23%")
          .height("10%")
          .fontColor(Color.White)
          .fontSize(11)
          .padding({ top: 35 })
          .backgroundColor("#574646")
          .borderRadius(15)
          .backgroundImage($r("app.media.S_4_11"))
          .backgroundImageSize({ width: 35, height: 35 },)
          .backgroundImagePosition(Alignment.Top)
          .margin({ left: "0%", bottom: "0%" })

        Text("数据备份")
          .textAlign(TextAlign.Center)
          .width("23%")
          .height("10%")
          .fontColor(Color.White)
          .fontSize(11)
          .padding({ top: 35 })
          .backgroundColor("#574646")
          .borderRadius(15)
          .backgroundImage($r("app.media.S_4_12"))
          .backgroundImageSize({ width: 35, height: 35 },)
          .backgroundImagePosition(Alignment.Top)
          .margin({ left: "3%", bottom: "0%" })
        Text("红包助手")
          .textAlign(TextAlign.Center)
          .width("23%")
          .height("10%")
          .fontColor(Color.White)
          .fontSize(11)
          .padding({ top: 35 })
          .backgroundColor("#574646")
          .borderRadius(15)
          .backgroundImage($r("app.media.S_4_21"))
          .backgroundImageSize({ width: 35, height: 35 },)
          .backgroundImagePosition(Alignment.Top)
          .margin({ left: "3%", bottom: "0%" })

        Text("通话录音")
          .textAlign(TextAlign.Center)
          .width("23%")
          .height("10%")
          .fontColor(Color.White)
          .fontSize(11)
          .padding({ top: 35 })
          .backgroundColor("#574646")
          .borderRadius(15)
          .backgroundImage($r("app.media.S_4_22"))
          .backgroundImageSize({ width: 35, height: 35 },)
          .backgroundImagePosition(Alignment.Top)
          .margin({ left: "3%", bottom: "0%" })
      }
      Row(){
        Text("电话秘书")
          .textAlign(TextAlign.Center)
          .width("23%")
          .height("10%")
          .fontColor(Color.White)
          .fontSize(11)
          .padding({ top: 35 })
          .backgroundColor("#574646")
          .borderRadius(15)
          .backgroundImage($r("app.media.S_4_24"))
          .backgroundImageSize({ width: 35, height: 35 },)
          .backgroundImagePosition(Alignment.Top)
          .margin({ right: "0%", bottom: "0%" })
        Text("儿童秘书")
          .textAlign(TextAlign.Center)
          .width("23%")
          .height("10%")
          .fontColor(Color.White)
          .fontSize(11)
          .padding({ top: 35 })
          .backgroundColor("#574646")
          .borderRadius(15)
          .backgroundImage($r("app.media.S_4_23"))
          .backgroundImageSize({ width: 35, height: 35 },)
          .backgroundImagePosition(Alignment.Top)
          .margin({ right: "54%", bottom: "0%",left:"3%" })
      }
    }
    .margin(20)
    .onClick(() => {
      this.controller.close()
    })
  }
}

图3-3：

文件名：set1.ets

import { router } from '@kit.ArkUI'

@Entry//装饰器，页面的入口组件
@Component //装饰器，自定义组件
struct sett{//关键字 struct   sett 自定义组件的组件名
  build(){//结构体，也叫函数
    Column() {//线性布局管理器
      Column() {
        Row() {

          Button("<")//按钮
            .width("10%")//宽高
            .height("80%")
            .fontSize(40)//字体大小
            .fontColor(Color.White)//字体颜色
            .backgroundColor(Color.Black)//背景颜色
            .padding("")//内间距
            .onClick(()=>{//点击执行相应事件
              router.back()//返回上一个页面（仅当其他页面跳转到此页面有效）
            })
          Text("  设置")
            .width("95%")
            .height("100%")
            .fontSize(20)
            .fontColor(Color.White)

        }.width("100%").height("10%")

        Row() {
          Column() {
            Row() {
              Text("空间清理")
                .width("95%")
                .height("20%")
                .fontSize(20)
                .fontColor(Color.White)
                .margin({ top: "0%" })//外间距
              Text(">")
                .width("5%")
                .height("20%")
                .fontSize(30)
                .fontColor(Color.Gray)
                .margin({ top: "0%" })
            }

            Row() {
              Text("安全检测")
                .width("95%")
                .height("20%")
                .fontSize(20)
                .fontColor(Color.White)
              Text(">")
                .width("5%")
                .height("20%")
                .fontSize(30)
                .fontColor(Color.Gray)

            }

            Row() {
              Text("流量管理")
                .width("95%")
                .height("20%")
                .fontSize(20)
                .fontColor(Color.White)
                .margin({ bottom: "5%" })
              Text(">")
                .width("5%")
                .height("20%")
                .fontSize(30)
                .fontColor(Color.Gray)
                .margin({ bottom: "5%" })
            }
          }
        }.width("100%").height("27%")

        Text("").width("100%")
          .borderWidth(1)//边框大小
          .borderColor(Color.Gray)//边框颜色
        Row() {
          Column() {
            Row() {
              Text("安全能力")
                .width("95%")
                .height("25%")
                .fontSize(20)
                .fontColor(Color.White)
                .margin({ top: "10%" })
              Text(">")
                .width("5%")
                .height("25%")
                .fontSize(30)
                .fontColor(Color.Gray)
                .margin({ top: "10%" })
            }

            Row() {
              Text("防护记录")
                .width("95%")
                .height("25%")
                .fontSize(20)
                .fontColor(Color.White)
                .margin({ bottom: "20%" })
              Text(">")
                .width("5%")
                .height("25%")
                .fontSize(30)
                .fontColor(Color.Gray)
                .margin({ bottom: "20%" })
            }
          }
        }.width("100%").height("20%")

        Text("").width("100%").borderWidth(1).borderColor(Color.Gray)
        Row() {
          Column() {
            Row() {
              Text("功能介绍")
                .width("95%")
                .height("25%")
                .fontSize(20)
                .fontColor(Color.White)
                .margin({ top: "10%" })
              Text(">")
                .width("5%")
                .height("25%")
                .fontSize(30)
                .fontColor(Color.Gray)
                .margin({ top: "10%" })
            }

            Row() {
              Text("帮助和反馈")
                .width("95%")
                .height("25%")
                .fontSize(20)
                .fontColor(Color.White)
                .margin({ bottom: "20%" })
              Text(">")
                .width("5%")
                .height("25%")
                .fontSize(30)
                .fontColor(Color.Gray)
                .margin({ bottom: "20%" })
            }
          }
        }.width("100%").height("20%")

        Text("").width("100%").borderWidth(1).borderColor(Color.Gray)
        Row() {
          Column() {
            Row() {
              Text("检查更新")
                .width("95%")
                .height("25%")
                .fontSize(20)
                .fontColor(Color.White)
                .margin({ top: "10%" })
              Text(">")
                .width("5%")
                .height("25%")
                .fontSize(30)
                .fontColor(Color.Gray)
                .margin({ top: "10%" })
            }

            Row() {
              Text("关于")
                .width("95%")
                .height("25%")
                .fontSize(20)
                .fontColor(Color.White)
                .margin({ bottom: "20%" })
              Text(">")
                .width("5%")
                .height("25%")
                .fontSize(30)
                .fontColor(Color.Gray)
                .margin({ bottom: "20%" })
            }
          }
        }.width("100%").height("23%")
      }.width("90%").height("100%")
      .backgroundColor(Color.Black)
      .margin({ left: "2%" })
    }.width("100%").height("100%")
    .backgroundColor(Color.Black)
  }

}

图3-4：

文件名：yinsibaohu.ets

import { router } from '@kit.ArkUI'

@Entry//装饰器，页面的组件入口
@Component//装饰器，自定义组件
struct sett {//关键字 struct  sett 自定义组件的组件名
  scrmy:Scroller=new Scroller() //注册滚动控制器
  build() {//函数，也叫结构体
    Column() {//线性布局管理器
      Column() {
        Row() {

          Button("<")//按钮
            .width("10%")//宽高
            .height("80%")
            .fontSize(40)//字体大小
            .fontColor(Color.White)//字条颜色
            .backgroundColor(Color.Black)//背景颜色
            .padding("")//内间距
            .onClick(() => {//点击执行相应事件
              router.back()//返回（当且仅当其它页面跳转到此页面有效）
            })
          Text("隐私保护")
            .width("95%")
            .height("100%")
            .fontSize(20)
            .fontColor(Color.White)

        }.width("100%").height("10%")
        Scroll(this.scrmy) { //滚动
          Column(){
        Row() {
          Column() {
            Image($r("app.media.E_1_1")) //加载图片
              .width("50%")
              .height("30%")
              .margin({left:"0%"}) //外间距
            Row(){
              Text("全部信息应用记录")
                .width("45%")
                .height("20%")
                .fontSize(20)
                .fontColor(Color.White)
                .margin({ top: "0%" })
                .textAlign(TextAlign.Center) //文本对齐方式
                .backgroundColor("#574646")
                .padding(10)
                .borderRadius(15)//边框弧度
              Text("敏感权限提示")
                .width("45%")
                .height("20%")
                .fontSize(20)
                .fontColor(Color.White)
                .margin({ left: "10%" })
                .textAlign(TextAlign.Center)
                .backgroundColor("#574646")
                .borderRadius(15)
            }
            Row() {
              Text("敏感信息保护")
                .width("95%")
                .height("15%")
                .fontSize(20)
                .fontColor(Color.White)
                .margin({ top: "0%" })
              Text(">")
                .width("5%")
                .height("15%")
                .fontSize(30)
                .fontColor(Color.Gray)
                .margin({ top: "0%" })
            }

            Row() {
              Text("位置信息保护")
                .width("95%")
                .height("15%")
                .fontSize(20)
                .fontColor(Color.White)
              Text(">")
                .width("5%")
                .height("15%")
                .fontSize(30)
                .fontColor(Color.Gray)

            }
            Row() {
              Text("身份信息保护")
                .width("95%")
                .height("15%")
                .fontSize(20)
                .fontColor(Color.White)
                .margin({ top: "0%" })
              Text(">")
                .width("5%")
                .height("15%")
                .fontSize(30)
                .fontColor(Color.Gray)
                .margin({ top: "0%" })
            }

          }
        }.width("100%").height("60%")

        Text("").width("100%").borderWidth(1).borderColor(Color.Gray)
        Row() {
          Column() {
            Row() {
              Text("锁屏通知")
                .width("95%")
                .height("30%")
                .fontSize(20)
                .fontColor(Color.White)
                .margin({ top: "15%" })
              Text(">")
                .width("5%")
                .height("30%")
                .fontSize(30)
                .fontColor(Color.Gray)
                .margin({ top: "15%" })
            }

            Row() {
              Text("屏幕固定")
                .width("95%")
                .height("30%")
                .fontSize(20)
                .fontColor(Color.White)
                .margin({ bottom: "20%" })
              Text(">")
                .width("5%")
                .height("30%")
                .fontSize(30)
                .fontColor(Color.Gray)
                .margin({ bottom: "20%" })
            }
          }
        }.width("100%").height("30%")

        Text("").width("100%").borderWidth(1).borderColor(Color.Gray)
        Row() {
          Column() {
            Text("隐私工具")
              .width("95%")
              .height("10%")
              .fontSize(15)
              .fontColor(Color.Gray)
              .padding({ top: "0%" })
              .margin({ top: "5%" })
            Row() {

              Text("权限管理")
                .width("30%")
                .height("40%")
                .fontSize(20)
                .fontColor(Color.White)
                .textAlign(TextAlign.Center)
                .backgroundImage($r("app.media.E_1_11"))
                .backgroundImageSize({width:40,height:40})
                .backgroundImagePosition(Alignment.Top)

              Text("保密柜")
                .width("30%")
                .height("40%")
                .fontSize(20)
                .fontColor(Color.White)
                .margin({ left: "5%" })
                .textAlign(TextAlign.Center)
                .backgroundImage($r("app.media.E_1_12"))
                .backgroundImageSize({width:40,height:40})
                .backgroundImagePosition(Alignment.Top)
              Text("应用加密")
                .width("30%")
                .height("40%")
                .fontSize(20)
                .fontColor(Color.White)
                .margin({ left: "5%" })
                .textAlign(TextAlign.Center)
                .backgroundImage($r("app.media.E_1_13"))
                .backgroundImageSize({width:40,height:40})
                .backgroundImagePosition(Alignment.Top)
            }.margin({top:"5%"})
            Row() {

              Text("手机分身")
                .width("30%")
                .height("40%")
                .fontSize(20)
                .fontColor(Color.White)
                .textAlign(TextAlign.Center)
                .backgroundImage($r("app.media.E_1_21"))
                .backgroundImageSize({width:40,height:40})
                .backgroundImagePosition(Alignment.Top)

              Text("应用分身")
                .width("30%")
                .height("40%")
                .fontSize(20)
                .fontColor(Color.White)
                .margin({ left: "5%" })
                .textAlign(TextAlign.Center)
                .backgroundImage($r("app.media.E_1_22"))
                .backgroundImageSize({width:40,height:40})
                .backgroundImagePosition(Alignment.Top)
              Text("摄像头检测")
                .width("30%")
                .height("40%")
                .fontSize(20)
                .fontColor(Color.White)
                .margin({ left: "5%" })
                .textAlign(TextAlign.Center)
                .backgroundImage($r("app.media.E_1_23"))
                .backgroundImageSize({width:40,height:40})
                .backgroundImagePosition(Alignment.Top)
            }

          }
        }.width("100%").height("40%")
          }
        }.scrollable(ScrollDirection.Vertical) //滚动方向
        .scrollBarColor(Color.Blue)//滚动条颜色
        .scrollBarWidth(0)//滚动条大小
        .height("91%")
      }.width("90%").height("100%")
      .backgroundColor(Color.Black)
      .margin({ left: "2%" })
    }.width("100%").height("100%")
    .backgroundColor(Color.Black)
  }
}

图3-5：

文件名：jinjihujiao.ets

import { router } from '@kit.ArkUI'

@Entry //装饰器，页面的入口组件
@Component  // 装饰器，自定义组件
struct sett { //关键字 struct  sett 自定义组件的组件名

  build() { //结构体，也叫函数
    Column() { //线性布局管理器
      Column() {
        Row() {

          Button("<")//按钮
            .width("10%")//宽，高
            .height("80%")
            .fontSize(40)//字体大小
            .fontColor(Color.White)//字体颜色
            .backgroundColor(Color.Black)//背景颜色
            .padding("")//内间距
            .onClick(() => {//点击执行相应动作
              router.back()//返回（仅当从其他页面跳转到此页面有效）
            })
          Text("紧急呼叫")
            .width("95%")
            .height("100%")
            .fontSize(20)
            .fontColor(Color.White)

            .padding({left:"30%"})
        }.width("100%").height("10%")

          Row() {
            Column() {
              Image($r("app.media.T_1_1")) //加载图片
                .width("60%")
                .height("50%")
                .margin({ left: "5%" })
              Row() {
                Text("紧急呼叫")
                  .width("95%")
                  .height("20%")
                  .fontSize(20)
                  .fontColor(Color.White)
                  .margin({ top: "0%" })
                Text(">")
                  .width("5%")
                  .height("20%")
                  .fontSize(30)
                  .fontColor(Color.Gray)
                  .margin({ top: "0%" })
              }

              Row() {
                Text("紧急联系号码")
                  .width("95%")
                  .height("20%")
                  .fontSize(20)
                  .fontColor(Color.White)
                Text(">")
                  .width("5%")
                  .height("20%")
                  .fontSize(30)
                  .fontColor(Color.Gray)

              }

            }
          }.width("100%").height("45%")

          Text("").width("100%").borderWidth(1).borderColor(Color.Gray)
          Row() {
            Column() {
              Text("辅助功能")
                .width("95%")
                .height("10%")
                .fontSize(15)
                .fontColor(Color.Gray)
                .padding({ top: "5%" })
                .margin({ top: "9%" })
              Row() {
                Text("报警辅助")
                  .width("95%")
                  .height("25%")
                  .fontSize(20)
                  .fontColor(Color.White)
                  .margin({ top: "10%" })
                Text(">")
                  .width("5%")
                  .height("25%")
                  .fontSize(30)
                  .fontColor(Color.Gray)
                  .margin({ top: "10%" })
              }

              Row() {
                Text("医疗急救卡")
                  .width("95%")
                  .height("25%")
                  .fontSize(20)
                  .fontColor(Color.White)
                  .margin({ bottom: "20%" })
                Text(">")
                  .width("5%")
                  .height("25%")
                  .fontSize(30)
                  .fontColor(Color.Gray)
                  .margin({ bottom: "20%" })
              }
            }
          }.width("100%").height("30%")

          Text("").width("100%").borderWidth(1).borderColor(Color.Gray)
          Row() {
            Column() {
              Row() {
                Text("服务条款")
                  .width("95%")
                  .height("50%")
                  .fontSize(20)
                  .fontColor(Color.White)
                  .margin({ top: "0%" })
                Text(">")
                  .width("5%")
                  .height("50%")
                  .fontSize(30)
                  .fontColor(Color.Gray)
                  .margin({ top: "0%" })
              }

            }
          }.width("100%").height("15%")

      }.width("90%").height("100%")
      .backgroundColor(Color.Black)
      .margin({ left: "2%" })
    }.width("100%").height("100%")
    .backgroundColor(Color.Black)
  }
}

图3-6：

文件名：fangzhazhongxin.ets

import { router } from '@kit.ArkUI'

@Entry //装饰器，页面的入口组件
@Component //装饰器，自定义组件
struct sett { //struct 关键字 组件 sett 自定义组件的组件名
  scrmy:Scroller=new Scroller()  //注册滚动控制器
  build() {
    Column() {
      Column() {
        Row() {

          Button("<")  //按钮
            .width("10%") //宽高
            .height("80%")
            .fontSize(40) //字体大小
            .fontColor(Color.White) //字体颜色
            .backgroundColor(Color.Black) //背景颜色
            .padding("")  //内间距
            .onClick(() => { //点击做出相应动作
              router.back()  //跳回（只有当从其他页面跳到此页面有效）
            })
          Text("防诈中心")
            .width("95%")
            .height("100%")
            .fontSize(20)
            .fontColor(Color.White)

        }.width("100%").height("10%")
        Scroll(this.scrmy) { //滚动
          Column(){
            Row() {
              Column() {
                Image($r("app.media.A1"))  //加载图片
                  .width("70%")     //图片宽高
                  .height("55%")
                  .margin({left:"0%",bottom:"2%"}) //外间距
                Row(){
                  Text("诈骗鉴定")
                    .width("45%")
                    .height("15%")
                    .fontSize(20)
                    .fontColor(Color.White)
                    .margin({ top: "0%" })
                    .textAlign(TextAlign.Center)  //文本对齐方式
                    .backgroundColor("#574646")
                    .padding(10)
                    .borderRadius(15)
                  Text("我要举报")
                    .width("45%")
                    .height("15%")
                    .fontSize(20)
                    .fontColor(Color.White)
                    .margin({ left: "0%" })
                    .textAlign(TextAlign.Center)
                    .backgroundColor("#574646")
                    .borderRadius(15)
                }
                Row() {
                  Text("敏感信息保护")
                    .width("95%")
                    .height("15%")
                    .fontSize(20)
                    .fontColor(Color.White)
                    .margin({ top: "5%" })
                  Text("")
                    .width("5%")
                    .height("15%")
                    .fontSize(30)
                    .fontColor(Color.Gray)
                    .margin({ top: "5%" })
                }



              }
            }.width("100%").height("60%")

            Text("").width("100%").borderWidth(1).borderColor(Color.Gray) //相当于画线
            Row() {
              Column() {
                Row() {
                  Text("拦截的电话")
                    .width("95%")
                    .height("30%")
                    .fontSize(20)
                    .fontColor(Color.White)
                    .margin({ top: "0%" })
                  Text(">")
                    .width("5%")
                    .height("30%")
                    .fontSize(30)
                    .fontColor(Color.Gray)
                    .margin({ top: "0%" })
                }

              }
            }.width("100%").height("15%")

            Text("").width("100%").borderWidth(1).borderColor(Color.Gray)
            Row() {
              Column() {
                Row() {
                  Text("拦截的信息")
                    .width("80%")
                    .height("30%")
                    .fontSize(20)
                    .fontColor(Color.White)
                    .margin({ top: "5%" })
                  Text("更多")
                    .width("15%")
                    .height("30%")
                    .fontSize(20)
                    .fontColor(Color.Gray)
                    .margin({ top: "5%" })
                  Text(">")
                    .width("5%")
                    .height("30%")
                    .fontSize(30)
                    .fontColor(Color.Gray)
                    .margin({ top: "5%" })
                }

                Row() {
                  Text("16225506965")
                    .width("70%")
                    .height("30%")
                    .fontSize(20)
                    .fontColor(Color.White)
                    .margin({ bottom: "20%" })
                  Text("6月11日")
                    .width("30%")
                    .height("30%")
                    .fontSize(20)
                    .fontColor(Color.Gray)
                    .margin({ bottom: "20%" })
                    .textAlign(TextAlign.End)
                }
                Row() {
                  Text("171190658140")
                    .width("70%")
                    .height("30%")
                    .fontSize(20)
                    .fontColor(Color.White)
                    .margin({ bottom: "20%" })
                  Text("5月20日")
                    .width("30%")
                    .height("30%")
                    .fontSize(20)
                    .fontColor(Color.Gray)
                    .margin({ bottom: "20%" })
                    .textAlign(TextAlign.End)
                }
              }
            }.width("100%").height("30%")
          }
        }.scrollable(ScrollDirection.Vertical) //滚动方向：垂直
        .scrollBarColor(Color.Blue) //滚动条颜色
        .scrollBarWidth(0)  //滚动条宽度
        .height("91%")
      }.width("90%").height("100%")
      .backgroundColor(Color.Black)
      .margin({ left: "2%" })
    }.width("100%").height("100%")
    .backgroundColor(Color.Black)
  }
}

HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

【HarmonyOS 5】App Linking 应用间跳转详解

HarmonyOS开发者社区

HarmonyOS 开发者 “破界闯关” 问答挑战赛启动！多重奖品等你来战，解锁技术进阶新姿势！

你是否在 HarmonyOS 开发中遇到过设备适配难题？是否想深入了解 ArkUI 框架的最新特性？或是对原子化服务的落地应用充满疑问？现在，机会来了！2025年【HarmonyOS 开发者 “破界闯关” 问答挑战赛】正式开启，聚焦技术基础知识、设备开发、应用开发、分布式系统等各个领域，打造 “提问