五笔打字通主页
关于组件默认焦点,焦点转移,焦点样式的代码测试
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 预览器 测试成功
来源:济亨网
本文链接:https://www.wb98.com/post/383.html