如何在KaihongOS操作系统中写一个动态的页面

写一个动态的页面

在写一个简单的页面文档中，我们实现了一个简单的静态页面，现在我们来实现一个动态的页面。
创建第二个页面

前提：创建一个新项目并展开目录。
方法一

• 进入entry/src/main/ets/pages目录，点击pages选中后右键-新建-Page
  
• 输入SecondPage，点击Finish，完成创建第二个新页面
  
• 页面自动填充模板代码
  

方法二

• 进入entry/src/main/ets/pages目录，点击pages选中后右键-新建-文件
  
• 输入SecondPage.ets，回车后完成页面创建
  
• 进入entry/src/main/resources/base/profile目录，在main_pages.json文件中的“src”下配置第二个页面的路由“pages/Second”。示例如下：
  

{  "src": [    "pages/Index",    "pages/SecondPage"  ]}

• 配置完成路由后，就已经完成第二个页面的创建，但此时SecondPage.ets是空白的，需要开发者自行编写代码。
  

添加文本及按钮

参照Index.ets页面，在SecondPage.ets页面中添加Text组件、Button组件等，并设置其样式。SecondPage.ets示例如下：
// SecondPage.ets@Entry@Componentstruct SecondPage {  @State message: string = 'Hi there';  build() {    Row() {      Column() {        Text(this.message)          .fontSize(50)          .fontWeight(FontWeight.Bold)        Button() {          Text('Back')            .fontSize(25)            .fontWeight(FontWeight.Bold)        }        .type(ButtonType.Capsule)        .margin({          top: 20        })        .backgroundColor('#0D9FFB')        .width('40%')        .height('5%')      }      .width('100%')    }    .height('100%')  }}实现页面之间的跳转

页面间的导航可以通过页面路由router来实现。页面路由router根据页面url找到目标页面，从而实现跳转。使用页面路由请导入router模块。
如果需要实现更好的转场动效等，推荐使用Navigation。

• 第一个页面跳转到第二个页面。
  在第一个页面中，跳转按钮绑定onClick事件，点击按钮时跳转到第二页。Index.ets文件的示例如下：
  

// Index.ets// 导入页面路由模块import router from '@ohos.router';import { BusinessError } from '@ohos.base';@Entry@Componentstruct Index {  @State message: string = 'Hello World';  build() {    Row() {      Column() {        Text(this.message)          .fontSize(50)          .fontWeight(FontWeight.Bold)        // 添加按钮，以响应用户点击        Button() {          Text('Next')            .fontSize(30)            .fontWeight(FontWeight.Bold)        }        .type(ButtonType.Capsule)        .margin({          top: 20        })        .backgroundColor('#0D9FFB')        .width('40%')        .height('5%')        // 跳转按钮绑定onClick事件，点击时跳转到第二页        .onClick(() => {          console.info(`Succeeded in clicking the 'Next' button.`)         // 跳转到第二页           router.pushUrl({ url: 'pages/SecondPage' }).then(() => {             console.info('Succeeded in jumping to the second page.')           }).catch((err: BusinessError) => {             console.error(`Failed to jump to the second page.Code is ${err.code}, message is ${err.message}`)           })        })      }      .width('100%')    }    .height('100%')  }}

• 第二个页面返回到第一个页面。
  在第二个页面中，返回按钮绑定onClick事件，点击按钮时返回到第一页。SecondPage.ets文件的示例如下：
  

// SecondPage.ets// 导入页面路由模块import router from '@ohos.router';import { BusinessError } from '@ohos.base';@Entry@Componentstruct SecondPage {  @State message: string = 'Hi there';  build() {    Row() {      Column() {        Text(this.message)          .fontSize(50)          .fontWeight(FontWeight.Bold)        Button() {          Text('Back')            .fontSize(25)            .fontWeight(FontWeight.Bold)        }        .type(ButtonType.Capsule)        .margin({          top: 20        })        .backgroundColor('#0D9FFB')        .width('40%')        .height('5%')        // 返回按钮绑定onClick事件，点击按钮时返回到第一页        .onClick(() => {          console.info(`Succeeded in clicking the 'Back' button.`)          try {            // 返回第一页            router.back()            console.info('Succeeded in returning to the first page.')          } catch (err) {             let code = (err as BusinessError).code;             let message = (err as BusinessError).message;            console.error(`Failed to return to the first page.Code is ${code}, message is ${message}`)          }        })      }      .width('100%')    }    .height('100%')  }}推送应用到真机运行，查看实际效果。
@State的使用

在上面的示例中，我们已经用到了@State，在KaihongOS中，@State是用于状态管理的装饰器，在开发过程中起到了很重要的作用，接下来我们简单了解一下它的用途和特点。
@State
@State 是一个装饰器，用于声明组件内的状态变量。这些变量通常用于存储用户界面的动态数据，如表单输入、开关状态等。当@State变量的值发生变化时，会自动触发其直接绑定组件的重新渲染，以更新UI。
@State变量具有以下特点：

• 内部私有： @State变量只能在组件内部访问，这保证了组件状态的封装性。
  
• 响应式： 状态的变化会自动触发组件的重新渲染，确保用户界面与状态保持同步。
  
• 必须本地初始化： 所有@State变量必须在声明时初始化，以及指定其类型，以确保框架行为的准确性。