一、首页：广告页（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(2
最低0.47元/天 解锁文章
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
