(Arkts界面示例)ets pages Demo

Index.ets 文件

TypeScript 复制代码
import router from '@ohos.router'

@Entry//表示该自定义组件为入口组件
@Component //表示自定义组件
struct Index {//表示组件中的状态变量,状态变量变化会触发UI刷新
  @State changeValue: string = ''
  @State submitValue: string = ''
  controller: SearchController = new SearchController()

  build() {
    Column() {

      Search({ value: this.changeValue, placeholder: 'file name', controller: this.controller })
        .searchButton('SEARCH')
        .width(300)
        .height(50)
        .backgroundColor('#F5F5F5')
        .placeholderColor(Color.Grey)
        .placeholderFont({ size: 15, weight: 550 })
        .textFont({ size: 15, weight: 500 })
        .copyOption(CopyOptions.InApp)
        .onSubmit((value: string) => {
          this.submitValue = value
          router.pushUrl({url:'pages/'+this.submitValue})
        })
        .onChange((value: string) => {
          this.changeValue = value
        })
        .margin(20)

    }.width('100%')
  }
}

hello.ets

TypeScript 复制代码
import router from '@ohos.router'

@Entry
@Component
struct hello{
  build() {
    Column({ space: 5 }) {

      Text('首页').onClick(() => {
        router.pushUrl({ url: 'pages/Index' })
      })

      Text('Hello worid').fontSize(20)
    }.width('100%').margin({top:10})
  }
}
相关推荐
爱因斯坦乐16 小时前
【vue】I18N国际化管理系统
前端·javascript·vue.js·笔记·前端框架
Ro Jace16 小时前
模式识别与机器学习课程笔记(4):线性判决函数
人工智能·笔记·机器学习
Rousson17 小时前
硬件学习笔记--82 连接器的选用原则与流程
笔记·单片机·学习
Larry_Yanan19 小时前
QML学习笔记(四十)QML的ApplicationWindow和StackView
c++·笔记·qt·学习·ui
摇滚侠1 天前
Spring Boot 3零基础教程,Spring Boot 日志的归档与切割,笔记22
spring boot·redis·笔记
wan5555cn1 天前
当代社会情绪分类及其改善方向深度解析
大数据·人工智能·笔记·深度学习·算法·生活
能不能别报错1 天前
K8s学习笔记(二十一) RBAC
笔记·学习·kubernetes
hour_go1 天前
Linux Shell 实验一:数据采集与脚本调试错误总结
linux·笔记·bash·shell·实验报告·错误排查
励志成为美貌才华为一体的女子1 天前
本地用docling实现pdf转markdown操作笔记
笔记·pdf
患得患失9491 天前
【Turborepo】【Next】 Turborepo + Next.js 前后端精简搭建笔记(带官网)
开发语言·javascript·笔记