(Arkts界面示例)ets pages Demo

Index.ets 文件

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

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})
  }
}

API参考 Search Flex布局 > pages/flex_n.ets > struct FlexExample

API参考 Search 边框设置 > pages/border_n.ets > struct BorderExample

API参考 Search 图片边框设置 > pages/image_border_setting_n1.ets >struct image_border_setting_n1

API参考 Search 图片边框设置 > pages/image_border_setting_n2.ets >struct image_border_setting_n2

API参考 Search 背景设置 > pages/background_n.ets >struct BackgroundExample

API参考 Search 透明度设置 > pages/opacity_n.ets >struct OpacityExample

API参考 Search 显隐控制 > pages/visibility_n.ets >struct VisibilityExample

API参考 Search 禁用控制 > pages/enabled_n.ets >struct EnabledExample

API参考 Search 浮层 > pages/overlay_n.ets >struct OverlayExample

API参考 Search Z序控制 > pages/zindex_n.ets >struct ZIndexExample

API参考 Search 图形变换 > pages/transform_n.ets >struct TransformExample

API参考 Search 图形效果 > pages/blur_n1.ets >struct BlurEffectsExample