• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1import {
2  __memo_context_type,
3  __memo_id_type,
4  memo,
5  MutableState,
6  observableProxy,
7  Require,
8  State,
9  StateDecoratedVariable,
10  stateOf,
11} from '@ohos.arkui.stateManagement' // should be insert by ui-plugins
12
13import {
14  $r,
15  Alignment,
16  Area,
17  Builder,
18  Button,
19  ButtonAttribute,
20  Callback,
21  ClickEffect,
22  ClickEffectLevel,
23  ClickEvent,
24  Color,
25  ColorMetrics,
26  Column,
27  CommonMethod,
28  Component,
29  CustomBuilder,
30  CustomStyles,
31  focusControl,
32  FocusPriority,
33  FunctionKey,
34  Image,
35  ImageRepeat,
36  KeyEvent,
37  KeyProcessingMode,
38  LengthMetrics,
39  ModifierKey,
40  NodeController,
41  Position,
42  Radio,
43  SizeOptions,
44  StateStyles,
45  Text,
46  TextAttribute,
47  TextInput,
48  UserView,
49  Visibility,
50  VisibleAreaEventOptions,
51  VisibleAreaChangeCallback,
52  Checkbox,
53  cursorControl,
54  PointerStyle,
55  NavDestination,
56  NavPathStack,
57  NavDestinationContext
58} from '@ohos.arkui.component' // TextAttribute should be insert by ui-plugins
59
60import hilog from '@ohos.hilog'
61import componentUtils from '@ohos.arkui.componentUtils'
62import curves from '@ohos.curves';
63
64
65@Component
66export struct FocusTest {
67  @State stateVar: string = 'state var';
68  message: string = 'var';
69  @State isShow: boolean = true
70  @State btColor: Color = Color.Black;
71
72  normalStyles: CustomStyles = (instance: CommonMethod): void => {
73    hilog.info(0x0000, 'testTag', 'normal' + instance);
74    instance.backgroundColor('#FFFF0000');
75  }
76  pressedStyles: CustomStyles = (instance: CommonMethod): void => {
77    hilog.info(0x0000, 'testTag', 'normal' + instance);
78    instance.backgroundColor('#FF000000');
79  }
80
81  NormalStyles(instance: CommonMethod) {
82    instance.backgroundColor('#FFFF0000');
83  }
84
85  changeValue() {
86    this.stateVar += '~'
87  }
88
89  @Builder
90  renderBackground() {
91    Column() {
92      Text('sssssssss').width(100).height(100).backgroundColor('#FFFF0000')
93    }.backgroundColor('#FFFF0000')
94  }
95
96  build() {
97    NavDestination() {
98      Column(undefined) {
99
100      Button(this.message)
101        .backgroundColor('#FFFF00FF')
102        .stateStyles({
103          normal: this.NormalStyles,
104          pressed: this.pressedStyles
105        })
106        .stateStyles({
107          pressed: this.NormalStyles,
108        })
109
110        .stateStyles(undefined)
111        .onClick((e: ClickEvent) => {
112          hilog.info(0x0000, 'testTag', 'lisitao On Click 0');
113          this.getUIContext().getCursorController().setCursor(PointerStyle.NORTH_SOUTH)
114
115          hilog.info(0x0000, 'testTag', 'lisitao On Click 1');
116
117          this.isShow = !this.isShow
118          this.changeValue()
119        })
120      Column() {
121        Button('First Button 1')
122          .id('button1')
123          .background(this.renderBackground)
124          .width(260)
125          .height(70)
126          .onClick((e: ClickEvent) => {
127            hilog.info(0x0000, 'testTag', 'lisitao First Button 1 onClick');
128            this.getUIContext().getCursorController().restoreDefault()
129          })
130          .onKeyEventDispatch((event: KeyEvent): boolean => {
131            hilog.info(0x0000, 'testTag', 'lisitao onKeyEvent');
132            return true
133          })
134          .onFocus(() => {
135            hilog.info(0x0000, 'testTag', 'lisitao onFocus');
136          })
137          .onBlur(() => {
138            hilog.info(0x0000, 'testTag', 'lisitao onBlur');
139          })
140          .onAttach((): void => {
141            hilog.info(0x0000, 'testTag', 'lisitao onAttach');
142          })
143          .onDetach((): void => {
144            hilog.info(0x0000, 'testTag', 'lisitao onDetach');
145          })
146          .keyboardShortcut(FunctionKey.F5, [], () : void => {
147            hilog.info(0x0000, 'testTag', 'lisitao keyboardShortcut');
148          })
149        .keyboardShortcut('w', [ModifierKey.CTRL], undefined)
150        .backgroundImage('/comment/startIcon.png', ImageRepeat.X)
151        .onKeyEventDispatch((event: KeyEvent): boolean => {
152          hilog.info(0x0000, 'testTag', 'lisitao onKeyEventDispatch');
153
154          return true
155        })
156        .onKeyEvent((event: KeyEvent): boolean => {
157          hilog.info(0x0000, 'testTag', 'lisitao onKeyEvent 1');
158          event.stopPropagation();
159          hilog.info(0x0000, 'testTag', 'lisitao onKeyEvent 2');
160          return false
161        })
162        .onKeyPreIme((event: KeyEvent): boolean => {
163          hilog.info(0x0000, 'testTag', 'lisitao onKeyPreIme');
164          return true
165        })
166
167        Button('First Button 2')
168          .id('button2')
169          .width(260)
170          .height(70)
171
172        Button('First Button 3')
173          .id('button3')
174          .width(260)
175          .height(70)
176          .backgroundImageSize({ width: 100, height: 100 } as SizeOptions)
177          .backgroundImagePosition({ x: -10, y: -10 } as Position)
178          .backgroundImage($r('app.media.startIcon'), ImageRepeat.X)
179      }
180      .onKeyEvent((event: KeyEvent): boolean => {
181        event.stopPropagation();
182        hilog.info(0x0000, 'testTag', 'lisitao Column onKeyEvent');
183        return true
184      })
185      .focusScopePriority('column1', FocusPriority.PRIOR)
186
187      Column() {
188        Button('First Button 1')
189          .width(260)
190          .height(70)
191        Button('First Button 2')
192          .width(260)
193          .height(70)
194        Button('First Button 3')
195          .width(260)
196          .height(70)
197      }
198      .focusScopeId('column1', false, false)
199
200      Text(this.stateVar)
201        .fontSize(20)
202        .onVisibleAreaChange([0.0, 1.0], (isExpanding: boolean, currentRatio: number): void => {
203          hilog.info(0x0000, 'testTag', 'lisitao onVisibleAreaChange');
204        })
205        .onAreaChange((oldValue: Area, newValue: Area) => {
206          hilog.info(0x0000, 'testTag', 'lisitao onAreaChange');
207        })
208        .onSizeChange((oldValue: SizeOptions, newValue: SizeOptions): void => {
209          hilog.info(0x0000, 'testTag', 'lisitao onSizeChange');
210        })
211        .onVisibleAreaApproximateChange({ ratios: [0.0, 1.0], expectedUpdateInterval: 1000 } as VisibleAreaEventOptions,
212          (isExpanding: boolean, currentRatio: number): void => {
213            hilog.info(0x0000, 'testTag', 'Test Text isExpanding: ' + isExpanding + ', currentRatio:' + currentRatio);
214        } as VisibleAreaChangeCallback)
215    }
216    }
217    .title('焦点按键基础功能')
218  }
219}
220
221@Component
222struct Child {
223  @State stateVar: string = 'Child';
224
225  build() {
226    Text(this.stateVar).fontSize(50)
227  }
228}