(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})
  }
}
相关推荐
chushiyunen3 分钟前
dom操作笔记、xml和document等
xml·java·笔记
chushiyunen6 分钟前
tomcat使用笔记、启动失败但是未打印日志
java·笔记·tomcat
汇能感知11 分钟前
光谱相机的光谱数据采集原理
经验分享·笔记·科技
人人题34 分钟前
汽车加气站操作工考试答题模板
笔记·职场和发展·微信小程序·汽车·创业创新·学习方法·业界资讯
小脑斧爱吃鱼鱼1 小时前
鸿蒙项目笔记(1)
笔记·学习·harmonyos
鸿蒙布道师2 小时前
鸿蒙NEXT开发对象工具类(TS)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
马剑威(威哥爱编程)2 小时前
在HarmonyOS NEXT 开发中,如何指定一个号码,拉起系统拨号页面
华为·harmonyos·arkts
lulinhao2 小时前
HCIA/HCIP基础知识笔记汇总
网络·笔记
杉之3 小时前
SpringBlade 数据库字段的自动填充
java·笔记·学习·spring·tomcat
WarPigs4 小时前
blender场景导入Unity的流程(个人总结)
笔记