• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1import {
2  memo,
3  __memo_context_type,
4  __memo_id_type,
5  State,
6  StateDecoratedVariable,
7  MutableState,
8  stateOf,
9  observableProxy
10} from '@ohos.arkui.stateManagement' // should be insert by ui-plugins
11
12import {
13  Entry,
14  Text,
15  TextAttribute,
16  Column,
17  Component,
18  Button,
19  ButtonAttribute,
20  ClickEvent,
21  UserView,
22  NodeContainer,
23  ClickEvent,
24  $r,
25  TouchEvent,
26  Margin,
27  Scroll,
28  ScrollAttribute,
29  BorderStyle,
30  NavDestination, NavPathStack, NavDestinationContext, Callback
31} from '@ohos.arkui.component' // TextAttribute should be insert by ui-plugins
32
33import hilog from '@ohos.hilog'
34import {
35  NodeController,
36  FrameNode,
37  RenderNode,
38  DrawContext,
39  Frame,
40  ShapeMask,
41  Rect,
42  ShapeClip,
43  Size
44} from '@ohos.arkui.node'
45import { UIContext } from '@ohos.arkui.UIContext'
46
47class MyRenderNode extends RenderNode {
48  draw(context: DrawContext) {
49    hilog.info(0x0000, 'testTag', 'FZY MyRenderNode draw');
50  }
51}
52
53class MyNodeController extends NodeController {
54  private rootNode: FrameNode | null = null;
55
56  makeNode(uiContext: UIContext): FrameNode | null {
57    hilog.info(0x0000, 'testTag', 'FZY makeNode');
58    this.rootNode = new FrameNode(uiContext);
59    return this.rootNode;
60  }
61
62  aboutToAppear(): void {
63    hilog.info(0x0000, 'testTag', 'FZY aboutToAppear');
64  }
65
66  aboutToDisappear(): void {
67    hilog.info(0x0000, 'testTag', 'FZY aboutToDisappear');
68  }
69
70  onAttach(): void {
71    hilog.info(0x0000, 'testTag', 'FZY onAttach');
72  }
73
74  onDetach(): void {
75    hilog.info(0x0000, 'testTag', 'FZY onDetach');
76  }
77
78  onWillBind(containerId: number): void {
79    hilog.info(0x0000, 'testTag', 'FZY onWillBind ' + JSON.stringify(containerId));
80  }
81
82  onWillUnbind(containerId: number): void {
83    hilog.info(0x0000, 'testTag', 'FZY onWillUnbind ' + JSON.stringify(containerId));
84  }
85
86  onBind(containerId: number): void {
87    hilog.info(0x0000, 'testTag', 'FZY onBind ' + JSON.stringify(containerId));
88  }
89
90  onUnbind(containerId: number): void {
91    hilog.info(0x0000, 'testTag', 'FZY onUnbind ' + JSON.stringify(containerId));
92  }
93
94  onTouchEvent(event: TouchEvent) {
95    hilog.info(0x0000, 'testTag', 'FZY onTouchEvent');
96  }
97
98  aboutToResize(size: Size) {
99    hilog.info(0x0000, 'testTag', 'FZY aboutToResize ');
100  }
101}
102
103@Entry
104@Component
105export struct NodeContainerTest {
106  private controllerArray: Array<MyNodeController> = new Array<MyNodeController>()
107  @State idx: number = 0
108  @State flag: boolean = true
109
110  aboutToAppear() {
111    this.controllerArray.push(new MyNodeController())
112    this.controllerArray.push(new MyNodeController())
113  }
114
115  build() {
116    NavDestination() {
117      Scroll() {
118        Column() {
119          Text($r('app.string.hello_world')).fontSize(24).fontColor('#ff0000').width($r('app.float.width')).backgroundColor('#0000ff')
120          if (this.flag) {
121            NodeContainer(this.controllerArray[this.idx])
122              .width(100)
123              .height(100)
124              .backgroundColor('#ffff00')
125          }
126
127          Button('UpdateNodeController')
128            .onClick((event: ClickEvent) => {
129              hilog.info(0x0000, 'testTag', 'FZY UpdateNodeController onClick ');
130              this.idx = (this.idx + 1) % this.controllerArray.length
131            })
132            .width('100%')
133            .margin({ bottom: 8 } as Margin)
134          Button('UpdateFlag')
135            .onClick((event: ClickEvent) => {
136              hilog.info(0x0000, 'testTag', 'FZY UpdateFlag onClick ');
137              this.flag = !this.flag
138            })
139            .width('100%')
140            .margin({ bottom: 8 } as Margin)
141          Button('rebuild')
142            .onClick((event: ClickEvent) => {
143              this.controllerArray[this.idx].rebuild()
144            })
145        }
146        .width('100%')
147      }
148      .padding(16)
149      .width('100%')
150      .height('100%')
151    }
152    .title('NodeContainerTest')
153  }
154}
155