男女做暧网站,公司装修深圳,游戏网站有哪些,系统优化包括哪些目录 任务目标任务分析任务实施1.新建工程项目HMLogin2.设计登录页面Index.visual3.设计第二个页面SecondPage4.修改Index.ets代码5.修改SecondPage.ets代码6.运行工程 任务目标
设计一个简单的登录页面#xff0c;要求可以将第一页的登录信息#xff0c;传递到第二个页面要求可以将第一页的登录信息传递到第二个页面界面如图1所示。
图1 鸿蒙登录界面图 任务分析
本任务主要考察鸿蒙应用界面设计及界面间的数据传递。在不熟练的情况下可以使用DevEco Studio的Super Visual功能进行设计设计完成后再修改ArkTS代码。
任务实施
1.新建工程项目HMLogin
如图2所示修改工程名、包名打开Super Visual开关单击Finish。
图2 鸿蒙登录界面配置工程窗口 2.设计登录页面Index.visual
从Components区将两个TextInput一个Button用鼠标拖拽到界面上如图10-33所示。依次选中各个控件修改Properties。其中“账号”TextInput的Placeholder属性修改为“请输入账号”magrinTop修改改为20vp“密码”TextInput的Placeholder属性修改为“请输入密码”magrinTop修改为20vp“登录”Button的Label属性修改为“登录”FontSize修改为32fp。需要注意的是有些属性在Super Visual中无法修改将在ArkTS代码中进行修改。修改完后的界面如图10-34所示单击右上方的转换图标 将其转为ArkTS代码。
图3 Index.visual设计窗口 图4 界面设计完成效果图 3.设计第二个页面SecondPage
右击entry/src/main/ets/pagesNew→Visual→Page。在弹出的窗口中修改Visual name为SecondPage单击Finish如图10-35、图10-36所示。
图5 新建Super Visual界面 图6 配置Visual Page窗口 使用和上一步骤相同的方法添加一个Text和一个Button修改其属性修改后效果如图10-37所示单击转换图标 生成ArkTS代码。
图7 第二个界面效果图 4.修改Index.ets代码
在Index.ets代码中首先添加TextInput输入获取逻辑实现onChange()方法在该方法中存储修改的信息其次添加Button单击事件实现onClick()方法在该方法中使用router.pushUrl()方法跳转到第二个页面同时传递信息代码如下
import router from ohos.router
Entry
Component
struct Index {State message: string 登录State userName: string State password: string build() {Row() {Column() {Text(this.message).fontSize(30).fontWeight(FontWeight.Bold)TextInput({ placeholder:请输入账号 }).width(100%).height(48vp).margin({ left: 50vp,right:50vp,top:30vp,bottom:30vp} ).placeholderColor(#99182431).placeholderFont({ size: 16fp}).fontSize(16fp).padding({ left: 0vp }).border({width: { bottom: 0vp },color: #33000000,radius: 10vp}).onChange((value: string) {this.userName value})TextInput({ placeholder:请输入密码 }).width(100%).height(48vp).margin({ left: 50vp,right:50vp,bottom:30vp} ).placeholderColor(#99182431).placeholderFont({ size: 16fp}).fontSize(16fp).padding({ left: 0vp }).type(InputType.Password).border({color: #33000000,radius: 10vp}).onChange((value: string) {this.password value})// 添加按钮触发跳转Button(登录).fontSize(20).onClick(() {router.pushUrl({url: pages/SecondPage,params: {src: this.userName:this.password,}})})}.width(100%)}.height(100%).backgroundColor(#05000000)}
}5.修改SecondPage.ets代码
在SecondPage.ets代码中首先将前一页面的信息取出并显示在Text上使用router.getParams()方法获取前一页面的信息添加“返回”Button的逻辑实现方法和前一步骤类似关键代码如下
import router from ohos.router
Entry
Component
struct SecondPage {State message: string 第二个页面State src: string router.getParams()?.[src]build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)// 显示传参的内容Text(this.src).fontSize(30)// 添加按钮触发返回Button(返回).fontSize(20).onClick(() {router.back()})}.width(100%)}.height(100%).backgroundColor(#05000000)}
}Index.ets代码和SecondPage.ets代码中还修改了this.message设置了整体布局的backgroundColor本任务完整项目代码请查看本书资源。
6.运行工程
测试运行效果
