(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 小时前
MySql速成笔记5(多表关系)
笔记
iconball2 小时前
个人用云计算学习笔记 --19 (MariaDB服务器)
linux·运维·笔记·学习·云计算
岑梓铭2 小时前
《考研408数据结构》第四章(串和串的算法)复习笔记
数据结构·笔记·考研·算法
冬夜戏雪3 小时前
记录下C盘清理步骤(有效)
经验分享·笔记
我登哥MVP3 小时前
Apache Tomcat 详解
java·笔记·tomcat
泽虞4 小时前
《Qt应用开发》笔记
linux·开发语言·c++·笔记·qt
报错小能手4 小时前
linux学习笔记(21)线程同步——互斥锁
linux·笔记·学习
明明真系叻5 小时前
《量子计算》学习笔记:量子计算的基本定义(续)
笔记·学习·量子计算
不会调制解调的猫7 小时前
笔记 | 内网服务器通过wifi穿透,设置流量走向
运维·服务器·笔记
程序员大雄学编程8 小时前
「机器学习笔记7」决策树学习:从理论到实践的全面解析(上)
笔记·决策树·机器学习