arkts组件默认焦点，焦点转移，焦点样式的代码测试

关于组件默认焦点，焦点转移，焦点样式的代码测试

import { ColorMetrics, LengthMetrics } from '@kit.ArkUI'

@Entry
@Component
struct Page3 {
  @State bg0: Color = Color.Blue
  @State bg1: Color = Color.Blue
  @State bg2: Color = Color.Blue
  @State bg3: Color = Color.Blue
  @State bg4: Color = Color.Blue
  @State bg5: Color = Color.Blue

  build() {
    Column({ space: 10 }) {
      Button('没有焦点的按钮')
        .focusable(false)//按Tab键和方向键，都不接受焦点
        .focusOnTouch(false)//点击按钮也不会获得焦点
        .onClick(() => {
          //在事件里，用下面的方法来转换焦点
          this.getUIContext().getFocusController().requestFocus('button2') //把焦点转移到id为‘button2’的组件上
          // focusControl.requestFocus('button2')  //把焦点转移到id为‘button2’的组件上
          // this.getUIContext().getFocusController().clearFocus()  //清除焦点，将焦点强制转移到页面根容器节点，焦点链路上其他节点失焦。
        })

      Text('没有焦点的Text组件')

      Text('有焦点的Text组件')
        .focusable(true)
        .focusOnTouch(true)
        .backgroundColor(this.bg0)
        .onFocus(() => {
          this.bg0 = Color.Green;
        })
        .onBlur(() => {
          this.bg0 = Color.Blue
        })
        .fontColor(Color.White)
        .padding(10)

      Button('确定111')
        .defaultFocus(true)//启动应用，焦点默认在此组件上 源码来自 wb98.com
        .focusable(true)//可接受焦点，TEXT组件默认是没有焦点的
        .focusOnTouch(true)//为真就可做到点击也可获取焦点，否则就只有按TAB和方向键才能得到焦点
        .backgroundColor(this.bg1)
        .onFocus(() => {
          this.bg1 = Color.Green;
        })
        .onBlur(() => {
          this.bg1 = Color.Blue
        })
        .focusBox({
          //焦点框样式自下定义
          margin: LengthMetrics.px(10),
          strokeColor: ColorMetrics.rgba(255, 0, 0),
          strokeWidth: LengthMetrics.px(5)
        })

      Button('确定222')
        .id('button2')
        .backgroundColor(this.bg2)
        .focusOnTouch(true)

        .onFocus(() => {
          this.bg2 = Color.Green;
        })
        .onBlur(() => {
          this.bg2 = Color.Blue
        })

      Button('确定333')
        .backgroundColor(this.bg3)
        .focusOnTouch(true)
        .onFocus(() => {
          this.bg3 = Color.Green;
        })
        .onBlur(() => {
          this.bg3 = Color.Blue
        })

    }
    .padding(10)
  }
}

DevEco Studio 5.1.1 bata1 预览器 测试成功

打赏 支付宝打赏 微信打赏

来源：济亨网

本文链接：http://wb86.com/post/383.html