(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})
  }
}
相关推荐
西岭千秋雪_1 小时前
Redis性能优化
数据库·redis·笔记·学习·缓存·性能优化
HuashuiMu花水木2 小时前
Matplotlib笔记4----------图像处理
图像处理·笔记·matplotlib
DES 仿真实践家3 小时前
【Day 11-N22】Python类(3)——Python的继承性、多继承、方法重写
开发语言·笔记·python
IMPYLH9 小时前
Python 的内置函数 reversed
笔记·python
ysa05103013 小时前
数论基础知识和模板
数据结构·c++·笔记·算法
今天背单词了吗98013 小时前
算法学习笔记:7.Dijkstra 算法——从原理到实战,涵盖 LeetCode 与考研 408 例题
java·开发语言·数据结构·笔记·算法
mitt_14 小时前
《人生顶层设计》读书笔记7
笔记
智者知已应修善业14 小时前
【51单片机节日彩灯控制器设计】2022-6-11
c语言·经验分享·笔记·单片机·嵌入式硬件·51单片机
Jyywww12114 小时前
微信小程序学习笔记
笔记·学习·微信小程序
m0_6786933314 小时前
深度学习笔记29-RNN实现阿尔茨海默病诊断(Pytorch)
笔记·rnn·深度学习