(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})
  }
}
相关推荐
m0_6786933324 分钟前
深度学习笔记22-RNN心脏病预测(Tensorflow)
笔记·rnn·深度学习
能来帮帮蒟蒻吗2 小时前
Docker安装(Ubuntu22版)
笔记·学习·spring cloud·docker·容器
码小文3 小时前
Cadence学习笔记之---原理图设计基本操作
笔记·单片机·学习·硬件工程·pcb工艺
✿ ༺ ོIT技术༻4 小时前
笔试强训:Day2
开发语言·c++·笔记·算法
可爱的秋秋啊6 小时前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
细心的莽夫7 小时前
SpringCloud 微服务复习笔记
java·spring boot·笔记·后端·spring·spring cloud·微服务
BOB-wangbaohai8 小时前
Flowable7.x学习笔记(十三)查看部署流程图
笔记·学习·流程图
YuCaiH9 小时前
数组理论基础
笔记·leetcode·c·数组
bicijinlian10 小时前
多语言笔记系列:使用导入魔法命令
笔记
foo1st12 小时前
JDK(Ubuntu 18.04.6 LTS)安装笔记
java·笔记·ubuntu