{"id":89444,"date":"2026-08-03T02:56:34","date_gmt":"2026-08-02T18:56:34","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/89444.html"},"modified":"2026-08-03T02:56:34","modified_gmt":"2026-08-02T18:56:34","slug":"framenode-%e6%ba%90%e7%a0%81%e7%ba%a7%e6%b7%b1%e5%ba%a6%e8%a7%a3%e6%9e%90-arkui-%e4%b8%ba%e4%bb%80%e4%b9%88%e4%b8%80%e5%88%87%e7%9a%86-framenode","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/89444.html","title":{"rendered":"FrameNode \u6e90\u7801\u7ea7\u6df1\u5ea6\u89e3\u6790\u2014\u2014 ArkUI \u4e3a\u4ec0\u4e48\u4e00\u5207\u7686 FrameNode"},"content":{"rendered":"

\u5982\u679c\u8bf4：<\/p>\n

@Component<\/p>\n

\u662f\u5f00\u53d1\u8005\u770b\u5230\u7684\u7ec4\u4ef6\u3002<\/p>\n

\u90a3\u4e48：<\/p>\n

FrameNode<\/p>\n

\u5c31\u662f ArkUI Runtime \u771f\u6b63\u770b\u5230\u7684\u7ec4\u4ef6\u3002<\/p>\n

\u6574\u4e2a ArkUI ACE Engine \u91cc\u9762，\u51fa\u73b0\u9891\u7387\u6700\u9ad8\u7684\u7c7b\u4e0d\u662f：<\/p>\n

TextPattern
\nButtonPattern
\nColumnPattern<\/p>\n

\u800c\u662f：<\/p>\n

FrameNode<\/p>\n

\u51e0\u4e4e\u6240\u6709\u7ec4\u4ef6\u3002<\/p>\n

\u6700\u7ec8\u90fd\u4f1a\u8f6c\u6362\u6210：<\/p>\n

FrameNode<\/p>\n

\u53ef\u4ee5\u8bf4：<\/p>\n

FrameNode \u662f\u6574\u4e2a ArkUI \u6e32\u67d3\u5f15\u64ce\u7684\u6838\u5fc3\u6570\u636e\u7ed3\u6784\u3002<\/p>\n

\n

\u4ece\u4e00\u884c\u4ee3\u7801\u5f00\u59cb<\/h2>\n

\u4f8b\u5982：<\/p>\n

Column() {
\n Text("HarmonyOS")
\n Button("\u767b\u5f55")
\n}<\/p>\n

\u5f00\u53d1\u8005\u8ba4\u4e3a：<\/p>\n

\u521b\u5efa\u4e86：<\/p>\n

Column<\/p>\n

Text<\/p>\n

Button<\/p>\n

\u5b9e\u9645\u4e0a\u3002<\/p>\n

Runtime \u771f\u6b63\u521b\u5efa\u7684\u662f：<\/p>\n

FrameNode(Column)<\/p>\n

\u2193<\/p>\n

FrameNode(Text)<\/p>\n

\u2193<\/p>\n

FrameNode(Button)<\/p>\n

\u4e0d\u662f：<\/p>\n

Component<\/p>\n

\n

\u4e3a\u4ec0\u4e48\u4e0d\u76f4\u63a5\u4fdd\u5b58 Component？<\/h2>\n

\u8fd9\u662f\u5f88\u591a\u4eba\u90fd\u4f1a\u95ee\u7684\u95ee\u9898\u3002<\/p>\n

\u4f8b\u5982：<\/p>\n

@Component
\nstruct LoginPage {}<\/p>\n

\u4e3a\u4ec0\u4e48 Runtime \u4e0d\u76f4\u63a5\u4fdd\u5b58：<\/p>\n

LoginPage<\/p>\n

\u539f\u56e0\u975e\u5e38\u7b80\u5355：<\/p>\n

Component \u53ea\u662f：<\/p>\n

ArkTS<\/p>\n

\u2193<\/p>\n

\u4e1a\u52a1\u903b\u8f91<\/p>\n

\u771f\u6b63\u8d1f\u8d23：<\/p>\n

\u5e03\u5c40：<\/p>\n

\u7ed8\u5236：<\/p>\n

\u52a8\u753b：<\/p>\n

\u4e8b\u4ef6：<\/p>\n

\u7684\u662f：<\/p>\n

FrameNode<\/p>\n

\u6240\u4ee5 Runtime \u6839\u672c\u4e0d\u5173\u5fc3：<\/p>\n

LoginPage<\/p>\n

\u5b83\u5173\u5fc3\u7684\u662f：<\/p>\n

Column<\/p>\n

Text<\/p>\n

Image<\/p>\n

List<\/p>\n

Button<\/p>\n

\n

FrameNode \u5728\u6574\u4e2a Runtime \u7684\u4f4d\u7f6e<\/h2>\n

\u771f\u6b63\u7684\u6570\u636e\u6d41：<\/p>\n

ArkTS<\/p>\n

\u2193<\/p>\n

Build()<\/p>\n

\u2193<\/p>\n

FrameNode Tree<\/p>\n

\u2193<\/p>\n

Layout<\/p>\n

\u2193<\/p>\n

Paint<\/p>\n

\u2193<\/p>\n

RenderNode<\/p>\n

\u2193<\/p>\n

RenderService<\/p>\n

\u2193<\/p>\n

GPU<\/p>\n

\u6ce8\u610f：<\/p>\n

\u4ece Build \u5f00\u59cb\u3002<\/p>\n

\u540e\u9762\u7684 Runtime\u3002<\/p>\n

\u5df2\u7ecf\u5b8c\u5168\u4e0d\u77e5\u9053：<\/p>\n

ArkTS\u3002<\/p>\n

\u662f\u4ec0\u4e48\u3002<\/p>\n

\u6574\u4e2a Runtime\u3002<\/p>\n

\u64cd\u4f5c\u7684\u3002<\/p>\n

\u5168\u90e8\u90fd\u662f：<\/p>\n

FrameNode<\/p>\n

\n

FrameNode \u5185\u90e8\u7ed3\u6784<\/h2>\n

\u771f\u6b63\u6e90\u7801（ACE Engine）\u8fdc\u6bd4\u6559\u7a0b\u590d\u6742\u3002<\/p>\n

\u62bd\u8c61\u4e4b\u540e，\u5927\u81f4\u5982\u4e0b：<\/p>\n

class FrameNode {<\/p>\n

public:<\/p>\n

int64_t nodeId;<\/p>\n

RefPtr<Pattern> pattern;<\/p>\n

RefPtr<EventHub> eventHub;<\/p>\n

RefPtr<FocusHub> focusHub;<\/p>\n

RefPtr<GestureHub> gestureHub;<\/p>\n

RefPtr<LayoutProperty> layoutProperty;<\/p>\n

RefPtr<PaintProperty> paintProperty;<\/p>\n

RefPtr<GeometryNode> geometryNode;<\/p>\n

RefPtr<RenderContext> renderContext;<\/p>\n

std::vector<RefPtr<FrameNode>> children;<\/p>\n

WeakPtr<FrameNode> parent;<\/p>\n

};<\/p>\n

\u770b\u5230\u8fd9\u91cc\u4f60\u4f1a\u53d1\u73b0：<\/p>\n

\u4e00\u4e2a FrameNode\u3002<\/p>\n

\u5176\u5b9e\u5df2\u7ecf\u5305\u542b：<\/p>\n

\u6574\u4e2a\u7ec4\u4ef6\u751f\u547d\u5468\u671f\u9700\u8981\u7684\u5927\u90e8\u5206\u80fd\u529b\u3002<\/p>\n

\n

\u4e3a\u4ec0\u4e48\u8bbe\u8ba1\u6210\u7ec4\u5408？<\/h2>\n

\u5f88\u591a UI \u6846\u67b6\u3002<\/p>\n

\u559c\u6b22：<\/p>\n

class Button : View<\/p>\n

HarmonyOS \u6ca1\u6709\u3002<\/p>\n

\u800c\u662f：<\/p>\n

FrameNode<\/p>\n

+<\/p>\n

Pattern<\/p>\n

+<\/p>\n

LayoutProperty<\/p>\n

+<\/p>\n

PaintProperty<\/p>\n

+<\/p>\n

EventHub<\/p>\n

\u4e3a\u4ec0\u4e48？<\/p>\n

\u56e0\u4e3a：<\/p>\n

\u804c\u8d23\u5206\u79bb\u3002<\/p>\n

\u4f8b\u5982：<\/p>\n

\u4e8b\u4ef6：<\/p>\n

EventHub<\/p>\n

\u5e03\u5c40：<\/p>\n

LayoutProperty<\/p>\n

\u7ed8\u5236：<\/p>\n

PaintProperty<\/p>\n

FrameNode：<\/p>\n

\u53ea\u662f：<\/p>\n

\u7ba1\u7406\u8005\u3002<\/p>\n

\u4e0d\u662f：<\/p>\n

\u6267\u884c\u8005\u3002<\/p>\n

\n

NodeId<\/h2>\n

\u6bcf\u4e00\u4e2a：<\/p>\n

FrameNode\u3002<\/p>\n

\u90fd\u6709：<\/p>\n

\u552f\u4e00：<\/p>\n

nodeId<\/p>\n

\u4f8b\u5982：<\/p>\n

1001<\/p>\n

1002<\/p>\n

1003<\/p>\n

NodeId\u3002<\/p>\n

\u6574\u4e2a：<\/p>\n

Runtime\u3002<\/p>\n

\u552f\u4e00\u3002<\/p>\n

\u4e3b\u8981\u4f5c\u7528：<\/p>\n

\u67e5\u627e<\/p>\n

\u52a8\u753b<\/p>\n

\u4e8b\u4ef6<\/p>\n

Diff<\/p>\n

\n

Parent \u4e0e Children<\/h2>\n

\u771f\u6b63：<\/p>\n

FrameNode\u3002<\/p>\n

\u5c31\u662f：<\/p>\n

\u6811\u3002<\/p>\n

\u4f8b\u5982：<\/p>\n

Column<\/p>\n

\u251c\u2500\u2500Text<\/p>\n

\u251c\u2500\u2500Image<\/p>\n

\u2514\u2500\u2500Button<\/p>\n

Runtime：<\/p>\n

\u771f\u6b63：<\/p>\n

\u5c31\u662f：<\/p>\n

children.push_back(…)<\/p>\n

\u5f62\u6210：<\/p>\n

\u6811\u3002<\/p>\n

\u4e0d\u662f：<\/p>\n

\u6570\u7ec4\u3002<\/p>\n

\u4e0d\u662f：<\/p>\n

\u94fe\u8868\u3002<\/p>\n

\n

\u4e3a\u4ec0\u4e48\u5fc5\u987b\u4fdd\u5b58 Parent？<\/h2>\n

\u4f8b\u5982：<\/p>\n

Button\u3002<\/p>\n

\u9700\u8981：<\/p>\n

\u77e5\u9053：<\/p>\n

\u81ea\u5df1\u7684：<\/p>\n

\u7236\u5e03\u5c40\u3002<\/p>\n

\u4f8b\u5982：<\/p>\n

Column<\/p>\n

\u56e0\u4e3a：<\/p>\n

Layout\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

\u9700\u8981：<\/p>\n

Parent Constraint<\/p>\n

\u4f8b\u5982：<\/p>\n

\u7236\u7ec4\u4ef6：<\/p>\n

\u5bbd：<\/p>\n

300<\/p>\n

Button：<\/p>\n

\u8bbe\u7f6e：<\/p>\n

width(500)<\/p>\n

\u771f\u6b63：<\/p>\n

Layout\u3002<\/p>\n

\u6700\u540e：<\/p>\n

\u53ea\u80fd：<\/p>\n

300<\/p>\n

\u6240\u4ee5：<\/p>\n

Layout\u3002<\/p>\n

\u5fc5\u987b：<\/p>\n

\u80fd\u591f：<\/p>\n

\u5411\u4e0a：<\/p>\n

\u627e\u5230：<\/p>\n

Parent\u3002<\/p>\n

\n

Pattern \u5230\u5e95\u662f\u4ec0\u4e48？<\/h2>\n

\u5f88\u591a\u5f00\u53d1\u8005：<\/p>\n

\u4e00\u76f4\u8ba4\u4e3a：<\/p>\n

FrameNode\u3002<\/p>\n

\u8d1f\u8d23：<\/p>\n

\u6309\u94ae\u3002<\/p>\n

\u903b\u8f91\u3002<\/p>\n

\u5176\u5b9e：<\/p>\n

\u4e0d\u662f\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

Button：<\/p>\n

\u884c\u4e3a：<\/p>\n

\u5168\u90e8：<\/p>\n

\u5728：<\/p>\n

ButtonPattern<\/p>\n

\u4f8b\u5982：<\/p>\n

\u70b9\u51fb：<\/p>\n

OnClick<\/p>\n

\u7126\u70b9：<\/p>\n

Focus<\/p>\n

Hover：<\/p>\n

Hover<\/p>\n

Pressed：<\/p>\n

Pressed<\/p>\n

\u5168\u90e8：<\/p>\n

Pattern\u3002<\/p>\n

\u8d1f\u8d23\u3002<\/p>\n

FrameNode\u3002<\/p>\n

\u4e0d\u77e5\u9053：<\/p>\n

\u4ec0\u4e48：<\/p>\n

\u53eb：<\/p>\n

Button\u3002<\/p>\n

\n

\u4e3a\u4ec0\u4e48 Pattern \u53ef\u4ee5\u590d\u7528？<\/h2>\n

\u771f\u6b63：<\/p>\n

FrameNode：<\/p>\n

\u53ea\u662f：<\/p>\n

\u5bb9\u5668\u3002<\/p>\n

Pattern：<\/p>\n

\u624d：<\/p>\n

\u51b3\u5b9a：<\/p>\n

\u884c\u4e3a\u3002<\/p>\n

\u4f8b\u5982：<\/p>\n

TextPattern<\/p>\n

ButtonPattern<\/p>\n

ListPattern<\/p>\n

SwiperPattern<\/p>\n

ScrollPattern<\/p>\n

FrameNode\u3002<\/p>\n

\u53ef\u4ee5：<\/p>\n

\u6302：<\/p>\n

\u4efb\u4f55：<\/p>\n

Pattern\u3002<\/p>\n

\u8fd9\u4e5f\u662f：<\/p>\n

ArkUI\u3002<\/p>\n

\u5927\u91cf：<\/p>\n

\u7ec4\u4ef6\u3002<\/p>\n

\u5171\u7528：<\/p>\n

FrameNode\u3002<\/p>\n

\u539f\u56e0\u3002<\/p>\n

\n

EventHub<\/h2>\n

\u771f\u6b63：<\/p>\n

\u4e8b\u4ef6\u3002<\/p>\n

\u4e0d\u4f1a：<\/p>\n

\u653e：<\/p>\n

FrameNode\u3002<\/p>\n

\u4f8b\u5982：<\/p>\n

.onClick()<\/p>\n

.onTouch()<\/p>\n

.onHover()<\/p>\n

\u771f\u6b63：<\/p>\n

\u4fdd\u5b58：<\/p>\n

EventHub<\/p>\n

\u5185\u90e8：<\/p>\n

\u66f4\u63a5\u8fd1：<\/p>\n

class EventHub {<\/p>\n

ClickEvent<\/p>\n

TouchEvent<\/p>\n

HoverEvent<\/p>\n

KeyEvent<\/p>\n

}<\/p>\n

\u771f\u6b63：<\/p>\n

\u70b9\u51fb：<\/p>\n

\u6d41\u7a0b：<\/p>\n

Touch<\/p>\n

\u2193<\/p>\n

HitTest<\/p>\n

\u2193<\/p>\n

EventHub<\/p>\n

\u2193<\/p>\n

ClickCallback<\/p>\n

\n

GestureHub<\/h2>\n

\u5f88\u591a\u4eba\u3002<\/p>\n

\u4e0d\u77e5\u9053\u3002<\/p>\n

Gesture\u3002<\/p>\n

\u5176\u5b9e：<\/p>\n

\u72ec\u7acb\u3002<\/p>\n

\u4f8b\u5982：<\/p>\n

TapGesture<\/p>\n

LongPressGesture<\/p>\n

PanGesture<\/p>\n

PinchGesture<\/p>\n

\u771f\u6b63：<\/p>\n

\u4fdd\u5b58：<\/p>\n

GestureHub<\/p>\n

\u4e0d\u662f：<\/p>\n

EventHub\u3002<\/p>\n

\u56e0\u4e3a：<\/p>\n

Gesture\u3002<\/p>\n

\u9700\u8981：<\/p>\n

\u72b6\u6001\u673a\u3002<\/p>\n

\u4f8b\u5982：<\/p>\n

DOWN<\/p>\n

\u2193<\/p>\n

MOVE<\/p>\n

\u2193<\/p>\n

UP<\/p>\n

\u666e\u901a：<\/p>\n

Click\u3002<\/p>\n

\u6ca1\u6709\u3002<\/p>\n

\u8fd9\u4e48：<\/p>\n

\u590d\u6742\u3002<\/p>\n

\n

FocusHub<\/h2>\n

\u4f8b\u5982：<\/p>\n

TV\u3002<\/p>\n

PC\u3002<\/p>\n

HarmonyOS\u3002<\/p>\n

\u652f\u6301：<\/p>\n

\u7126\u70b9\u3002<\/p>\n

\u4f8b\u5982：<\/p>\n

\u2191<\/p>\n

\u2193<\/p>\n

\u2190<\/p>\n

\u2192<\/p>\n

\u771f\u6b63：<\/p>\n

Focus\u3002<\/p>\n

\u5168\u90e8：<\/p>\n

\u96c6\u4e2d：<\/p>\n

\u7ba1\u7406：<\/p>\n

FocusHub<\/p>\n

\u771f\u6b63：<\/p>\n

\u7ef4\u62a4：<\/p>\n

Current Focus<\/p>\n

Next Focus<\/p>\n

Tab Order<\/p>\n

\u6240\u4ee5：<\/p>\n

FrameNode\u3002<\/p>\n

\u4e0d\u7528：<\/p>\n

\u81ea\u5df1：<\/p>\n

\u5b9e\u73b0\u3002<\/p>\n

\u7126\u70b9\u3002<\/p>\n

\n

LayoutProperty<\/h2>\n

\u6765\u770b：<\/p>\n

.width(200)<\/p>\n

.height(100)<\/p>\n

.margin(10)<\/p>\n

\u771f\u6b63：<\/p>\n

\u4fdd\u5b58：<\/p>\n

LayoutProperty<\/p>\n

\u91cc\u9762：<\/p>\n

\u66f4\u63a5\u8fd1：<\/p>\n

width<\/p>\n

height<\/p>\n

margin<\/p>\n

padding<\/p>\n

constraint<\/p>\n

\u6ce8\u610f：<\/p>\n

\u8fd9\u91cc\u53ea\u662f：<\/p>\n

\u5c5e\u6027\u3002<\/p>\n

\u6ca1\u6709：<\/p>\n

\u771f\u6b63：<\/p>\n

\u8ba1\u7b97\u3002<\/p>\n

\n

GeometryNode<\/h2>\n

\u771f\u6b63：<\/p>\n

Layout\u3002<\/p>\n

\u5b8c\u6210\u3002<\/p>\n

\u4ee5\u540e\u3002<\/p>\n

\u751f\u6210：<\/p>\n

GeometryNode<\/p>\n

\u4f8b\u5982：<\/p>\n

x=20<\/p>\n

y=50<\/p>\n

width=180<\/p>\n

height=100<\/p>\n

\u771f\u6b63：<\/p>\n

Render\u3002<\/p>\n

\u9636\u6bb5\u3002<\/p>\n

\u5168\u90e8：<\/p>\n

\u8bfb\u53d6：<\/p>\n

GeometryNode\u3002<\/p>\n

\u4e0d\u662f：<\/p>\n

LayoutProperty\u3002<\/p>\n

\u4e3a\u4ec0\u4e48？<\/p>\n

\u56e0\u4e3a：<\/p>\n

\u771f\u6b63：<\/p>\n

\u5c3a\u5bf8\u3002<\/p>\n

\u53ef\u80fd：<\/p>\n

\u5df2\u7ecf：<\/p>\n

\u53d1\u751f：<\/p>\n

\u53d8\u5316\u3002<\/p>\n

\n

PaintProperty<\/h2>\n

\u4f8b\u5982：<\/p>\n

.backgroundColor()<\/p>\n

.borderRadius()<\/p>\n

.opacity()<\/p>\n

.shadow()<\/p>\n

\u771f\u6b63：<\/p>\n

\u4fdd\u5b58：<\/p>\n

PaintProperty<\/p>\n

Paint\u3002<\/p>\n

\u9636\u6bb5\u3002<\/p>\n

\u76f4\u63a5：<\/p>\n

\u8bfb\u53d6\u3002<\/p>\n

Layout\u3002<\/p>\n

\u5b8c\u5168：<\/p>\n

\u4e0d\u7528：<\/p>\n

\u5173\u5fc3\u3002<\/p>\n

\n

RenderContext<\/h2>\n

\u8fd9\u662f：<\/p>\n

\u5f88\u591a\u6559\u7a0b：<\/p>\n

\u51e0\u4e4e：<\/p>\n

\u4e0d\u4f1a：<\/p>\n

\u8bb2：<\/p>\n

\u7684：<\/p>\n

\u5bf9\u8c61\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

FrameNode\u3002<\/p>\n

\u6700\u540e：<\/p>\n

\u771f\u6b63：<\/p>\n

\u8fde\u63a5：<\/p>\n

RenderService\u3002<\/p>\n

\u5c31\u662f：<\/p>\n

RenderContext<\/p>\n

\u5b83\u91cc\u9762：<\/p>\n

\u901a\u5e38\u7ef4\u62a4：<\/p>\n

Transform<\/p>\n

Opacity<\/p>\n

Clip<\/p>\n

Matrix<\/p>\n

Animation<\/p>\n

RenderLayer<\/p>\n

RenderContext\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

\u751f\u6210：<\/p>\n

RenderNode\u3002<\/p>\n

\u7136\u540e：<\/p>\n

\u53d1\u9001：<\/p>\n

\u7ed9：<\/p>\n

RenderService\u3002<\/p>\n

\n

FrameNode \u751f\u547d\u5468\u671f<\/h2>\n

\u4e00\u4e2a FrameNode \u4ece\u521b\u5efa\u5230\u9500\u6bc1，\u5927\u81f4\u4f1a\u7ecf\u5386\u4e0b\u9762\u51e0\u4e2a\u9636\u6bb5：<\/p>\n

Create<\/p>\n

\u2193<\/p>\n

Attach Pattern<\/p>\n

\u2193<\/p>\n

Attach EventHub<\/p>\n

\u2193<\/p>\n

Attach LayoutProperty<\/p>\n

\u2193<\/p>\n

Build Finish<\/p>\n

\u2193<\/p>\n

Measure<\/p>\n

\u2193<\/p>\n

Layout<\/p>\n

\u2193<\/p>\n

Paint<\/p>\n

\u2193<\/p>\n

Render<\/p>\n

\u2193<\/p>\n

Detach<\/p>\n

\u2193<\/p>\n

Destroy<\/p>\n

\u9700\u8981\u6ce8\u610f\u7684\u662f：<\/p>\n

FrameNode \u7684\u751f\u547d\u5468\u671f\u5e76\u4e0d\u4e00\u5b9a\u4e0e Component \u5b8c\u5168\u4e00\u81f4\u3002<\/p>\n

\u4f8b\u5982：<\/p>\n

\u5728\u5217\u8868\u590d\u7528（Reuse）\u573a\u666f\u4e0b：<\/p>\n

Item \u6ed1\u51fa\u5c4f\u5e55<\/p>\n

\u2193<\/p>\n

\u8fdb\u5165 Reuse Pool<\/p>\n

\u2193<\/p>\n

\u4fee\u6539\u7ed1\u5b9a\u6570\u636e<\/p>\n

\u2193<\/p>\n

\u91cd\u65b0 Attach<\/p>\n

\u2193<\/p>\n

\u7ee7\u7eed\u4f7f\u7528<\/p>\n

\u6574\u4e2a\u8fc7\u7a0b\u4e2d：<\/p>\n

FrameNode\u3002<\/p>\n

\u6ca1\u6709：<\/p>\n

Destroy\u3002<\/p>\n

\u53ea\u662f：<\/p>\n

\u91cd\u65b0：<\/p>\n

\u7ed1\u5b9a\u3002<\/p>\n

\u8fd9\u4e5f\u662f：<\/p>\n

LazyForEach\u3002<\/p>\n

\u6027\u80fd：<\/p>\n

\u6781\u9ad8\u3002<\/p>\n

\u7684\u91cd\u8981：<\/p>\n

\u539f\u56e0\u3002<\/p>\n

\n

FrameNode \u4e3a\u4ec0\u4e48\u80fd\u652f\u6491\u6574\u4e2a ArkUI？<\/h2>\n

\u56e0\u4e3a：<\/p>\n

\u5b83\u4e0d\u662f：<\/p>\n

\u67d0\u4e00\u4e2a：<\/p>\n

\u7ec4\u4ef6\u3002<\/p>\n

\u800c\u662f：<\/p>\n

\u6574\u4e2a：<\/p>\n

UI\u3002<\/p>\n

\u6700\u5c0f：<\/p>\n

\u8fd0\u884c：<\/p>\n

\u5355\u5143\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

ArkUI Runtime\u3002<\/p>\n

\u51e0\u4e4e：<\/p>\n

\u6240\u6709：<\/p>\n

\u7cfb\u7edf\u3002<\/p>\n

\u6700\u7ec8：<\/p>\n

\u90fd：<\/p>\n

\u56f4\u7ed5：<\/p>\n

FrameNode\u3002<\/p>\n

\u5c55\u5f00：<\/p>\n

State<\/p>\n

\u2193<\/p>\n

FrameNode<\/p>\n

\u2193<\/p>\n

Layout<\/p>\n

\u2193<\/p>\n

Paint<\/p>\n

\u2193<\/p>\n

Event<\/p>\n

\u2193<\/p>\n

Animation<\/p>\n

\u2193<\/p>\n

Accessibility<\/p>\n

\u2193<\/p>\n

RenderService<\/p>\n

\u6240\u4ee5：<\/p>\n

\u7406\u89e3：<\/p>\n

FrameNode\u3002<\/p>\n

\u57fa\u672c：<\/p>\n

\u5c31\u7406\u89e3\u4e86：<\/p>\n

ArkUI\u3002<\/p>\n

\u6574\u4e2a：<\/p>\n

\u8fd0\u884c：<\/p>\n

\u673a\u5236\u3002<\/p>\n

Pattern \u6e90\u7801\u7ea7\u6df1\u5ea6\u89e3\u6790（\u4e00）\u2014\u2014 \u4e3a\u4ec0\u4e48 ArkUI \u4e0d\u7528\u7ee7\u627f，\u800c\u9009\u62e9 Pattern？<\/h2>\n

\u4e0a\u4e00\u7bc7\u6211\u4eec\u5df2\u7ecf\u77e5\u9053：<\/p>\n

\u6574\u4e2a ArkUI Runtime \u7684\u6838\u5fc3\u5bf9\u8c61\u662f：<\/p>\n

FrameNode<\/p>\n

\u4f46\u662f：<\/p>\n

\u771f\u6b63\u51b3\u5b9a：<\/p>\n

Button \u4e3a\u4ec0\u4e48\u80fd\u70b9\u51fb？<\/p>\n

Text \u4e3a\u4ec0\u4e48\u80fd\u663e\u793a\u6587\u5b57？<\/p>\n

List \u4e3a\u4ec0\u4e48\u80fd\u6eda\u52a8？<\/p>\n

Swiper \u4e3a\u4ec0\u4e48\u80fd\u6ed1\u52a8？<\/p>\n

\u5e76\u4e0d\u662f：<\/p>\n

FrameNode<\/p>\n

\u800c\u662f：<\/p>\n

Pattern<\/p>\n

\u53ef\u4ee5\u8bf4：<\/p>\n

FrameNode \u662f\u8eab\u4f53\u3002Pattern \u624d\u662f\u7075\u9b42\u3002<\/p>\n

\n

\u4e00\u4e2a Button \u5230\u5e95\u662f\u4ec0\u4e48？<\/h2>\n

\u5f00\u53d1\u8005\u5199：<\/p>\n

Button("\u767b\u5f55")<\/p>\n

\u5f88\u591a\u4eba\u8ba4\u4e3a：<\/p>\n

Runtime \u521b\u5efa：<\/p>\n

Button<\/p>\n

\u5b9e\u9645\u4e0a：<\/p>\n

\u771f\u6b63\u521b\u5efa\u7684\u662f：<\/p>\n

FrameNode<\/p>\n

\u2502<\/p>\n

\u25bc<\/p>\n

ButtonPattern<\/p>\n

FrameNode \u8d1f\u8d23：<\/p>\n

\u751f\u547d\u5468\u671f<\/p>\n

\u6811\u7ed3\u6784<\/p>\n

\u5c5e\u6027\u7ba1\u7406<\/p>\n

ButtonPattern \u8d1f\u8d23：<\/p>\n

\u70b9\u51fb<\/p>\n

Hover<\/p>\n

\u6309\u538b<\/p>\n

\u7126\u70b9<\/p>\n

\u52a8\u753b<\/p>\n

\u72b6\u6001\u5207\u6362<\/p>\n

\n

\u4e3a\u4ec0\u4e48\u4e0d\u7528\u7ee7\u627f？<\/h2>\n

\u5f88\u591a UI \u6846\u67b6：<\/p>\n

\u90fd\u662f：<\/p>\n

View<\/p>\n

\u2502<\/p>\n

\u251c\u2500\u2500TextView<\/p>\n

\u251c\u2500\u2500ButtonView<\/p>\n

\u251c\u2500\u2500ImageView<\/p>\n

\u2514\u2500\u2500ListView<\/p>\n

HarmonyOS \u6ca1\u6709\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

\u66f4\u63a5\u8fd1：<\/p>\n

FrameNode<\/p>\n

+<\/p>\n

Pattern<\/p>\n

\u4e3a\u4ec0\u4e48？<\/p>\n

\u56e0\u4e3a：<\/p>\n

\u7ee7\u627f\u8d8a\u6765\u8d8a\u6df1\u3002<\/p>\n

\u4f8b\u5982：<\/p>\n

View<\/p>\n

\u2193<\/p>\n

ScrollableView<\/p>\n

\u2193<\/p>\n

ListView<\/p>\n

\u2193<\/p>\n

WaterFlowView<\/p>\n

\u2193<\/p>\n

GridView<\/p>\n

\u7ef4\u62a4：<\/p>\n

\u8d8a\u6765\u8d8a\u56f0\u96be\u3002<\/p>\n

ArkUI\u3002<\/p>\n

\u91c7\u7528：<\/p>\n

\u7ec4\u5408\u3002<\/p>\n

\u800c\u4e0d\u662f：<\/p>\n

\u7ee7\u627f\u3002<\/p>\n

\n

Runtime \u521b\u5efa\u6d41\u7a0b<\/h2>\n

\u4f8b\u5982：<\/p>\n

Button("\u767b\u5f55")<\/p>\n

\u771f\u6b63：<\/p>\n

Runtime\u3002<\/p>\n

\u6d41\u7a0b：<\/p>\n

ButtonModel<\/p>\n

\u2193<\/p>\n

PatternFactory<\/p>\n

\u2193<\/p>\n

Create ButtonPattern<\/p>\n

\u2193<\/p>\n

Create FrameNode<\/p>\n

\u2193<\/p>\n

Attach Pattern<\/p>\n

\u2193<\/p>\n

Return FrameNode<\/p>\n

\u6ce8\u610f：<\/p>\n

\u771f\u6b63：<\/p>\n

\u521b\u5efa：<\/p>\n

Pattern\u3002<\/p>\n

\u53d1\u751f\u5728：<\/p>\n

FrameNode\u3002<\/p>\n

\u4e4b\u524d\u3002<\/p>\n

\n

PatternFactory<\/h2>\n

ACE Engine\u3002<\/p>\n

\u91cc\u9762\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

\u5b58\u5728：<\/p>\n

\u7c7b\u4f3c：<\/p>\n

PatternFactory<\/p>\n

\u4f8b\u5982：<\/p>\n

switch(type){<\/p>\n

TEXT<\/p>\n

\u2193<\/p>\n

new TextPattern()<\/p>\n

BUTTON<\/p>\n

\u2193<\/p>\n

new ButtonPattern()<\/p>\n

IMAGE<\/p>\n

\u2193<\/p>\n

new ImagePattern()<\/p>\n

LIST<\/p>\n

\u2193<\/p>\n

new ListPattern()<\/p>\n

}<\/p>\n

\u6240\u4ee5：<\/p>\n

FrameNode\u3002<\/p>\n

\u672c\u8eab：<\/p>\n

\u4e0d\u77e5\u9053：<\/p>\n

\u81ea\u5df1：<\/p>\n

\u662f\u4ec0\u4e48：<\/p>\n

\u7ec4\u4ef6\u3002<\/p>\n

\u5b83\u53ea\u77e5\u9053：<\/p>\n

\u6211\u6709\u4e00\u4e2a：<\/p>\n

Pattern<\/p>\n

\n

Pattern \u5185\u90e8\u7ed3\u6784<\/h2>\n

\u771f\u6b63：<\/p>\n

Pattern\u3002<\/p>\n

\u8fdc\u6bd4：<\/p>\n

\u6559\u7a0b：<\/p>\n

\u590d\u6742\u3002<\/p>\n

\u62bd\u8c61\u4ee5\u540e：<\/p>\n

class Pattern{<\/p>\n

public:<\/p>\n

virtual OnAttach();<\/p>\n

virtual OnDetach();<\/p>\n

virtual OnModifyDone();<\/p>\n

virtual Measure();<\/p>\n

virtual Layout();<\/p>\n

virtual Paint();<\/p>\n

virtual OnDirtyLayout();<\/p>\n

virtual OnDirtyPaint();<\/p>\n

}<\/p>\n

\u51e0\u4e4e：<\/p>\n

\u6bcf\u4e00\u4e2a：<\/p>\n

\u751f\u547d\u5468\u671f\u3002<\/p>\n

\u90fd\u6709：<\/p>\n

Hook\u3002<\/p>\n

\n

OnAttach<\/h2>\n

\u771f\u6b63：<\/p>\n

FrameNode\u3002<\/p>\n

\u7b2c\u4e00\u6b21：<\/p>\n

\u521b\u5efa\u3002<\/p>\n

\u8c03\u7528：<\/p>\n

Create FrameNode<\/p>\n

\u2193<\/p>\n

Attach Pattern<\/p>\n

\u2193<\/p>\n

OnAttach()<\/p>\n

\u4f8b\u5982：<\/p>\n

Button\u3002<\/p>\n

\u8fd9\u91cc：<\/p>\n

\u521d\u59cb\u5316：<\/p>\n

Gesture<\/p>\n

Theme<\/p>\n

Animation<\/p>\n

Click<\/p>\n

\u4e0d\u662f：<\/p>\n

Constructor\u3002<\/p>\n

\u91cc\u9762\u3002<\/p>\n

\n

\u4e3a\u4ec0\u4e48\u4e0d\u7528\u6784\u9020\u51fd\u6570？<\/h2>\n

\u56e0\u4e3a：<\/p>\n

Constructor\u3002<\/p>\n

\u65f6\u5019：<\/p>\n

FrameNode\u3002<\/p>\n

\u8fd8\u6ca1：<\/p>\n

\u51c6\u5907\u3002<\/p>\n

\u5b8c\u6210\u3002<\/p>\n

\u4f8b\u5982：<\/p>\n

ButtonPattern()<\/p>\n

\u91cc\u9762\u3002<\/p>\n

\u62ff\u4e0d\u5230：<\/p>\n

FrameNode<\/p>\n

Context<\/p>\n

Theme<\/p>\n

\u771f\u6b63：<\/p>\n

\u521d\u59cb\u5316\u3002<\/p>\n

\u5fc5\u987b：<\/p>\n

\u7b49：<\/p>\n

OnAttach()<\/p>\n

\n

OnModifyDone \u662f\u4ec0\u4e48？<\/h2>\n

\u8fd9\u662f：<\/p>\n

\u5f88\u591a\u4eba：<\/p>\n

\u7b2c\u4e00\u6b21：<\/p>\n

\u770b：<\/p>\n

ACE Engine\u3002<\/p>\n

\u90fd\u4f1a：<\/p>\n

\u7591\u60d1\u3002<\/p>\n

\u4f8b\u5982：<\/p>\n

\u5f00\u53d1\u8005：<\/p>\n

Button("\u767b\u5f55")
\n.width(200)
\n.backgroundColor(Color.Red)<\/p>\n

\u771f\u6b63：<\/p>\n

\u5c5e\u6027：<\/p>\n

\u66f4\u65b0：<\/p>\n

\u4ee5\u540e：<\/p>\n

\u8c03\u7528：<\/p>\n

OnModifyDone()<\/p>\n

\u4ec0\u4e48\u610f\u601d？<\/p>\n

\u5c31\u662f：<\/p>\n

\u6240\u6709：<\/p>\n

Property\u3002<\/p>\n

\u5df2\u7ecf：<\/p>\n

\u4fee\u6539\u3002<\/p>\n

\u5b8c\u6210\u3002<\/p>\n

\u73b0\u5728\u3002<\/p>\n

Pattern\u3002<\/p>\n

\u53ef\u4ee5：<\/p>\n

\u7edf\u4e00：<\/p>\n

\u5904\u7406\u3002<\/p>\n

\n

\u4e3a\u4ec0\u4e48\u9700\u8981 OnModifyDone？<\/h2>\n

\u4f8b\u5982：<\/p>\n

Button：<\/p>\n

\u5bbd：<\/p>\n

\u6539\u53d8：<\/p>\n

100<\/p>\n

\u2193<\/p>\n

200<\/p>\n

\u989c\u8272：<\/p>\n

\u6539\u53d8：<\/p>\n

Blue<\/p>\n

\u2193<\/p>\n

Red<\/p>\n

\u5982\u679c：<\/p>\n

\u6bcf\u4e00\u6b21：<\/p>\n

Property\u3002<\/p>\n

\u4fee\u6539：<\/p>\n

\u90fd：<\/p>\n

\u91cd\u65b0：<\/p>\n

\u521d\u59cb\u5316\u3002<\/p>\n

\u6027\u80fd\u3002<\/p>\n

\u6781\u5dee\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

Runtime\u3002<\/p>\n

\u91c7\u7528：<\/p>\n

Collect Property<\/p>\n

\u2193<\/p>\n

\u5168\u90e8\u5b8c\u6210<\/p>\n

\u2193<\/p>\n

OnModifyDone()<\/p>\n

\u4e00\u6b21：<\/p>\n

\u5904\u7406\u3002<\/p>\n

\n

ButtonPattern \u505a\u4ec0\u4e48？<\/h2>\n

\u771f\u6b63：<\/p>\n

OnModifyDone\u3002<\/p>\n

\u91cc\u9762：<\/p>\n

\u53ef\u80fd：<\/p>\n

\u6267\u884c：<\/p>\n

Update Theme<\/p>\n

\u2193<\/p>\n

Update Background<\/p>\n

\u2193<\/p>\n

Update Radius<\/p>\n

\u2193<\/p>\n

Update ClickArea<\/p>\n

\u2193<\/p>\n

Mark Paint Dirty<\/p>\n

\u6240\u4ee5：<\/p>\n

\u5f00\u53d1\u8005：<\/p>\n

\u4fee\u6539：<\/p>\n

\u4e00\u4e2a：<\/p>\n

Property\u3002<\/p>\n

\u4e0d\u4f1a：<\/p>\n

\u7acb\u5373：<\/p>\n

\u5237\u65b0\u3002<\/p>\n

\n

Measure<\/h2>\n

\u771f\u6b63：<\/p>\n

Layout\u3002<\/p>\n

\u5f00\u59cb：<\/p>\n

\u8c03\u7528：<\/p>\n

FrameScheduler<\/p>\n

\u2193<\/p>\n

Measure()<\/p>\n

ButtonPattern\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

\u8ba1\u7b97：<\/p>\n

\u4f8b\u5982：<\/p>\n

Text Width<\/p>\n

Padding<\/p>\n

Border<\/p>\n

Icon<\/p>\n

Content<\/p>\n

\u6700\u540e：<\/p>\n

\u5f97\u5230：<\/p>\n

Desired Size<\/p>\n

\n

Layout<\/h2>\n

\u5f88\u591a\u4eba\u3002<\/p>\n

\u8ba4\u4e3a：<\/p>\n

Measure\u3002<\/p>\n

\u5c31：<\/p>\n

\u5e03\u5c40\u3002<\/p>\n

\u5176\u5b9e：<\/p>\n

\u4e0d\u662f\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

Measure：<\/p>\n

\u8d1f\u8d23：<\/p>\n

\u6211\u8981：<\/p>\n

\u591a\u5927？<\/p>\n

Layout：<\/p>\n

\u8d1f\u8d23：<\/p>\n

\u6211：<\/p>\n

\u653e：<\/p>\n

\u54ea\u91cc？<\/p>\n

\u4f8b\u5982：<\/p>\n

Button：<\/p>\n

\u6700\u7ec8：<\/p>\n

\u5f97\u5230：<\/p>\n

x<\/p>\n

y<\/p>\n

width<\/p>\n

height<\/p>\n

\n

Paint<\/h2>\n

\u771f\u6b63：<\/p>\n

Paint\u3002<\/p>\n

\u9636\u6bb5：<\/p>\n

ButtonPattern\u3002<\/p>\n

\u4e0d\u4f1a：<\/p>\n

\u81ea\u5df1：<\/p>\n

\u753b\u3002<\/p>\n

\u800c\u662f：<\/p>\n

\u751f\u6210：<\/p>\n

PaintMethod<\/p>\n

\u771f\u6b63：<\/p>\n

\u7ed8\u5236\u3002<\/p>\n

\u4ea4\u7ed9：<\/p>\n

RenderContext<\/p>\n

\u2193<\/p>\n

RenderNode<\/p>\n

\u2193<\/p>\n

RenderService<\/p>\n

Pattern\u3002<\/p>\n

\u53ea\u662f：<\/p>\n

\u63cf\u8ff0：<\/p>\n

\u600e\u4e48：<\/p>\n

\u753b\u3002<\/p>\n

\n

TextPattern<\/h2>\n

Text\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

Pattern\u3002<\/p>\n

\u8d1f\u8d23：<\/p>\n

\u5b57\u4f53<\/p>\n

\u5b57\u4f53\u5927\u5c0f<\/p>\n

\u6362\u884c<\/p>\n

\u7701\u7565\u53f7<\/p>\n

Baseline<\/p>\n

RichText<\/p>\n

Emoji<\/p>\n

Bidi<\/p>\n

RTL<\/p>\n

\u6240\u4ee5：<\/p>\n

TextPattern\u3002<\/p>\n

\u5176\u5b9e：<\/p>\n

\u6bd4：<\/p>\n

ButtonPattern\u3002<\/p>\n

\u590d\u6742\u3002<\/p>\n

\u5f88\u591a\u3002<\/p>\n

\n

ImagePattern<\/h2>\n

\u771f\u6b63：<\/p>\n

\u8d1f\u8d23：<\/p>\n

ImageSource<\/p>\n

PixelMap<\/p>\n

Decode<\/p>\n

Cache<\/p>\n

Resize<\/p>\n

FitMode<\/p>\n

Repeat<\/p>\n

Animation Image<\/p>\n

\u5f88\u591a：<\/p>\n

\u56fe\u7247\u3002<\/p>\n

\u6027\u80fd\u3002<\/p>\n

\u4f18\u5316\u3002<\/p>\n

\u5176\u5b9e：<\/p>\n

\u90fd：<\/p>\n

\u5728：<\/p>\n

ImagePattern\u3002<\/p>\n

\u91cc\u9762\u3002<\/p>\n

\n

ScrollPattern<\/h2>\n

\u771f\u6b63：<\/p>\n

Scroll\u3002<\/p>\n

\u51e0\u4e4e：<\/p>\n

\u5168\u90e8：<\/p>\n

\u903b\u8f91：<\/p>\n

\u90fd：<\/p>\n

\u8fd9\u91cc\u3002<\/p>\n

\u4f8b\u5982：<\/p>\n

Velocity<\/p>\n

Fling<\/p>\n

EdgeEffect<\/p>\n

Spring<\/p>\n

Overscroll<\/p>\n

ScrollBar<\/p>\n

FrameNode\u3002<\/p>\n

\u5b8c\u5168：<\/p>\n

\u4e0d\u77e5\u9053：<\/p>\n

\u4ec0\u4e48：<\/p>\n

\u53eb：<\/p>\n

\u6eda\u52a8\u3002<\/p>\n

\n

ListPattern<\/h2>\n

\u771f\u6b63：<\/p>\n

\u590d\u6742：<\/p>\n

\u7a0b\u5ea6：<\/p>\n

\u8fdc\u8d85：<\/p>\n

Button\u3002<\/p>\n

\u4f8b\u5982：<\/p>\n

\u8d1f\u8d23：<\/p>\n

Reuse<\/p>\n

Recycle<\/p>\n

Cache<\/p>\n

Sticky<\/p>\n

Lazy<\/p>\n

Visible<\/p>\n

Index<\/p>\n

EstimateHeight<\/p>\n

\u4e5f\u5c31\u662f\u8bf4：<\/p>\n

\u771f\u6b63：<\/p>\n

\u5217\u8868\u3002<\/p>\n

\u6027\u80fd\u3002<\/p>\n

\u5168\u90e8：<\/p>\n

\u96c6\u4e2d：<\/p>\n

\u5728：<\/p>\n

ListPattern<\/p>\n

\n

Pattern \u4e3a\u4ec0\u4e48\u6ca1\u6709\u4fdd\u5b58\u5c5e\u6027？<\/h2>\n

\u4f8b\u5982：<\/p>\n

.width(200)<\/p>\n

\u5f88\u591a\u4eba\u3002<\/p>\n

\u89c9\u5f97：<\/p>\n

ButtonPattern\u3002<\/p>\n

\u4fdd\u5b58：<\/p>\n

200\u3002<\/p>\n

\u5b9e\u9645\u4e0a：<\/p>\n

\u4e0d\u662f\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

\u4fdd\u5b58：<\/p>\n

\u5728：<\/p>\n

LayoutProperty<\/p>\n

Pattern\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

\u8bfb\u53d6：<\/p>\n

GetLayoutProperty()<\/p>\n

\u8fd9\u6837：<\/p>\n

\u6240\u6709：<\/p>\n

\u7ec4\u4ef6\u3002<\/p>\n

\u7edf\u4e00：<\/p>\n

\u7ba1\u7406：<\/p>\n

Property\u3002<\/p>\n

\n

Pattern \u5982\u4f55\u8bbf\u95ee FrameNode？<\/h2>\n

\u771f\u6b63：<\/p>\n

Pattern\u3002<\/p>\n

\u5185\u90e8：<\/p>\n

\u7ef4\u62a4：<\/p>\n

WeakPtr<FrameNode><\/p>\n

\u4e3a\u4ec0\u4e48：<\/p>\n

WeakPtr？<\/p>\n

\u56e0\u4e3a：<\/p>\n

FrameNode\u3002<\/p>\n

\u62e5\u6709：<\/p>\n

Pattern\u3002<\/p>\n

\u5982\u679c：<\/p>\n

Pattern\u3002<\/p>\n

\u518d：<\/p>\n

\u5f3a\u5f15\u7528：<\/p>\n

FrameNode\u3002<\/p>\n

\u5c31\u4f1a：<\/p>\n

FrameNode<\/p>\n

\u2193<\/p>\n

Pattern<\/p>\n

\u2193<\/p>\n

FrameNode<\/p>\n

\u5faa\u73af：<\/p>\n

\u5f15\u7528\u3002<\/p>\n

GC\u3002<\/p>\n

\u65e0\u6cd5：<\/p>\n

\u91ca\u653e\u3002<\/p>\n

\u6240\u4ee5：<\/p>\n

ACE Engine\u3002<\/p>\n

\u8fd9\u91cc：<\/p>\n

\u5168\u90e8：<\/p>\n

\u91c7\u7528：<\/p>\n

WeakPtr<\/p>\n

\n

Pattern \u751f\u547d\u5468\u671f<\/h2>\n

\u5b8c\u6574：<\/p>\n

\u6d41\u7a0b：<\/p>\n

Create<\/p>\n

\u2193<\/p>\n

Attach<\/p>\n

\u2193<\/p>\n

OnAttach()<\/p>\n

\u2193<\/p>\n

Property Update<\/p>\n

\u2193<\/p>\n

OnModifyDone()<\/p>\n

\u2193<\/p>\n

Measure()<\/p>\n

\u2193<\/p>\n

Layout()<\/p>\n

\u2193<\/p>\n

Paint()<\/p>\n

\u2193<\/p>\n

Detach()<\/p>\n

\u2193<\/p>\n

Destroy()<\/p>\n

\u5176\u4e2d：<\/p>\n

OnModifyDone()<\/p>\n

\u662f：<\/p>\n

ArkUI\u3002<\/p>\n

\u533a\u522b\u4e8e：<\/p>\n

\u5f88\u591a：<\/p>\n

UI\u3002<\/p>\n

\u6846\u67b6\u3002<\/p>\n

\u6700\u91cd\u8981：<\/p>\n

Hook\u3002<\/p>\n

\n

\u4e3a\u4ec0\u4e48 Pattern \u662f ArkUI \u6700\u5927\u521b\u65b0？<\/h2>\n

\u4f20\u7edf：<\/p>\n

Android：<\/p>\n

Button<\/p>\n

\u8d1f\u8d23：<\/p>\n

\u5e03\u5c40<\/p>\n

\u7ed8\u5236<\/p>\n

\u4e8b\u4ef6<\/p>\n

\u52a8\u753b<\/p>\n

\u4e00\u4e2a：<\/p>\n

\u7c7b\u3002<\/p>\n

\u51e0\u5343：<\/p>\n

\u884c\u3002<\/p>\n

ArkUI：<\/p>\n

\u771f\u6b63：<\/p>\n

\u62c6\u6210：<\/p>\n

FrameNode<\/p>\n

\u2193<\/p>\n

Pattern<\/p>\n

\u2193<\/p>\n

LayoutProperty<\/p>\n

\u2193<\/p>\n

PaintProperty<\/p>\n

\u2193<\/p>\n

GeometryNode<\/p>\n

\u2193<\/p>\n

EventHub<\/p>\n

\u2193<\/p>\n

RenderContext<\/p>\n

\u6bcf\u4e00\u4e2a：<\/p>\n

\u5bf9\u8c61\u3002<\/p>\n

\u804c\u8d23：<\/p>\n

\u975e\u5e38：<\/p>\n

\u5355\u4e00\u3002<\/p>\n

\u8fd9\u5c31\u662f：<\/p>\n

ACE Engine\u3002<\/p>\n

\u4e3a\u4ec0\u4e48：<\/p>\n

\u6e90\u7801\u3002<\/p>\n

\u975e\u5e38：<\/p>\n

\u5bb9\u6613：<\/p>\n

\u7ef4\u62a4\u3002<\/p>\n

\n

Pattern \u5728\u6574\u4e2a Runtime \u4e2d\u7684\u4f4d\u7f6e<\/h2>\n

\u6574\u4e2a ArkUI Runtime \u53ef\u4ee5\u62bd\u8c61\u6210：<\/p>\n

Build()<\/p>\n

\u2193<\/p>\n

FrameNode<\/p>\n

\u2193<\/p>\n

Pattern<\/p>\n

\u251c\u2500\u2500Measure()<\/p>\n

\u251c\u2500\u2500Layout()<\/p>\n

\u251c\u2500\u2500Paint()<\/p>\n

\u251c\u2500\u2500Event<\/p>\n

\u2514\u2500\u2500Animation<\/p>\n

\u2193<\/p>\n

RenderContext<\/p>\n

\u2193<\/p>\n

RenderNode<\/p>\n

\u2193<\/p>\n

RenderService<\/p>\n

\u2193<\/p>\n

GPU<\/p>\n

\u53ef\u4ee5\u770b\u5230：<\/p>\n

FrameNode \u7ba1\u7406\u751f\u547d\u5468\u671f，Pattern \u5b9e\u73b0\u7ec4\u4ef6\u884c\u4e3a，\u4e24\u8005\u5171\u540c\u7ec4\u6210\u4e86 ArkUI \u7684\u6838\u5fc3\u8fd0\u884c\u5355\u5143\u3002<\/p>\n

Layout \u6e90\u7801\u7ea7\u6df1\u5ea6\u89e3\u6790（\u4e00）\u2014\u2014 ArkUI \u4e3a\u4ec0\u4e48\u628a Measure \u548c Layout \u5206\u5f00？<\/h2>\n

\u524d\u9762，\u6211\u4eec\u5df2\u7ecf\u5206\u6790\u4e86：<\/p>\n

State<\/p>\n

\u2193<\/p>\n

Build()<\/p>\n

\u2193<\/p>\n

FrameNode<\/p>\n

\u2193<\/p>\n

Pattern<\/p>\n

\u5f88\u591a\u5f00\u53d1\u8005\u8ba4\u4e3a：<\/p>\n

\u63a5\u4e0b\u6765：<\/p>\n

\u5c31\u662f：<\/p>\n

Render<\/p>\n

\u5b9e\u9645\u4e0a\u3002<\/p>\n

\u4e0d\u662f\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

ArkUI\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

\u6267\u884c：<\/p>\n

Build<\/p>\n

\u2193<\/p>\n

Measure<\/p>\n

\u2193<\/p>\n

Layout<\/p>\n

\u2193<\/p>\n

Paint<\/p>\n

\u2193<\/p>\n

Render<\/p>\n

\u5f88\u591a\u4eba\u90fd\u4f1a\u95ee：<\/p>\n

\u4e3a\u4ec0\u4e48：<\/p>\n

\u8981：<\/p>\n

\u5206\u6210：<\/p>\n

Measure<\/p>\n

+<\/p>\n

Layout<\/p>\n

\u4e24\u4e2a：<\/p>\n

\u9636\u6bb5？<\/p>\n

Android\u3002<\/p>\n

\u8fd9\u6837\u3002<\/p>\n

Flutter\u3002<\/p>\n

\u8fd9\u6837\u3002<\/p>\n

Compose\u3002<\/p>\n

\u8fd9\u6837\u3002<\/p>\n

HarmonyOS\u3002<\/p>\n

\u4e5f\u662f：<\/p>\n

\u8fd9\u6837\u3002<\/p>\n

\u771f\u6b63\u3002<\/p>\n

\u539f\u56e0\u3002<\/p>\n

\u53ea\u6709：<\/p>\n

\u4e00\u4e2a\u3002<\/p>\n

\u4e0d\u77e5\u9053\u5b50\u7ec4\u4ef6\u6709\u591a\u5927，\u5c31\u4e0d\u77e5\u9053\u81ea\u5df1\u5e94\u8be5\u6709\u591a\u5927；\u4e0d\u77e5\u9053\u81ea\u5df1\u6700\u7ec8\u6709\u591a\u5927，\u4e5f\u5c31\u65e0\u6cd5\u51b3\u5b9a\u5b50\u7ec4\u4ef6\u5e94\u8be5\u653e\u5728\u54ea\u91cc\u3002<\/p>\n

\u56e0\u6b64\u3002<\/p>\n

\u5e03\u5c40\u5fc5\u987b\u62c6\u6210\u4e24\u4e2a\u5b8c\u5168\u4e0d\u540c\u7684\u9636\u6bb5\u3002<\/p>\n

\n

\u4e00\u4e2a\u6700\u7b80\u5355\u4f8b\u5b50<\/h2>\n

\u4f8b\u5982：<\/p>\n

Column() {<\/p>\n

Text("HarmonyOS")<\/p>\n

Button("\u767b\u5f55")<\/p>\n

}<\/p>\n

\u5f88\u591a\u4eba\u3002<\/p>\n

\u8ba4\u4e3a\u3002<\/p>\n

Runtime\u3002<\/p>\n

\u6267\u884c：<\/p>\n

Text<\/p>\n

\u2193<\/p>\n

Button<\/p>\n

\u2193<\/p>\n

\u7ed3\u675f<\/p>\n

\u5b9e\u9645\u4e0a\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

\u6267\u884c：<\/p>\n

Measure<\/p>\n

\u2193<\/p>\n

Layout<\/p>\n

\u5b8c\u5168：<\/p>\n

\u4e24\u6b21\u3002<\/p>\n

\u904d\u5386\u3002<\/p>\n

\n

\u4ec0\u4e48\u662f Measure？<\/h2>\n

\u4e00\u53e5\u8bdd：<\/p>\n

Measure<\/p>\n

\u2193<\/p>\n

\u6211\u8981\u591a\u5927？<\/p>\n

\u4f8b\u5982：<\/p>\n

Text("HarmonyOS")<\/p>\n

\u771f\u6b63：<\/p>\n

Measure\u3002<\/p>\n

\u6267\u884c：<\/p>\n

\u5b57\u4f53\u5927\u5c0f<\/p>\n

\u2193<\/p>\n

\u6587\u5b57\u5bbd\u5ea6<\/p>\n

\u2193<\/p>\n

Padding<\/p>\n

\u2193<\/p>\n

Border<\/p>\n

\u2193<\/p>\n

Desired Size<\/p>\n

\u6700\u7ec8：<\/p>\n

\u5f97\u5230：<\/p>\n

width = 92<\/p>\n

height = 28<\/p>\n

\u8fd9\u91cc\u53ea\u662f：<\/p>\n

\u5e0c\u671b\u7684\u5927\u5c0f（Desired Size）\u3002<\/p>\n

\u4e0d\u662f：<\/p>\n

\u6700\u7ec8：<\/p>\n

\u5927\u5c0f\u3002<\/p>\n

\n

\u4ec0\u4e48\u662f Layout？<\/h2>\n

Layout\u3002<\/p>\n

\u4e00\u53e5\u8bdd：<\/p>\n

\u6211\u653e\u54ea\u91cc？<\/p>\n

\u4f8b\u5982：<\/p>\n

\u7236\u7ec4\u4ef6：<\/p>\n

\u5bbd：<\/p>\n

300<\/p>\n

Text：<\/p>\n

Measure：<\/p>\n

\u5f97\u5230：<\/p>\n

92<\/p>\n

Layout\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

\u8ba1\u7b97：<\/p>\n

x = 104<\/p>\n

y = 20<\/p>\n

\u56e0\u6b64\u3002<\/p>\n

Measure\u3002<\/p>\n

\u89e3\u51b3：<\/p>\n

\u5c3a\u5bf8\u3002<\/p>\n

Layout\u3002<\/p>\n

\u89e3\u51b3：<\/p>\n

\u4f4d\u7f6e\u3002<\/p>\n

\n

\u4e3a\u4ec0\u4e48\u4e0d\u80fd\u4e00\u6b21\u5b8c\u6210？<\/h2>\n

\u6765\u770b：<\/p>\n

Row() {<\/p>\n

Button()<\/p>\n

Button()<\/p>\n

}<\/p>\n

\u5047\u8bbe：<\/p>\n

\u7236\u7ec4\u4ef6：<\/p>\n

\u5bbd：<\/p>\n

400<\/p>\n

\u5982\u679c：<\/p>\n

\u4e0d\u77e5\u9053：<\/p>\n

\u4e24\u4e2a：<\/p>\n

Button：<\/p>\n

\u5bbd：<\/p>\n

\u591a\u5c11\u3002<\/p>\n

\u600e\u4e48：<\/p>\n

\u51b3\u5b9a：<\/p>\n

\u4f4d\u7f6e？<\/p>\n

\u6240\u4ee5：<\/p>\n

\u5fc5\u987b：<\/p>\n

\u5148：<\/p>\n

Measure：<\/p>\n

\u5f97\u5230：<\/p>\n

120<\/p>\n

100<\/p>\n

\u7136\u540e：<\/p>\n

Layout：<\/p>\n

\u5f97\u5230：<\/p>\n

Button1<\/p>\n

x=0<\/p>\n

Button2<\/p>\n

x=120<\/p>\n

\n

Constraint（\u7ea6\u675f）\u7cfb\u7edf<\/h2>\n

\u771f\u6b63：<\/p>\n

ArkUI\u3002<\/p>\n

\u5e03\u5c40\u3002<\/p>\n

\u4e0d\u662f：<\/p>\n

\u76f4\u63a5：<\/p>\n

\u8ba1\u7b97\u3002<\/p>\n

\u800c\u662f：<\/p>\n

\u4f9d\u8d56：<\/p>\n

LayoutConstraint<\/p>\n

\u51e0\u4e4e：<\/p>\n

\u6240\u6709：<\/p>\n

\u7ec4\u4ef6\u3002<\/p>\n

Measure\u3002<\/p>\n

\u90fd\u4f1a：<\/p>\n

\u6536\u5230：<\/p>\n

LayoutConstraint {<\/p>\n

minWidth<\/p>\n

maxWidth<\/p>\n

minHeight<\/p>\n

maxHeight<\/p>\n

}<\/p>\n

\u4f8b\u5982：<\/p>\n

\u7236\u7ec4\u4ef6：<\/p>\n

\u544a\u8bc9：<\/p>\n

\u5b50\u7ec4\u4ef6：<\/p>\n

\u6700\u5927：<\/p>\n

300<\/p>\n

\u5b50\u7ec4\u4ef6\u3002<\/p>\n

\u6c38\u8fdc：<\/p>\n

\u4e0d\u80fd：<\/p>\n

Measure：<\/p>\n

500<\/p>\n

\n

Constraint \u662f\u5982\u4f55\u4f20\u9012\u7684？<\/h2>\n

\u4f8b\u5982：<\/p>\n

Column() {<\/p>\n

Button()<\/p>\n

}<\/p>\n

\u771f\u6b63：<\/p>\n

\u6d41\u7a0b：<\/p>\n

Window<\/p>\n

\u2193<\/p>\n

Column<\/p>\n

\u2193<\/p>\n

Button<\/p>\n

\u6bcf\u4e00\u7ea7\u3002<\/p>\n

\u90fd\u4f1a：<\/p>\n

\u5411\u4e0b：<\/p>\n

\u4f20\u9012：<\/p>\n

Constraint\u3002<\/p>\n

\u4f8b\u5982：<\/p>\n

Window：<\/p>\n

maxWidth = 1080<\/p>\n

Column：<\/p>\n

\u6536\u5230：<\/p>\n

\u540e\u3002<\/p>\n

\u7ee7\u7eed：<\/p>\n

\u4f20\u7ed9：<\/p>\n

Button\u3002<\/p>\n

Button\u3002<\/p>\n

\u4e0d\u80fd：<\/p>\n

\u7a81\u7834：<\/p>\n

\u8fd9\u4e2a：<\/p>\n

\u9650\u5236\u3002<\/p>\n

\n

\u4e3a\u4ec0\u4e48 Constraint \u5f88\u91cd\u8981？<\/h2>\n

\u6765\u770b：<\/p>\n

Button()
\n.width(99999)<\/p>\n

\u5f88\u591a\u65b0\u4eba：<\/p>\n

\u8ba4\u4e3a：<\/p>\n

\u6309\u94ae：<\/p>\n

\u5bbd：<\/p>\n

99999\u3002<\/p>\n

\u5b9e\u9645\u4e0a：<\/p>\n

\u771f\u6b63：<\/p>\n

Measure：<\/p>\n

\u5f97\u5230：<\/p>\n

99999<\/p>\n

Constraint：<\/p>\n

\u7acb\u5373：<\/p>\n

\u4fee\u6b63：<\/p>\n

1080<\/p>\n

\u6700\u7ec8：<\/p>\n

Geometry：<\/p>\n

\u53ea\u6709：<\/p>\n

1080<\/p>\n

\u6240\u4ee5：<\/p>\n

Property\u3002<\/p>\n

\u4e0d\u662f：<\/p>\n

\u6700\u7ec8：<\/p>\n

\u7ed3\u679c\u3002<\/p>\n

Constraint\u3002<\/p>\n

\u624d：<\/p>\n

\u51b3\u5b9a：<\/p>\n

\u6700\u7ec8：<\/p>\n

\u5c3a\u5bf8\u3002<\/p>\n

\n

Measure \u7684\u771f\u6b63\u6d41\u7a0b<\/h2>\n

\u771f\u6b63：<\/p>\n

ACE Engine\u3002<\/p>\n

Measure\u3002<\/p>\n

\u5927\u81f4：<\/p>\n

\u5982\u4e0b：<\/p>\n

Receive Constraint<\/p>\n

\u2193<\/p>\n

Measure Children<\/p>\n

\u2193<\/p>\n

Calculate Self<\/p>\n

\u2193<\/p>\n

Return Size<\/p>\n

\u6ce8\u610f：<\/p>\n

\u771f\u6b63：<\/p>\n

Measure\u3002<\/p>\n

\u4e0d\u662f：<\/p>\n

\u53ea：<\/p>\n

\u8ba1\u7b97：<\/p>\n

\u81ea\u5df1\u3002<\/p>\n

\u5f88\u591a：<\/p>\n

\u7ec4\u4ef6\u3002<\/p>\n

\u5fc5\u987b：<\/p>\n

\u5148：<\/p>\n

Measure：<\/p>\n

\u5b50\u7ec4\u4ef6\u3002<\/p>\n

\n

Column Measure<\/h2>\n

\u4f8b\u5982：<\/p>\n

Column(){<\/p>\n

Text()<\/p>\n

Button()<\/p>\n

Image()<\/p>\n

}<\/p>\n

\u771f\u6b63：<\/p>\n

Measure：<\/p>\n

Measure Text<\/p>\n

\u2193<\/p>\n

Measure Button<\/p>\n

\u2193<\/p>\n

Measure Image<\/p>\n

\u2193<\/p>\n

Height Sum<\/p>\n

\u2193<\/p>\n

Width Max<\/p>\n

\u2193<\/p>\n

Return<\/p>\n

\u6700\u7ec8：<\/p>\n

Column：<\/p>\n

\u9ad8\u5ea6：<\/p>\n

\u7b49\u4e8e：<\/p>\n

\u6240\u6709：<\/p>\n

\u5b69\u5b50：<\/p>\n

\u9ad8\u5ea6：<\/p>\n

\u4e4b\u548c\u3002<\/p>\n

\n

Row Measure<\/h2>\n

\u771f\u6b63：<\/p>\n

\u7b97\u6cd5：<\/p>\n

\u5b8c\u5168：<\/p>\n

\u76f8\u53cd\u3002<\/p>\n

Measure Text<\/p>\n

\u2193<\/p>\n

Measure Button<\/p>\n

\u2193<\/p>\n

Measure Image<\/p>\n

\u2193<\/p>\n

Width Sum<\/p>\n

\u2193<\/p>\n

Height Max<\/p>\n

\u6240\u4ee5：<\/p>\n

Row\u3002<\/p>\n

\u5bbd：<\/p>\n

\u6765\u81ea：<\/p>\n

\u7d2f\u52a0\u3002<\/p>\n

\u9ad8：<\/p>\n

\u6765\u81ea：<\/p>\n

\u6700\u5927\u3002<\/p>\n

\n

Stack Measure<\/h2>\n

\u4f8b\u5982：<\/p>\n

Stack(){<\/p>\n

Image()<\/p>\n

Text()<\/p>\n

}<\/p>\n

\u771f\u6b63：<\/p>\n

Measure：<\/p>\n

Measure Image<\/p>\n

\u2193<\/p>\n

Measure Text<\/p>\n

\u2193<\/p>\n

Width Max<\/p>\n

\u2193<\/p>\n

Height Max<\/p>\n

\u56e0\u4e3a：<\/p>\n

Stack\u3002<\/p>\n

\u4e0d\u662f：<\/p>\n

\u6392\u5217\u3002<\/p>\n

\u800c\u662f：<\/p>\n

\u8986\u76d6\u3002<\/p>\n

\n

GeometryNode \u4ec0\u4e48\u65f6\u5019\u751f\u6210？<\/h2>\n

\u5f88\u591a\u4eba：<\/p>\n

\u8ba4\u4e3a：<\/p>\n

Measure\u3002<\/p>\n

\u7ed3\u675f\u3002<\/p>\n

Geometry\u3002<\/p>\n

\u5c31：<\/p>\n

\u6709\u4e86\u3002<\/p>\n

\u5b9e\u9645\u4e0a：<\/p>\n

\u4e0d\u662f\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

Geometry\u3002<\/p>\n

\u5b8c\u6574：<\/p>\n

\u751f\u6210：<\/p>\n

\u53d1\u751f：<\/p>\n

\u5728：<\/p>\n

Layout<\/p>\n

\u4f8b\u5982：<\/p>\n

Measure<\/p>\n

\u2193<\/p>\n

width=200<\/p>\n

\u771f\u6b63：<\/p>\n

Layout：<\/p>\n

\u624d：<\/p>\n

\u5f97\u5230：<\/p>\n

x<\/p>\n

y<\/p>\n

width<\/p>\n

height<\/p>\n

GeometryNode：<\/p>\n

\u771f\u6b63：<\/p>\n

\u5b8c\u6574\u3002<\/p>\n

\n

\u4e3a\u4ec0\u4e48 Measure \u53ef\u4ee5\u7f13\u5b58？<\/h2>\n

\u4f8b\u5982：<\/p>\n

\u6309\u94ae：<\/p>\n

\u5185\u5bb9：<\/p>\n

\u6ca1\u6709：<\/p>\n

\u53d8\u5316\u3002<\/p>\n

Constraint：<\/p>\n

\u4e5f：<\/p>\n

\u6ca1\u6709：<\/p>\n

\u53d8\u5316\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

Runtime\u3002<\/p>\n

\u76f4\u63a5：<\/p>\n

Measure Cache<\/p>\n

\u8df3\u8fc7：<\/p>\n

\u6574\u4e2a：<\/p>\n

Measure\u3002<\/p>\n

\u56e0\u6b64：<\/p>\n

\u5f88\u591a：<\/p>\n

\u9875\u9762：<\/p>\n

\u7b2c\u4e8c\u6b21：<\/p>\n

\u6253\u5f00\u3002<\/p>\n

\u5e03\u5c40：<\/p>\n

\u6781\u5feb\u3002<\/p>\n

\n

Dirty Layout<\/h2>\n

\u4f8b\u5982：<\/p>\n

\u4fee\u6539：<\/p>\n

.width(300)<\/p>\n

\u771f\u6b63：<\/p>\n

FrameNode\u3002<\/p>\n

\u6807\u8bb0：<\/p>\n

Layout Dirty<\/p>\n

\u4e0b\u4e00\u5e27：<\/p>\n

\u771f\u6b63：<\/p>\n

\u6267\u884c：<\/p>\n

Measure<\/p>\n

\u2193<\/p>\n

Layout<\/p>\n

\u5982\u679c：<\/p>\n

\u4fee\u6539：<\/p>\n

.backgroundColor()<\/p>\n

\u771f\u6b63：<\/p>\n

\u4e0d\u4f1a：<\/p>\n

Measure\u3002<\/p>\n

\u56e0\u4e3a：<\/p>\n

\u989c\u8272\u3002<\/p>\n

\u4e0d\u4f1a：<\/p>\n

\u5f71\u54cd：<\/p>\n

\u5c3a\u5bf8\u3002<\/p>\n

\n

Layout \u771f\u6b63\u6d41\u7a0b<\/h2>\n

\u771f\u6b63：<\/p>\n

Layout\u3002<\/p>\n

\u6536\u5230：<\/p>\n

Geometry<\/p>\n

+<\/p>\n

Parent Position<\/p>\n

\u7136\u540e：<\/p>\n

\u8ba1\u7b97：<\/p>\n

Child Position<\/p>\n

\u4f8b\u5982：<\/p>\n

Column：<\/p>\n

\u771f\u6b63：<\/p>\n

\u7b97\u6cd5：<\/p>\n

CurrentY=0<\/p>\n

\u2193<\/p>\n

Text<\/p>\n

\u2193<\/p>\n

Y+=Text.Height<\/p>\n

\u2193<\/p>\n

Button<\/p>\n

\u2193<\/p>\n

Y+=Button.Height<\/p>\n

\u2193<\/p>\n

Image<\/p>\n

\u6700\u7ec8：<\/p>\n

\u5f97\u5230：<\/p>\n

\u6240\u6709：<\/p>\n

\u5b69\u5b50：<\/p>\n

\u5750\u6807\u3002<\/p>\n

\n

Flex \u4e3a\u4ec0\u4e48\u590d\u6742？<\/h2>\n

\u771f\u6b63：<\/p>\n

Flex\u3002<\/p>\n

\u4e0d\u662f：<\/p>\n

\u7b80\u5355：<\/p>\n

\u6392\u5217\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

\u9700\u8981：<\/p>\n

\u8ba1\u7b97：<\/p>\n

Grow<\/p>\n

Shrink<\/p>\n

Weight<\/p>\n

Basis<\/p>\n

Align<\/p>\n

Justify<\/p>\n

\u56e0\u6b64：<\/p>\n

FlexPattern\u3002<\/p>\n

\u6e90\u7801\u3002<\/p>\n

\u8fdc\u8fdc：<\/p>\n

\u8d85\u8fc7：<\/p>\n

\u666e\u901a：<\/p>\n

Column\u3002<\/p>\n

\n

Measure \u4e3a\u4ec0\u4e48\u4ece\u4e0b\u5f80\u4e0a？<\/h2>\n

\u771f\u6b63：<\/p>\n

Measure：<\/p>\n

\u987a\u5e8f：<\/p>\n

Text<\/p>\n

\u2193<\/p>\n

Button<\/p>\n

\u2193<\/p>\n

Column<\/p>\n

\u56e0\u4e3a：<\/p>\n

\u7236\u7ec4\u4ef6\u3002<\/p>\n

\u5fc5\u987b：<\/p>\n

\u77e5\u9053：<\/p>\n

\u5b69\u5b50：<\/p>\n

\u5c3a\u5bf8\u3002<\/p>\n

\u6240\u4ee5：<\/p>\n

Measure：<\/p>\n

\u5b9e\u9645\u4e0a：<\/p>\n

\u66f4\u63a5\u8fd1：<\/p>\n

\u540e\u5e8f\u904d\u5386（Post-order Traversal）\u3002<\/p>\n

\n

Layout \u4e3a\u4ec0\u4e48\u4ece\u4e0a\u5f80\u4e0b？<\/h2>\n

\u771f\u6b63：<\/p>\n

Layout：<\/p>\n

\u987a\u5e8f：<\/p>\n

Window<\/p>\n

\u2193<\/p>\n

Column<\/p>\n

\u2193<\/p>\n

Button<\/p>\n

\u56e0\u4e3a：<\/p>\n

\u5b69\u5b50：<\/p>\n

\u5fc5\u987b：<\/p>\n

\u77e5\u9053：<\/p>\n

\u7236\u7ec4\u4ef6：<\/p>\n

\u4f4d\u7f6e\u3002<\/p>\n

\u6240\u4ee5：<\/p>\n

Layout：<\/p>\n

\u66f4\u63a5\u8fd1：<\/p>\n

\u524d\u5e8f\u904d\u5386（Pre-order Traversal）\u3002<\/p>\n

\n

Layout Pipeline<\/h2>\n

\u6574\u4e2a：<\/p>\n

ArkUI\u3002<\/p>\n

\u5e03\u5c40\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

\u6d41\u7a0b：<\/p>\n

State Changed<\/p>\n

\u2193<\/p>\n

Build()<\/p>\n

\u2193<\/p>\n

FrameNode Tree<\/p>\n

\u2193<\/p>\n

Measure()<\/p>\n

\u2193<\/p>\n

Desired Size<\/p>\n

\u2193<\/p>\n

Layout()<\/p>\n

\u2193<\/p>\n

GeometryNode<\/p>\n

\u2193<\/p>\n

Paint()<\/p>\n

\u2193<\/p>\n

RenderNode<\/p>\n

\u2193<\/p>\n

RenderService<\/p>\n

\n

\u4e3a\u4ec0\u4e48 Measure\/Layout \u5206\u79bb\u80fd\u63d0\u9ad8\u6027\u80fd？<\/h2>\n

\u5982\u679c：<\/p>\n

Measure\u3002<\/p>\n

\u548c：<\/p>\n

Layout\u3002<\/p>\n

\u6df7\u5728：<\/p>\n

\u4e00\u8d77\u3002<\/p>\n

\u90a3\u4e48：<\/p>\n

\u4efb\u4f55：<\/p>\n

\u4f4d\u7f6e：<\/p>\n

\u53d8\u5316\u3002<\/p>\n

\u90fd：<\/p>\n

\u53ef\u80fd：<\/p>\n

\u91cd\u65b0：<\/p>\n

\u8ba1\u7b97：<\/p>\n

\u5c3a\u5bf8\u3002<\/p>\n

\u73b0\u5728：<\/p>\n

\u62c6\u5f00：<\/p>\n

\u4ee5\u540e：<\/p>\n

\u4f8b\u5982：<\/p>\n

Scroll<\/p>\n

\u2193<\/p>\n

Y \u6539\u53d8<\/p>\n

\u771f\u6b63：<\/p>\n

\u5f88\u591a：<\/p>\n

\u7ec4\u4ef6\u3002<\/p>\n

\u53ea\u9700\u8981：<\/p>\n

Layout<\/p>\n

\u4e0d\u7528：<\/p>\n

Measure<\/p>\n

\u53c8\u6bd4\u5982：<\/p>\n

Opacity<\/p>\n

\u2193<\/p>\n

\u53d8\u5316<\/p>\n

\u751a\u81f3：<\/p>\n

Layout\u3002<\/p>\n

\u90fd：<\/p>\n

\u4e0d\u7528\u3002<\/p>\n

\u76f4\u63a5：<\/p>\n

Paint\u3002<\/p>\n

\u56e0\u6b64：<\/p>\n

ArkUI\u3002<\/p>\n

\u91c7\u7528：<\/p>\n

\u4e09\u7ea7：<\/p>\n

Dirty：<\/p>\n

Measure Dirty<\/p>\n

\u2193<\/p>\n

Layout Dirty<\/p>\n

\u2193<\/p>\n

Paint Dirty<\/p>\n

\u6700\u5927\u7a0b\u5ea6\u51cf\u5c11\u4e86\u4e0d\u5fc5\u8981\u7684\u8ba1\u7b97\u3002<\/p>\n

\n

Layout \u5b50\u7cfb\u7edf\u603b\u67b6\u6784<\/h2>\n

\u6574\u4e2a Layout Engine \u53ef\u4ee5\u62bd\u8c61\u6210\u4e0b\u9762\u8fd9\u5f20\u56fe：<\/p>\n

FrameNode<\/p>\n

\u2502<\/p>\n

\u25bc<\/p>\n

Pattern::Measure()<\/p>\n

\u2502<\/p>\n

\u25bc<\/p>\n

Desired Size<\/p>\n

\u2502<\/p>\n

\u25bc<\/p>\n

Pattern::Layout()<\/p>\n

\u2502<\/p>\n

\u25bc<\/p>\n

GeometryNode<\/p>\n

\u2502<\/p>\n

\u25bc<\/p>\n

Paint()<\/p>\n

\u2502<\/p>\n

\u25bc<\/p>\n

RenderContext<\/p>\n

\u2502<\/p>\n

\u25bc<\/p>\n

RenderService<\/p>\n

\u8fd9\u91cc\u53ef\u4ee5\u770b\u5230：<\/p>\n

Layout Engine \u5e76\u4e0d\u662f\u8ba1\u7b97\u50cf\u7d20，\u800c\u662f\u5728\u4e0d\u65ad\u5730\u4f20\u9012\u7ea6\u675f（Constraint）\u3001\u8ba1\u7b97\u671f\u671b\u5c3a\u5bf8（Desired Size）\u4ee5\u53ca\u751f\u6210\u6700\u7ec8\u51e0\u4f55\u4fe1\u606f（GeometryNode）\u3002<\/p>\n

\u8fd9\u4e5f\u662f ArkUI\u3001Flutter\u3001Jetpack Compose \u7b49\u73b0\u4ee3\u58f0\u660e\u5f0f UI \u6846\u67b6\u5728\u5e03\u5c40\u8bbe\u8ba1\u4e0a\u7684\u5171\u540c\u601d\u60f3\u3002<\/p>\n

Constraint（\u7ea6\u675f\u7cfb\u7edf）\u6e90\u7801\u7ea7\u6df1\u5ea6\u89e3\u6790（\u4e00）\u2014\u2014 ArkUI \u5e03\u5c40\u5f15\u64ce\u771f\u6b63\u7684\u6838\u5fc3<\/h2>\n

\u524d\u9762\u6211\u4eec\u5df2\u7ecf\u77e5\u9053：<\/p>\n

\u6574\u4e2a ArkUI Layout Engine \u7684\u6838\u5fc3\u6d41\u7a0b\u662f：<\/p>\n

Build()<\/p>\n

\u2193<\/p>\n

Measure()<\/p>\n

\u2193<\/p>\n

Layout()<\/p>\n

\u2193<\/p>\n

Paint()<\/p>\n

\u4f46\u662f：<\/p>\n

\u771f\u6b63\u51b3\u5b9a\u6574\u4e2a\u5e03\u5c40\u7ed3\u679c\u7684\u3002<\/p>\n

\u5176\u5b9e\u4e0d\u662f：<\/p>\n

Measure<\/p>\n

\u4e5f\u4e0d\u662f：<\/p>\n

Layout<\/p>\n

\u800c\u662f：<\/p>\n

LayoutConstraint<\/p>\n

\u53ef\u4ee5\u8bf4：<\/p>\n

\u6574\u4e2a ArkUI \u7684\u5e03\u5c40，\u672c\u8d28\u4e0a\u5c31\u662f Constraint（\u7ea6\u675f）\u7684\u4e0d\u65ad\u4f20\u9012\u3001\u8ba1\u7b97\u548c\u6536\u655b\u3002<\/p>\n

\n

\u4e3a\u4ec0\u4e48\u9700\u8981 Constraint？<\/h2>\n

\u6765\u770b\u4e00\u4e2a\u4f8b\u5b50\u3002<\/p>\n

Column() {
\n Button("\u767b\u5f55")
\n}
\n.width(300)<\/p>\n

Button：<\/p>\n

\u6ca1\u6709：<\/p>\n

\u6307\u5b9a：<\/p>\n

\u5bbd\u5ea6\u3002<\/p>\n

\u90a3\u4e48：<\/p>\n

\u6309\u94ae\u3002<\/p>\n

\u5230\u5e95：<\/p>\n

\u5e94\u8be5：<\/p>\n

\u591a\u5bbd？<\/p>\n

\u5f88\u591a\u65b0\u4eba：<\/p>\n

\u89c9\u5f97：<\/p>\n

Button\u3002<\/p>\n

\u81ea\u5df1：<\/p>\n

\u51b3\u5b9a\u3002<\/p>\n

\u5b9e\u9645\u4e0a：<\/p>\n

\u4e0d\u662f\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

\u51b3\u5b9a：<\/p>\n

Button\u3002<\/p>\n

\u5bbd\u5ea6：<\/p>\n

\u7684\u662f：<\/p>\n

Parent Constraint<\/p>\n

\u4e5f\u5c31\u662f：<\/p>\n

\u7236\u7ec4\u4ef6\u3002<\/p>\n

\u7ed9\u5b83\u7684：<\/p>\n

\u7ea6\u675f\u3002<\/p>\n

\n

Runtime \u771f\u6b63\u6d41\u7a0b<\/h2>\n

\u771f\u6b63：<\/p>\n

\u5e03\u5c40\u3002<\/p>\n

\u5f00\u59cb：<\/p>\n

\u7b2c\u4e00\u6b65：<\/p>\n

\u4e0d\u662f：<\/p>\n

Measure\u3002<\/p>\n

\u800c\u662f：<\/p>\n

\u751f\u6210：<\/p>\n

LayoutConstraint<\/p>\n

\u4f8b\u5982：<\/p>\n

Window：<\/p>\n

\u5bbd：<\/p>\n

1080<\/p>\n

\u771f\u6b63：<\/p>\n

Runtime：<\/p>\n

\u521b\u5efa：<\/p>\n

LayoutConstraint {<\/p>\n

minWidth = 0<\/p>\n

maxWidth = 1080<\/p>\n

minHeight = 0<\/p>\n

maxHeight = 2400<\/p>\n

}<\/p>\n

\u7136\u540e：<\/p>\n

\u4e00\u8def：<\/p>\n

\u5411\u4e0b：<\/p>\n

\u4f20\u9012\u3002<\/p>\n

\n

LayoutConstraint \u6570\u636e\u7ed3\u6784<\/h2>\n

ACE Engine\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

\u6bd4：<\/p>\n

\u6559\u7a0b\u3002<\/p>\n

\u590d\u6742\u3002<\/p>\n

\u62bd\u8c61：<\/p>\n

\u4ee5\u540e：<\/p>\n

\u66f4\u63a5\u8fd1：<\/p>\n

class LayoutConstraint {<\/p>\n

SizeF minSize;<\/p>\n

SizeF maxSize;<\/p>\n

OptionalSizeF selfIdealSize;<\/p>\n

OptionalSizeF parentIdealSize;<\/p>\n

float percentReferenceWidth;<\/p>\n

float percentReferenceHeight;<\/p>\n

LayoutDirection direction;<\/p>\n

}<\/p>\n

\u6ce8\u610f\u3002<\/p>\n

\u8fd9\u91cc：<\/p>\n

\u4e0d\u4ec5\u4ec5：<\/p>\n

\u53ea\u6709：<\/p>\n

min<\/p>\n

max<\/p>\n

\u8fd8\u6709：<\/p>\n

IdealSize<\/p>\n

\u8fd9\u4e5f\u662f：<\/p>\n

ArkUI\u3002<\/p>\n

\u548c：<\/p>\n

\u4f20\u7edf：<\/p>\n

View\u3002<\/p>\n

\u6700\u5927\u7684：<\/p>\n

\u533a\u522b\u3002<\/p>\n

\n

\u4ec0\u4e48\u53eb IdealSize？<\/h2>\n

\u5f88\u591a\u4eba\u3002<\/p>\n

\u7b2c\u4e00\u6b21\u3002<\/p>\n

\u770b\u5230：<\/p>\n

\u6e90\u7801\u3002<\/p>\n

\u90fd\u4f1a：<\/p>\n

\u7591\u60d1\u3002<\/p>\n

\u4f8b\u5982：<\/p>\n

Button：<\/p>\n

\u771f\u6b63：<\/p>\n

Measure：<\/p>\n

\u5f97\u5230：<\/p>\n

120<\/p>\n

Constraint：<\/p>\n

\u5141\u8bb8：<\/p>\n

300<\/p>\n

\u90a3\u4e48：<\/p>\n

\u771f\u6b63：<\/p>\n

Button：<\/p>\n

\u5e0c\u671b：<\/p>\n

\u81ea\u5df1：<\/p>\n

\u662f：<\/p>\n

120<\/p>\n

\u8fd9\u5c31\u662f：<\/p>\n

Ideal Size<\/p>\n

\u6700\u7ec8：<\/p>\n

Layout\u3002<\/p>\n

\u662f\u5426：<\/p>\n

\u91c7\u7528\u3002<\/p>\n

\u8fd8\u8981：<\/p>\n

\u7ee7\u7eed：<\/p>\n

\u8ba1\u7b97\u3002<\/p>\n

\n

\u4e3a\u4ec0\u4e48\u4e0d\u662f\u56fa\u5b9a\u5bbd\u5ea6？<\/h2>\n

\u4f8b\u5982：<\/p>\n

\u5f00\u53d1\u8005：<\/p>\n

\u5199：<\/p>\n

.width(200)<\/p>\n

\u5f88\u591a\u4eba：<\/p>\n

\u89c9\u5f97：<\/p>\n

\u6700\u7ec8：<\/p>\n

\u4e00\u5b9a：<\/p>\n

200\u3002<\/p>\n

\u5176\u5b9e\u3002<\/p>\n

\u4e0d\u662f\u3002<\/p>\n

\u4f8b\u5982：<\/p>\n

\u7236\u7ec4\u4ef6：<\/p>\n

\u53ea\u6709：<\/p>\n

150<\/p>\n

\u771f\u6b63：<\/p>\n

Runtime：<\/p>\n

\u6267\u884c：<\/p>\n

Ideal<\/p>\n

\u2193<\/p>\n

Constraint<\/p>\n

\u2193<\/p>\n

Clamp<\/p>\n

\u6700\u540e：<\/p>\n

\u5f97\u5230：<\/p>\n

150<\/p>\n

\u4e0d\u662f：<\/p>\n

200\u3002<\/p>\n

\n

Clamp（\u7ea6\u675f\u6536\u655b）<\/h2>\n

\u771f\u6b63：<\/p>\n

ACE Engine\u3002<\/p>\n

\u5927\u91cf：<\/p>\n

\u4f7f\u7528：<\/p>\n

Clamp()<\/p>\n

\u2193<\/p>\n

min<\/p>\n

\u2193<\/p>\n

ideal<\/p>\n

\u2193<\/p>\n

max<\/p>\n

\u4f8b\u5982：<\/p>\n

Ideal = 500<\/p>\n

Max = 300<\/p>\n

\u6700\u7ec8：<\/p>\n

300<\/p>\n

\u4f8b\u5982：<\/p>\n

Ideal = 10<\/p>\n

Min = 50<\/p>\n

\u6700\u7ec8：<\/p>\n

50<\/p>\n

\u56e0\u6b64\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

\u5c3a\u5bf8：<\/p>\n

\u6c38\u8fdc：<\/p>\n

\u4e0d\u4f1a：<\/p>\n

\u7a81\u7834：<\/p>\n

Constraint\u3002<\/p>\n

\n

Constraint \u4e3a\u4ec0\u4e48\u4e00\u76f4\u5411\u4e0b\u4f20？<\/h2>\n

\u6765\u770b：<\/p>\n

Column() {<\/p>\n

Row() {<\/p>\n

Button()<\/p>\n

}<\/p>\n

}<\/p>\n

\u771f\u6b63：<\/p>\n

Constraint：<\/p>\n

\u4f20\u9012：<\/p>\n

Window<\/p>\n

\u2193<\/p>\n

Column<\/p>\n

\u2193<\/p>\n

Row<\/p>\n

\u2193<\/p>\n

Button<\/p>\n

\u6bcf\u4e00\u7ea7：<\/p>\n

\u90fd：<\/p>\n

\u53ef\u80fd：<\/p>\n

\u4fee\u6539：<\/p>\n

Constraint\u3002<\/p>\n

\u4f8b\u5982：<\/p>\n

Column：<\/p>\n

\u51cf\u53bb：<\/p>\n

Padding<\/p>\n

Margin<\/p>\n

\u7136\u540e：<\/p>\n

\u7ee7\u7eed：<\/p>\n

\u5411\u4e0b：<\/p>\n

\u4f20\u9012\u3002<\/p>\n

\n

Padding \u5982\u4f55\u5f71\u54cd Constraint？<\/h2>\n

\u4f8b\u5982：<\/p>\n

Column()
\n.padding(20)<\/p>\n

\u7236：<\/p>\n

Constraint：<\/p>\n

300<\/p>\n

\u771f\u6b63：<\/p>\n

\u5b50\u7ec4\u4ef6：<\/p>\n

\u6536\u5230：<\/p>\n

\u4e0d\u662f：<\/p>\n

300\u3002<\/p>\n

\u800c\u662f：<\/p>\n

260<\/p>\n

\u56e0\u4e3a：<\/p>\n

\u5de6\u53f3：<\/p>\n

Padding：<\/p>\n

\u5404：<\/p>\n

20\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

\u8ba1\u7b97：<\/p>\n

300<\/p>\n

–<\/p>\n

20<\/p>\n

–<\/p>\n

20<\/p>\n

=<\/p>\n

260<\/p>\n

\u6240\u4ee5：<\/p>\n

Padding\u3002<\/p>\n

\u672c\u8d28：<\/p>\n

\u4e0d\u662f：<\/p>\n

\u79fb\u52a8：<\/p>\n

\u7ec4\u4ef6\u3002<\/p>\n

\u800c\u662f：<\/p>\n

\u4fee\u6539：<\/p>\n

Constraint\u3002<\/p>\n

\n

Margin \u4e3a\u4ec0\u4e48\u4e0d\u540c？<\/h2>\n

\u5f88\u591a\u65b0\u4eba：<\/p>\n

\u5bb9\u6613：<\/p>\n

\u6df7\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

Margin：<\/p>\n

\u4e0d\u4f1a：<\/p>\n

\u5f71\u54cd：<\/p>\n

\u5b69\u5b50：<\/p>\n

Constraint\u3002<\/p>\n

\u5b83：<\/p>\n

\u5f71\u54cd：<\/p>\n

\u7684\u662f：<\/p>\n

Parent Layout<\/p>\n

\u4f8b\u5982：<\/p>\n

Button()
\n.margin(20)<\/p>\n

Button：<\/p>\n

Measure：<\/p>\n

\u5bbd：<\/p>\n

\u4ecd\u7136：<\/p>\n

100\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

Layout：<\/p>\n

\u4f4d\u7f6e：<\/p>\n

\u53d8\u6210：<\/p>\n

x = 20<\/p>\n

\u56e0\u6b64：<\/p>\n

Padding\u3002<\/p>\n

\u4fee\u6539：<\/p>\n

Constraint\u3002<\/p>\n

Margin\u3002<\/p>\n

\u4fee\u6539：<\/p>\n

Position\u3002<\/p>\n

\n

\u767e\u5206\u6bd4\u5bbd\u5ea6<\/h2>\n

\u4f8b\u5982：<\/p>\n

.width("50%")<\/p>\n

\u771f\u6b63：<\/p>\n

Runtime：<\/p>\n

\u4e0d\u662f：<\/p>\n

\u7acb\u5373：<\/p>\n

\u8ba1\u7b97\u3002<\/p>\n

\u800c\u662f：<\/p>\n

\u4fdd\u5b58：<\/p>\n

PercentReference<\/p>\n

\u771f\u6b63：<\/p>\n

Measure：<\/p>\n

\u9636\u6bb5：<\/p>\n

\u8bfb\u53d6：<\/p>\n

Parent：<\/p>\n

Constraint\u3002<\/p>\n

\u4f8b\u5982：<\/p>\n

Parent = 600<\/p>\n

\u771f\u6b63：<\/p>\n

\u8ba1\u7b97：<\/p>\n

600 \u00d7 50%<\/p>\n

\u2193<\/p>\n

300<\/p>\n

\u6240\u4ee5：<\/p>\n

\u767e\u5206\u6bd4\u3002<\/p>\n

\u5fc5\u987b：<\/p>\n

Measure\u3002<\/p>\n

\u624d\u80fd：<\/p>\n

\u5f97\u5230\u3002<\/p>\n

\n

\u4e3a\u4ec0\u4e48 Constraint \u80fd\u652f\u6301\u6298\u53e0\u5c4f？<\/h2>\n

\u6765\u770b：<\/p>\n

\u624b\u673a：<\/p>\n

Width = 1080<\/p>\n

\u6298\u53e0：<\/p>\n

\u4ee5\u540e：<\/p>\n

Width = 1800<\/p>\n

\u771f\u6b63：<\/p>\n

Window：<\/p>\n

Constraint：<\/p>\n

\u7acb\u5373：<\/p>\n

\u53d8\u6210：<\/p>\n

MaxWidth = 1800<\/p>\n

\u4e0b\u9762：<\/p>\n

\u6240\u6709：<\/p>\n

\u7ec4\u4ef6\u3002<\/p>\n

\u91cd\u65b0：<\/p>\n

Measure\u3002<\/p>\n

Layout\u3002<\/p>\n

\u6574\u4e2a：<\/p>\n

UI\u3002<\/p>\n

\u81ea\u52a8：<\/p>\n

\u9002\u914d\u3002<\/p>\n

\u5f00\u53d1\u8005：<\/p>\n

\u6839\u672c：<\/p>\n

\u4e0d\u7528：<\/p>\n

\u4fee\u6539：<\/p>\n

Button\u3002<\/p>\n

\u4ee3\u7801\u3002<\/p>\n

\n

Constraint \u4e0e SafeArea<\/h2>\n

\u4f8b\u5982：<\/p>\n

\u5218\u6d77\u5c4f：<\/p>\n

\u771f\u6b63：<\/p>\n

Window：<\/p>\n

\u5bbd：<\/p>\n

1080<\/p>\n

\u4f46\u662f：<\/p>\n

SafeArea：<\/p>\n

\u5de6\u53f3：<\/p>\n

\u5404：<\/p>\n

40\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

\u4f20\u9012：<\/p>\n

Constraint：<\/p>\n

\u53d8\u6210：<\/p>\n

1000<\/p>\n

\u6240\u4ee5：<\/p>\n

Button\u3002<\/p>\n

\u6c38\u8fdc：<\/p>\n

\u4e0d\u4f1a：<\/p>\n

\u8dd1：<\/p>\n

\u5230：<\/p>\n

\u5218\u6d77\u3002<\/p>\n

\u91cc\u9762\u3002<\/p>\n

\n

Constraint \u4e0e Scroll<\/h2>\n

\u4f8b\u5982：<\/p>\n

Scroll：<\/p>\n

\u771f\u6b63：<\/p>\n

\u6536\u5230：<\/p>\n

Constraint：<\/p>\n

Height = 800<\/p>\n

\u4f46\u662f：<\/p>\n

\u5b69\u5b50：<\/p>\n

\u771f\u6b63：<\/p>\n

Measure：<\/p>\n

\u5f97\u5230：<\/p>\n

3000<\/p>\n

\u4e3a\u4ec0\u4e48：<\/p>\n

\u6ca1\u6709：<\/p>\n

\u62a5\u9519？<\/p>\n

\u56e0\u4e3a：<\/p>\n

ScrollPattern\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

\u4fee\u6539：<\/p>\n

Constraint：<\/p>\n

\u5141\u8bb8：<\/p>\n

Infinite Height<\/p>\n

\u771f\u6b63：<\/p>\n

\u66f4\u63a5\u8fd1：<\/p>\n

maxHeight = Infinity<\/p>\n

\u6240\u4ee5：<\/p>\n

List\u3002<\/p>\n

\u624d\u80fd：<\/p>\n

\u65e0\u9650：<\/p>\n

\u589e\u957f\u3002<\/p>\n

\n

Infinity Constraint<\/h2>\n

\u5f88\u591a：<\/p>\n

\u7ec4\u4ef6\u3002<\/p>\n

\u90fd\u4f1a：<\/p>\n

\u6536\u5230：<\/p>\n

\u221e<\/p>\n

\u4f8b\u5982：<\/p>\n

Column<\/p>\n

List<\/p>\n

Scroll<\/p>\n

WaterFlow<\/p>\n

\u4e3a\u4ec0\u4e48？<\/p>\n

\u56e0\u4e3a：<\/p>\n

\u5b83\u4eec：<\/p>\n

\u9700\u8981：<\/p>\n

\u77e5\u9053：<\/p>\n

\u5b69\u5b50：<\/p>\n

\u771f\u6b63：<\/p>\n

\u5927\u5c0f\u3002<\/p>\n

\u5982\u679c：<\/p>\n

\u9650\u5236：<\/p>\n

800\u3002<\/p>\n

\u6c38\u8fdc：<\/p>\n

\u65e0\u6cd5：<\/p>\n

\u8ba1\u7b97：<\/p>\n

\u6eda\u52a8：<\/p>\n

\u8ddd\u79bb\u3002<\/p>\n

\n

Constraint \u4e3a\u4ec0\u4e48\u652f\u6301\u54cd\u5e94\u5f0f？<\/h2>\n

\u771f\u6b63：<\/p>\n

ArkUI：<\/p>\n

\u4e0d\u662f：<\/p>\n

\u5224\u65ad：<\/p>\n

\u8bbe\u5907\u3002<\/p>\n

\u800c\u662f：<\/p>\n

\u5224\u65ad：<\/p>\n

Constraint\u3002<\/p>\n

\u4f8b\u5982：<\/p>\n

MaxWidth<\/p>\n

<600<\/p>\n

\u2193<\/p>\n

Phone<\/p>\n

600~840<\/p>\n

\u2193<\/p>\n

Tablet<\/p>\n

>840<\/p>\n

\u2193<\/p>\n

Desktop<\/p>\n

\u6240\u4ee5：<\/p>\n

\u771f\u6b63：<\/p>\n

\u54cd\u5e94\u5f0f：<\/p>\n

\u5e03\u5c40\u3002<\/p>\n

\u5b8c\u5168：<\/p>\n

\u4f9d\u8d56：<\/p>\n

Constraint\u3002<\/p>\n

\u4e0d\u662f：<\/p>\n

DeviceType\u3002<\/p>\n

\n

Constraint Cache<\/h2>\n

\u771f\u6b63：<\/p>\n

ACE Engine\u3002<\/p>\n

\u8fd8\u6709：<\/p>\n

\u4e00\u4e2a：<\/p>\n

\u4f18\u5316\u3002<\/p>\n

\u4f8b\u5982：<\/p>\n

Constraint：<\/p>\n

\u6ca1\u6709：<\/p>\n

\u53d8\u5316\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

FrameNode：<\/p>\n

\u4fdd\u5b58：<\/p>\n

Last Constraint<\/p>\n

\u4e0b\u4e00\u5e27：<\/p>\n

\u6536\u5230：<\/p>\n

\u4e00\u6837：<\/p>\n

Constraint\u3002<\/p>\n

\u76f4\u63a5：<\/p>\n

Skip Measure<\/p>\n

\u56e0\u6b64：<\/p>\n

\u9875\u9762：<\/p>\n

\u6eda\u52a8\u3002<\/p>\n

\u4e0d\u4f1a：<\/p>\n

\u75af\u72c2：<\/p>\n

\u91cd\u65b0：<\/p>\n

Measure\u3002<\/p>\n

\n

Constraint \u66f4\u65b0\u6d41\u7a0b<\/h2>\n

\u4f8b\u5982：<\/p>\n

\u7a97\u53e3：<\/p>\n

\u7f29\u653e：<\/p>\n

\u771f\u6b63：<\/p>\n

Runtime：<\/p>\n

\u6267\u884c：<\/p>\n

Window Resize<\/p>\n

\u2193<\/p>\n

New Constraint<\/p>\n

\u2193<\/p>\n

Mark Layout Dirty<\/p>\n

\u2193<\/p>\n

Measure()<\/p>\n

\u2193<\/p>\n

Layout()<\/p>\n

\u2193<\/p>\n

GeometryNode Update<\/p>\n

\u2193<\/p>\n

Paint()<\/p>\n

\u2193<\/p>\n

RenderService<\/p>\n

\u8fd9\u91cc\u53ea\u4f1a\u5f71\u54cd：<\/p>\n

\u771f\u6b63：<\/p>\n

\u53d7\u5230：<\/p>\n

Constraint\u3002<\/p>\n

\u53d8\u5316：<\/p>\n

\u5f71\u54cd：<\/p>\n

\u7684：<\/p>\n

\u8282\u70b9\u3002<\/p>\n

\u4e0d\u662f：<\/p>\n

\u6574\u4e2a：<\/p>\n

\u9875\u9762\u3002<\/p>\n

\n

Constraint \u5728\u6574\u4e2a Layout Engine \u4e2d\u7684\u4f4d\u7f6e<\/h2>\n

\u6700\u7ec8：<\/p>\n

ArkUI\u3002<\/p>\n

\u5e03\u5c40\u3002<\/p>\n

\u53ef\u4ee5：<\/p>\n

\u62bd\u8c61：<\/p>\n

\u6210：<\/p>\n

Window<\/p>\n

\u2193<\/p>\n

LayoutConstraint<\/p>\n

\u2193<\/p>\n

Pattern::Measure()<\/p>\n

\u2193<\/p>\n

Desired Size<\/p>\n

\u2193<\/p>\n

Constraint Clamp<\/p>\n

\u2193<\/p>\n

Pattern::Layout()<\/p>\n

\u2193<\/p>\n

GeometryNode<\/p>\n

\u2193<\/p>\n

Paint()<\/p>\n

\u2193<\/p>\n

RenderNode<\/p>\n

\u2193<\/p>\n

RenderService<\/p>\n

\u8fd9\u91cc\u53ef\u4ee5\u770b\u5230：<\/p>\n

Measure \u5e76\u4e0d\u662f\u968f\u610f\u8ba1\u7b97\u5c3a\u5bf8，\u800c\u662f\u5728 Constraint \u7684\u7ea6\u675f\u4e0b\u4e0d\u65ad\u6536\u655b，\u6700\u7ec8\u5f97\u5230\u4e00\u4e2a\u5408\u6cd5\u7684 GeometryNode\u3002<\/p>\n

\u8fd9\u4e5f\u662f ArkUI \u80fd\u591f\u540c\u65f6\u9002\u914d\u624b\u673a\u3001\u5e73\u677f\u3001PC\u3001\u6298\u53e0\u5c4f\u3001\u8f66\u673a\u7b49\u4e0d\u540c\u8bbe\u5907\u7684\u6839\u672c\u539f\u56e0\u3002<\/p>\n

\n

\u6e90\u7801\u89d2\u5ea6\u8865\u5145：ConstraintSpace \u4e0e LayoutWrapper<\/h2>\n

\u524d\u9762\u4e3a\u4e86\u7406\u89e3\u6d41\u7a0b，\u6211\u4eec\u7b80\u5316\u4e86\u5f88\u591a\u7ec6\u8282\u3002\u4f46\u5982\u679c\u4ece ACE Engine \u6e90\u7801\u6765\u770b，\u4ec5\u4ec5\u77e5\u9053 LayoutConstraint \u8fd8\u4e0d\u591f\u3002<\/p>\n

\u771f\u6b63\u53c2\u4e0e\u5e03\u5c40\u7684\u5bf9\u8c61\u5b9e\u9645\u4e0a\u8fd8\u6709\u4e24\u4e2a\u6838\u5fc3\u89d2\u8272：<\/p>\n

FrameNode
\n \u2502
\n \u25bc
\nLayoutWrapper
\n \u2502
\n \u25bc
\nLayoutConstraintF
\n \u2502
\n \u25bc
\nLayoutAlgorithm<\/p>\n

\u5f88\u591a\u4eba\u9605\u8bfb\u6e90\u7801\u65f6，\u4f1a\u53d1\u73b0\u771f\u6b63\u8c03\u7528 Measure() \u7684\u4e0d\u662f FrameNode，\u800c\u662f LayoutWrapper\u3002<\/p>\n

\u8fd9\u662f HarmonyOS \u5e03\u5c40\u5f15\u64ce\u548c\u5f88\u591a UI \u6846\u67b6\u6700\u5927\u7684\u533a\u522b\u4e4b\u4e00\u3002<\/p>\n

\n

\u4e3a\u4ec0\u4e48\u53c8\u591a\u4e86\u4e00\u4e2a LayoutWrapper？<\/h2>\n

\u5982\u679c\u76f4\u63a5\u5728 FrameNode \u4e0a Measure，\u4f1a\u9047\u5230\u4e00\u4e2a\u95ee\u9898\u3002<\/p>\n

\u4f8b\u5982：<\/p>\n

FrameNode<\/p>\n

\u91cc\u9762\u4fdd\u5b58\u7740：<\/p>\n

GeometryNode<\/p>\n

LayoutProperty<\/p>\n

RenderContext<\/p>\n

Pattern<\/p>\n

EventHub<\/p>\n

\u5982\u679c Layout \u5728\u8ba1\u7b97\u8fc7\u7a0b\u4e2d\u76f4\u63a5\u4fee\u6539\u8fd9\u4e9b\u5bf9\u8c61：<\/p>\n

Measure<\/p>\n

\u2193<\/p>\n

\u4fee\u6539 Geometry<\/p>\n

\u2193<\/p>\n

Layout \u5931\u8d25<\/p>\n

UI \u6811\u5c31\u5df2\u7ecf\u88ab\u6c61\u67d3\u4e86\u3002<\/p>\n

\u56e0\u6b64 ACE Engine \u5f15\u5165\u4e86：<\/p>\n

LayoutWrapper<\/p>\n

\u4f5c\u4e3a：<\/p>\n

FrameNode \u7684\u4e00\u6b21\u5e03\u5c40\u5feb\u7167（Layout Snapshot）<\/p>\n

\u771f\u6b63\u5e03\u5c40\u7ed3\u675f\u4e4b\u540e，\u518d\u7edf\u4e00\u63d0\u4ea4\u7ed3\u679c\u3002<\/p>\n

\n

LayoutWrapper \u5185\u90e8\u7ed3\u6784（\u6e90\u7801\u62bd\u8c61）<\/h2>\n

\u5927\u81f4\u53ef\u4ee5\u62bd\u8c61\u4e3a：<\/p>\n

class LayoutWrapper {
\n RefPtr<FrameNode> hostNode;<\/p>\n

RefPtr<GeometryNode> geometry;<\/p>\n

RefPtr<LayoutProperty> property;<\/p>\n

RefPtr<LayoutAlgorithm> algorithm;<\/p>\n

std::vector<RefPtr<LayoutWrapper>> children;
\n};<\/p>\n

\u8fd9\u91cc\u6700\u91cd\u8981\u7684\u662f：<\/p>\n

GeometryNode<\/p>\n

\u4e0d\u662f\u76f4\u63a5\u4fee\u6539\u539f\u59cb\u5bf9\u8c61\u3002<\/p>\n

\u800c\u662f\u5728 Wrapper \u4e2d\u8ba1\u7b97\u3002<\/p>\n

\u6210\u529f\u4ee5\u540e：<\/p>\n

Commit()<\/p>\n

\u4e00\u6b21\u6027\u5199\u56de\u3002<\/p>\n

\u8fd9\u6837\u6574\u4e2a Layout Engine \u66f4\u5b89\u5168，\u4e5f\u65b9\u4fbf\u505a\u4e2d\u65ad\u3001\u56de\u6eda\u548c\u589e\u91cf\u66f4\u65b0\u3002<\/p>\n

LayoutAlgorithm \u6e90\u7801\u7ea7\u6df1\u5ea6\u89e3\u6790（\u4e00）\u2014\u2014 ArkUI \u771f\u6b63\u7684\u5e03\u5c40\u7b97\u6cd5\u90fd\u85cf\u5728\u8fd9\u91cc<\/h2>\n

\u4e0a\u4e00\u7bc7\u6211\u4eec\u5206\u6790\u4e86：<\/p>\n

LayoutConstraint<\/p>\n

\u5f88\u591a\u5f00\u53d1\u8005\u8ba4\u4e3a：<\/p>\n

Constraint\u3002<\/p>\n

\u8ba1\u7b97\u5b8c\u6210\u3002<\/p>\n

\u5e03\u5c40\u3002<\/p>\n

\u5c31\u7ed3\u675f\u4e86\u3002<\/p>\n

\u5b9e\u9645\u4e0a\u3002<\/p>\n

\u771f\u6b63\u3002<\/p>\n

ArkUI\u3002<\/p>\n

\u5e03\u5c40\u3002<\/p>\n

\u624d\u521a\u521a\u5f00\u59cb\u3002<\/p>\n

\u771f\u6b63\u3002<\/p>\n

ACE Engine\u3002<\/p>\n

\u6267\u884c：<\/p>\n

FrameNode<\/p>\n

\u2193<\/p>\n

LayoutWrapper<\/p>\n

\u2193<\/p>\n

LayoutAlgorithm<\/p>\n

\u2193<\/p>\n

GeometryNode<\/p>\n

\u771f\u6b63：<\/p>\n

\u8d1f\u8d23：<\/p>\n

\u5e03\u5c40\u8ba1\u7b97\u7684\u3002<\/p>\n

\u4e0d\u662f：<\/p>\n

FrameNode\u3002<\/p>\n

\u4e0d\u662f：<\/p>\n

Pattern\u3002<\/p>\n

\u800c\u662f：<\/p>\n

LayoutAlgorithm<\/p>\n

\u53ef\u4ee5\u8bf4：<\/p>\n

LayoutAlgorithm \u624d\u662f\u771f\u6b63\u8d1f\u8d23\u8ba1\u7b97\u7ec4\u4ef6\u5c3a\u5bf8\u548c\u5750\u6807\u7684\u5bf9\u8c61\u3002<\/p>\n

\n

\u4e3a\u4ec0\u4e48\u8fd8\u8981 LayoutAlgorithm？<\/h2>\n

\u5f88\u591a\u4eba：<\/p>\n

\u7b2c\u4e00\u6b21：<\/p>\n

\u770b：<\/p>\n

ACE Engine\u3002<\/p>\n

\u90fd\u4f1a：<\/p>\n

\u89c9\u5f97：<\/p>\n

\u5947\u602a\u3002<\/p>\n

\u4e3a\u4ec0\u4e48：<\/p>\n

\u5df2\u7ecf：<\/p>\n

\u6709：<\/p>\n

Pattern<\/p>\n

\u8fd8：<\/p>\n

\u9700\u8981：<\/p>\n

LayoutAlgorithm<\/p>\n

\u539f\u56e0：<\/p>\n

\u5176\u5b9e：<\/p>\n

\u975e\u5e38：<\/p>\n

\u7b80\u5355\u3002<\/p>\n

Pattern\u3002<\/p>\n

\u8d1f\u8d23：<\/p>\n

\u884c\u4e3a<\/p>\n

LayoutAlgorithm\u3002<\/p>\n

\u8d1f\u8d23：<\/p>\n

\u5e03\u5c40<\/p>\n

\u4f8b\u5982：<\/p>\n

Button\u3002<\/p>\n

\u70b9\u51fb\u3002<\/p>\n

Hover\u3002<\/p>\n

\u52a8\u753b\u3002<\/p>\n

\u5c5e\u4e8e：<\/p>\n

ButtonPattern<\/p>\n

\u4f46\u662f：<\/p>\n

Button\u3002<\/p>\n

\u5bbd：<\/p>\n

\u591a\u5c11？<\/p>\n

\u9ad8：<\/p>\n

\u591a\u5c11？<\/p>\n

\u6587\u5b57\u3002<\/p>\n

\u653e：<\/p>\n

\u54ea\u91cc？<\/p>\n

\u5c5e\u4e8e：<\/p>\n

ButtonLayoutAlgorithm<\/p>\n

\u771f\u6b63：<\/p>\n

\u5b9e\u73b0：<\/p>\n

\u804c\u8d23：<\/p>\n

\u518d\u6b21：<\/p>\n

\u62c6\u5206\u3002<\/p>\n

\n

Runtime \u521b\u5efa\u6d41\u7a0b<\/h2>\n

\u771f\u6b63：<\/p>\n

Build\u3002<\/p>\n

\u7ed3\u675f：<\/p>\n

\u4ee5\u540e：<\/p>\n

\u771f\u6b63：<\/p>\n

Runtime\u3002<\/p>\n

\u6267\u884c：<\/p>\n

FrameNode<\/p>\n

\u2193<\/p>\n

Create LayoutWrapper<\/p>\n

\u2193<\/p>\n

Create LayoutAlgorithm<\/p>\n

\u2193<\/p>\n

Measure()<\/p>\n

\u2193<\/p>\n

Layout()<\/p>\n

\u6240\u4ee5\u3002<\/p>\n

LayoutAlgorithm\u3002<\/p>\n

\u751f\u547d\u5468\u671f\u3002<\/p>\n

\u5176\u5b9e：<\/p>\n

\u975e\u5e38：<\/p>\n

\u77ed\u3002<\/p>\n

\u6bcf\u4e00\u6b21：<\/p>\n

\u5e03\u5c40\u3002<\/p>\n

\u90fd\u4f1a：<\/p>\n

\u521b\u5efa：<\/p>\n

\u65b0\u7684：<\/p>\n

Algorithm\u3002<\/p>\n

\n

LayoutAlgorithm \u5185\u90e8\u7ed3\u6784<\/h2>\n

\u771f\u6b63：<\/p>\n

ACE Engine\u3002<\/p>\n

\u91cc\u9762\u3002<\/p>\n

LayoutAlgorithm\u3002<\/p>\n

\u62bd\u8c61：<\/p>\n

\u4ee5\u540e：<\/p>\n

\u66f4\u63a5\u8fd1：<\/p>\n

class LayoutAlgorithm {<\/p>\n

public:<\/p>\n

virtual void Measure();<\/p>\n

virtual void Layout();<\/p>\n

};<\/p>\n

\u51e0\u4e4e：<\/p>\n

\u6240\u6709：<\/p>\n

\u7ec4\u4ef6\u3002<\/p>\n

\u90fd\u4f1a：<\/p>\n

\u7ee7\u627f：<\/p>\n

\u5b83\u3002<\/p>\n

\u4f8b\u5982：<\/p>\n

TextLayoutAlgorithm<\/p>\n

ButtonLayoutAlgorithm<\/p>\n

RowLayoutAlgorithm<\/p>\n

ColumnLayoutAlgorithm<\/p>\n

FlexLayoutAlgorithm<\/p>\n

ListLayoutAlgorithm<\/p>\n

GridLayoutAlgorithm<\/p>\n

WaterFlowLayoutAlgorithm<\/p>\n

\n

\u4e3a\u4ec0\u4e48\u4e0d\u662f Pattern Measure？<\/h2>\n

\u5f88\u591a\u4eba：<\/p>\n

\u7b2c\u4e00\u6b21：<\/p>\n

\u9605\u8bfb：<\/p>\n

\u6e90\u7801\u3002<\/p>\n

\u90fd\u4f1a：<\/p>\n

\u53d1\u73b0：<\/p>\n

Pattern\u3002<\/p>\n

\u4e5f\u6709：<\/p>\n

Measure()<\/p>\n

\u5b9e\u9645\u4e0a：<\/p>\n

\u771f\u6b63：<\/p>\n

\u6d41\u7a0b：<\/p>\n

\u66f4\u63a5\u8fd1：<\/p>\n

Pattern<\/p>\n

\u2193<\/p>\n

Create LayoutAlgorithm<\/p>\n

\u2193<\/p>\n

LayoutAlgorithm Measure<\/p>\n

Pattern\u3002<\/p>\n

\u8d1f\u8d23：<\/p>\n

\u521b\u5efa：<\/p>\n

Algorithm\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

Measure\u3002<\/p>\n

\u53d1\u751f：<\/p>\n

Algorithm\u3002<\/p>\n

\u91cc\u9762\u3002<\/p>\n

\n

TextLayoutAlgorithm<\/h2>\n

\u6765\u770b：<\/p>\n

Text("HarmonyOS")<\/p>\n

\u771f\u6b63：<\/p>\n

Measure\u3002<\/p>\n

\u6267\u884c：<\/p>\n

\u8bfb\u53d6：<\/p>\n

FontSize<\/p>\n

\u2193<\/p>\n

\u8bfb\u53d6：<\/p>\n

FontWeight<\/p>\n

\u2193<\/p>\n

\u8bfb\u53d6：<\/p>\n

LetterSpacing<\/p>\n

\u2193<\/p>\n

\u8bfb\u53d6：<\/p>\n

LineHeight<\/p>\n

\u2193<\/p>\n

\u8c03\u7528：<\/p>\n

TextEngine<\/p>\n

\u2193<\/p>\n

\u8fd4\u56de：<\/p>\n

\u6587\u5b57\u5bbd\u9ad8<\/p>\n

\u771f\u6b63：<\/p>\n

\u4e0d\u662f：<\/p>\n

\u81ea\u5df1：<\/p>\n

\u8ba1\u7b97：<\/p>\n

\u5b57\u7b26\u4e32\u3002<\/p>\n

\u957f\u5ea6\u3002<\/p>\n

\u800c\u662f：<\/p>\n

\u8c03\u7528：<\/p>\n

\u6587\u672c：<\/p>\n

\u6392\u7248：<\/p>\n

\u5f15\u64ce\u3002<\/p>\n

\n

\u4e3a\u4ec0\u4e48 Text \u6d4b\u91cf\u8fd9\u4e48\u590d\u6742？<\/h2>\n

\u4f8b\u5982：<\/p>\n

Hello<\/p>\n

\u548c：<\/p>\n

\u4f60\u597d<\/p>\n

\u957f\u5ea6：<\/p>\n

\u5b8c\u5168：<\/p>\n

\u4e0d\u540c\u3002<\/p>\n

\u518d\u4f8b\u5982：<\/p>\n

😀😀😀<\/p>\n

Emoji\u3002<\/p>\n

\u5bbd\u5ea6\u3002<\/p>\n

\u53c8：<\/p>\n

\u4e0d\u540c\u3002<\/p>\n

\u518d\u4f8b\u5982：<\/p>\n

\u0645\u0631\u062d\u0628\u0627<\/p>\n

RTL\u3002<\/p>\n

\u4ece：<\/p>\n

\u53f3：<\/p>\n

\u5411：<\/p>\n

\u5de6\u3002<\/p>\n

\u6240\u4ee5：<\/p>\n

\u771f\u6b63：<\/p>\n

TextLayoutAlgorithm\u3002<\/p>\n

\u91cc\u9762：<\/p>\n

\u5927\u91cf：<\/p>\n

\u8c03\u7528：<\/p>\n

Typography Engine<\/p>\n

\u4e0d\u662f：<\/p>\n

\u7b80\u5355：<\/p>\n

length \u00d7 fontSize<\/p>\n

\n

ButtonLayoutAlgorithm<\/h2>\n

\u5f88\u591a\u4eba：<\/p>\n

\u8ba4\u4e3a：<\/p>\n

Button\u3002<\/p>\n

Measure\u3002<\/p>\n

\u5c31\u662f：<\/p>\n

Text\u3002<\/p>\n

\u5b9e\u9645\u4e0a：<\/p>\n

\u4e0d\u662f\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

\u6d41\u7a0b：<\/p>\n

Measure Text<\/p>\n

\u2193<\/p>\n

Measure Icon<\/p>\n

\u2193<\/p>\n

Padding<\/p>\n

\u2193<\/p>\n

Border<\/p>\n

\u2193<\/p>\n

MinSize<\/p>\n

\u2193<\/p>\n

Constraint<\/p>\n

\u2193<\/p>\n

Final Size<\/p>\n

Button\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

\u5bbd：<\/p>\n

\u662f：<\/p>\n

\u591a\u4e2a：<\/p>\n

\u5bf9\u8c61：<\/p>\n

\u5171\u540c：<\/p>\n

\u51b3\u5b9a\u3002<\/p>\n

\n

RowLayoutAlgorithm<\/h2>\n

\u6765\u770b：<\/p>\n

Row() {<\/p>\n

Text()<\/p>\n

Button()<\/p>\n

Image()<\/p>\n

}<\/p>\n

\u771f\u6b63：<\/p>\n

Measure：<\/p>\n

\u7b97\u6cd5：<\/p>\n

Measure Text<\/p>\n

\u2193<\/p>\n

Measure Button<\/p>\n

\u2193<\/p>\n

Measure Image<\/p>\n

\u2193<\/p>\n

Width += Child.Width<\/p>\n

\u2193<\/p>\n

Height = Max()<\/p>\n

\u771f\u6b63：<\/p>\n

Layout：<\/p>\n

\u7b97\u6cd5：<\/p>\n

CurrentX = 0<\/p>\n

\u2193<\/p>\n

Text.X = 0<\/p>\n

\u2193<\/p>\n

CurrentX += Text.Width<\/p>\n

\u2193<\/p>\n

Button.X<\/p>\n

\u2193<\/p>\n

CurrentX += Button.Width<\/p>\n

\u2193<\/p>\n

Image.X<\/p>\n

\u662f\u4e0d\u662f：<\/p>\n

\u548c：<\/p>\n

Flex\u3002<\/p>\n

\u975e\u5e38：<\/p>\n

\u50cf？<\/p>\n

\u6ca1\u9519\u3002<\/p>\n

Row\u3002<\/p>\n

\u5176\u5b9e：<\/p>\n

\u5c31\u662f：<\/p>\n

Flex\u3002<\/p>\n

\u7684\u4e00\u79cd：<\/p>\n

\u7279\u6b8a：<\/p>\n

\u5b9e\u73b0\u3002<\/p>\n

\n

ColumnLayoutAlgorithm<\/h2>\n

\u771f\u6b63：<\/p>\n

Measure：<\/p>\n

Width<\/p>\n

=<\/p>\n

Max()<\/p>\n

Height<\/p>\n

=<\/p>\n

Sum()<\/p>\n

\u771f\u6b63：<\/p>\n

Layout：<\/p>\n

CurrentY<\/p>\n

\u2193<\/p>\n

Text<\/p>\n

\u2193<\/p>\n

CurrentY+=Height<\/p>\n

\u2193<\/p>\n

Button<\/p>\n

\u2193<\/p>\n

CurrentY+=Height<\/p>\n

\u2193<\/p>\n

Image<\/p>\n

\u548c：<\/p>\n

Row\u3002<\/p>\n

\u6b63\u597d：<\/p>\n

\u76f8\u53cd\u3002<\/p>\n

\n

StackLayoutAlgorithm<\/h2>\n

\u4f8b\u5982：<\/p>\n

Stack(){<\/p>\n

Image()<\/p>\n

Text()<\/p>\n

Loading()<\/p>\n

}<\/p>\n

\u771f\u6b63：<\/p>\n

Measure：<\/p>\n

Max Width<\/p>\n

\u2193<\/p>\n

Max Height<\/p>\n

\u771f\u6b63：<\/p>\n

Layout：<\/p>\n

\u5168\u90e8：<\/p>\n

x=0<\/p>\n

y=0<\/p>\n

\u5982\u679c：<\/p>\n

\u5f00\u53d1\u8005：<\/p>\n

\u6307\u5b9a：<\/p>\n

Alignment\u3002<\/p>\n

\u518d：<\/p>\n

\u8ba1\u7b97：<\/p>\n

Offset\u3002<\/p>\n

\n

FlexLayoutAlgorithm<\/h2>\n

\u771f\u6b63：<\/p>\n

\u590d\u6742：<\/p>\n

\u5f88\u591a\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

Measure：<\/p>\n

\u6d41\u7a0b：<\/p>\n

Measure Fixed Child<\/p>\n

\u2193<\/p>\n

Measure Flexible Child<\/p>\n

\u2193<\/p>\n

Calculate Remaining Space<\/p>\n

\u2193<\/p>\n

Grow<\/p>\n

\u2193<\/p>\n

Shrink<\/p>\n

\u2193<\/p>\n

Align<\/p>\n

\u771f\u6b63：<\/p>\n

\u652f\u6301：<\/p>\n

flexGrow<\/p>\n

flexShrink<\/p>\n

flexBasis<\/p>\n

\u4e0d\u662f：<\/p>\n

\u7b80\u5355：<\/p>\n

Row\u3002<\/p>\n

\n

\u4e3a\u4ec0\u4e48 Flex Measure \u4e24\u6b21？<\/h2>\n

\u6765\u770b：<\/p>\n

Child1<\/p>\n

flex=1<\/p>\n

Child2<\/p>\n

flex=2<\/p>\n

\u771f\u6b63：<\/p>\n

\u7b2c\u4e00\u6b21：<\/p>\n

Measure：<\/p>\n

\u4e0d\u77e5\u9053：<\/p>\n

\u5269\u4f59：<\/p>\n

\u7a7a\u95f4\u3002<\/p>\n

\u6240\u4ee5：<\/p>\n

\u5148：<\/p>\n

Measure：<\/p>\n

\u56fa\u5b9a：<\/p>\n

\u7ec4\u4ef6\u3002<\/p>\n

\u7136\u540e：<\/p>\n

\u8ba1\u7b97：<\/p>\n

\u5269\u4f59：<\/p>\n

\u5bbd\u3002<\/p>\n

\u7b2c\u4e8c\u6b21：<\/p>\n

\u771f\u6b63：<\/p>\n

\u8ba1\u7b97：<\/p>\n

Flex\u3002<\/p>\n

\u5927\u5c0f\u3002<\/p>\n

\u6240\u4ee5：<\/p>\n

Flex\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

Measure：<\/p>\n

\u901a\u5e38：<\/p>\n

\u4e24\u8f6e\u3002<\/p>\n

\n

ImageLayoutAlgorithm<\/h2>\n

\u771f\u6b63：<\/p>\n

\u6d41\u7a0b：<\/p>\n

\u8bfb\u53d6：<\/p>\n

ImageInfo<\/p>\n

\u2193<\/p>\n

Decode Size<\/p>\n

\u2193<\/p>\n

FitMode<\/p>\n

\u2193<\/p>\n

Constraint<\/p>\n

\u2193<\/p>\n

Final Size<\/p>\n

\u4f8b\u5982：<\/p>\n

.objectFit(ImageFit.Contain)<\/p>\n

\u771f\u6b63：<\/p>\n

LayoutAlgorithm\u3002<\/p>\n

\u8d1f\u8d23：<\/p>\n

\u8ba1\u7b97：<\/p>\n

Contain\u3002<\/p>\n

\u4e0d\u662f：<\/p>\n

Render\u3002<\/p>\n

\n

ListLayoutAlgorithm<\/h2>\n

\u771f\u6b63：<\/p>\n

\u6700\u590d\u6742：<\/p>\n

\u4e4b\u4e00\u3002<\/p>\n

\u4f8b\u5982：<\/p>\n

10000：<\/p>\n

Item\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

\u4e0d\u4f1a：<\/p>\n

Measure：<\/p>\n

10000\u3002<\/p>\n

\u800c\u662f：<\/p>\n

Viewport<\/p>\n

\u2193<\/p>\n

Visible Item<\/p>\n

\u2193<\/p>\n

Measure<\/p>\n

\u2193<\/p>\n

Cache<\/p>\n

\u2193<\/p>\n

Estimate Height<\/p>\n

\u771f\u6b63：<\/p>\n

\u5c4f\u5e55：<\/p>\n

\u53ea\u6709：<\/p>\n

20\u3002<\/p>\n

\u4e2a\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

Measure：<\/p>\n

\u4e5f：<\/p>\n

\u53ea\u6709：<\/p>\n

20\u3002<\/p>\n

\u4e2a\u3002<\/p>\n

\n

\u4e3a\u4ec0\u4e48 List \u80fd\u79d2\u5f00？<\/h2>\n

\u5f88\u591a\u4eba：<\/p>\n

\u8ba4\u4e3a：<\/p>\n

List\u3002<\/p>\n

\u6027\u80fd\u3002<\/p>\n

\u6765\u81ea：<\/p>\n

LazyForEach\u3002<\/p>\n

\u5176\u5b9e：<\/p>\n

\u4e0d\u662f\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

\u6838\u5fc3：<\/p>\n

\u662f：<\/p>\n

Estimate Height<\/p>\n

\u4f8b\u5982：<\/p>\n

10000：<\/p>\n

Item\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

\u7b2c\u4e00\u6b21：<\/p>\n

\u6839\u672c：<\/p>\n

\u4e0d\u7528：<\/p>\n

Measure：<\/p>\n

\u5168\u90e8\u3002<\/p>\n

\u76f4\u63a5：<\/p>\n

\u4f30\u7b97：<\/p>\n

10000<\/p>\n

\u00d7<\/p>\n

80<\/p>\n

\u2193<\/p>\n

800000<\/p>\n

\u6eda\u52a8：<\/p>\n

\u4ee5\u540e：<\/p>\n

\u518d：<\/p>\n

\u6162\u6162：<\/p>\n

\u4fee\u6b63\u3002<\/p>\n

\u8fd9\u5c31\u662f：<\/p>\n

\u5927\u578b：<\/p>\n

\u5217\u8868\u3002<\/p>\n

\u4e0d\u5361\u7684：<\/p>\n

\u6838\u5fc3\u3002<\/p>\n

\n

WaterFlowLayoutAlgorithm<\/h2>\n

\u771f\u6b63：<\/p>\n

\u7011\u5e03\u6d41\u3002<\/p>\n

\u4e0d\u662f：<\/p>\n

Row\u3002<\/p>\n

\u4e5f：<\/p>\n

\u4e0d\u662f：<\/p>\n

Grid\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

\u7ef4\u62a4：<\/p>\n

Column1 Height<\/p>\n

Column2 Height<\/p>\n

Column3 Height<\/p>\n

\u6bcf：<\/p>\n

\u65b0\u589e：<\/p>\n

Item\u3002<\/p>\n

\u90fd\u4f1a：<\/p>\n

\u627e\u5230：<\/p>\n

\u5f53\u524d：<\/p>\n

\u6700\u77ed：<\/p>\n

\u5217<\/p>\n

\u7136\u540e：<\/p>\n

\u653e：<\/p>\n

\u8fdb\u53bb\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

\u7b97\u6cd5：<\/p>\n

\u590d\u6742\u5ea6：<\/p>\n

O(logN)<\/p>\n

\u800c\u4e0d\u662f：<\/p>\n

\u66b4\u529b：<\/p>\n

\u626b\u63cf\u3002<\/p>\n

\n

LayoutAlgorithm \u751f\u547d\u5468\u671f<\/h2>\n

\u771f\u6b63：<\/p>\n

\u4e00\u6b21：<\/p>\n

\u5e03\u5c40：<\/p>\n

\u6d41\u7a0b：<\/p>\n

Create Algorithm<\/p>\n

\u2193<\/p>\n

Measure<\/p>\n

\u2193<\/p>\n

Layout<\/p>\n

\u2193<\/p>\n

Generate Geometry<\/p>\n

\u2193<\/p>\n

Destroy Algorithm<\/p>\n

\u6ce8\u610f：<\/p>\n

Algorithm\u3002<\/p>\n

\u4e00\u822c：<\/p>\n

\u4e0d\u4f1a：<\/p>\n

\u957f\u671f：<\/p>\n

\u5b58\u5728\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

\u957f\u671f：<\/p>\n

\u5b58\u5728：<\/p>\n

\u7684\u662f：<\/p>\n

FrameNode<\/p>\n

Pattern<\/p>\n

Property<\/p>\n

\n

\u4e3a\u4ec0\u4e48\u8981\u8bbe\u8ba1\u6210\u77ed\u751f\u547d\u5468\u671f？<\/h2>\n

\u4f8b\u5982：<\/p>\n

\u6309\u94ae：<\/p>\n

10000<\/p>\n

\u4e2a\u3002<\/p>\n

\u5982\u679c：<\/p>\n

\u6bcf\u4e2a：<\/p>\n

LayoutAlgorithm\u3002<\/p>\n

\u4e00\u76f4：<\/p>\n

\u4fdd\u5b58\u3002<\/p>\n

\u5185\u5b58：<\/p>\n

\u975e\u5e38：<\/p>\n

\u6d6a\u8d39\u3002<\/p>\n

\u771f\u6b63：<\/p>\n

ACE Engine\u3002<\/p>\n

\u91c7\u7528：<\/p>\n

\u9700\u8981：<\/p>\n

\u521b\u5efa<\/p>\n

\u2193<\/p>\n

\u7528\u5b8c：<\/p>\n

\u91ca\u653e<\/p>\n

\u56e0\u6b64：<\/p>\n

Layout\u3002<\/p>\n

\u9636\u6bb5\u3002<\/p>\n

\u5185\u5b58\u3002<\/p>\n

\u5360\u7528：<\/p>\n

\u975e\u5e38：<\/p>\n

\u4f4e\u3002<\/p>\n

\n

LayoutAlgorithm \u5728\u6574\u4e2a Layout Engine \u4e2d\u7684\u4f4d\u7f6e<\/h2>\n

\u771f\u6b63：<\/p>\n

ArkUI\u3002<\/p>\n

\u5e03\u5c40\u3002<\/p>\n

\u5b8c\u6574：<\/p>\n

\u6d41\u7a0b：<\/p>\n

FrameNode<\/p>\n

\u2193<\/p>\n

LayoutWrapper<\/p>\n

\u2193<\/p>\n

LayoutConstraint<\/p>\n

\u2193<\/p>\n

LayoutAlgorithm<\/p>\n

\u2193<\/p>\n

Measure()<\/p>\n

\u2193<\/p>\n

Layout()<\/p>\n

\u2193<\/p>\n

GeometryNode<\/p>\n

\u2193<\/p>\n

Commit<\/p>\n

\u2193<\/p>\n

Paint<\/p>\n

\u2193<\/p>\n

RenderNode<\/p>\n

\u2193<\/p>\n

RenderService<\/p>\n

\u5230\u8fd9\u91cc，\u4f60\u4f1a\u53d1\u73b0：<\/p>\n

\u771f\u6b63\u8d1f\u8d23\u5e03\u5c40\u8ba1\u7b97\u7684\u5e76\u4e0d\u662f FrameNode，\u800c\u662f\u6bcf\u4e00\u79cd\u7ec4\u4ef6\u5bf9\u5e94\u7684 LayoutAlgorithm\u3002<\/p>\n

\u4e0d\u540c\u7ec4\u4ef6\u6709\u4e0d\u540c\u7b97\u6cd5，\u4f46\u5b83\u4eec\u90fd\u9075\u5faa\u7edf\u4e00\u7684 Measure\/Layout \u751f\u547d\u5468\u671f，\u56e0\u6b64 ArkUI \u80fd\u591f\u5728\u4fdd\u6301\u4e00\u81f4\u6846\u67b6\u7684\u540c\u65f6，\u652f\u6301 Text\u3001Button\u3001Flex\u3001List\u3001Grid\u3001WaterFlow \u7b49\u5b8c\u5168\u4e0d\u540c\u7684\u5e03\u5c40\u884c\u4e3a\u3002<\/p>\n

\n

ACE Engine \u6e90\u7801\u4e2d\u7684\u8bbe\u8ba1\u4eae\u70b9<\/h2>\n

\u5982\u679c\u628a\u6574\u4e2a\u5e03\u5c40\u5b50\u7cfb\u7edf\u603b\u7ed3\u6210\u4e00\u53e5\u8bdd：<\/p>\n

FrameNode \u4fdd\u5b58\u72b6\u6001<\/p>\n

\u2193<\/p>\n

LayoutWrapper \u4fdd\u5b58\u5e03\u5c40\u4e0a\u4e0b\u6587<\/p>\n

\u2193<\/p>\n

LayoutConstraint \u63d0\u4f9b\u7ea6\u675f<\/p>\n

\u2193<\/p>\n

LayoutAlgorithm \u6267\u884c\u7b97\u6cd5<\/p>\n

\u2193<\/p>\n

GeometryNode \u4fdd\u5b58\u7ed3\u679c<\/p>\n

\u8fd9\u79cd\u5206\u5c42\u8bbe\u8ba1\u5e26\u6765\u4e86\u51e0\u4e2a\u660e\u663e\u4f18\u52bf：<\/p>\n

  • \u804c\u8d23\u6e05\u6670：\u72b6\u6001\u3001\u7ea6\u675f\u3001\u7b97\u6cd5\u3001\u7ed3\u679c\u5206\u522b\u7531\u4e0d\u540c\u5bf9\u8c61\u7ba1\u7406\u3002<\/li>\n
  • \u6613\u4e8e\u6269\u5c55：\u65b0\u589e\u4e00\u4e2a\u7ec4\u4ef6，\u53ea\u9700\u8981\u65b0\u589e\u5bf9\u5e94\u7684 LayoutAlgorithm，\u4e0d\u5fc5\u4fee\u6539\u6574\u4e2a\u5e03\u5c40\u6846\u67b6\u3002<\/li>\n
  • \u4fbf\u4e8e\u4f18\u5316：\u7f13\u5b58\u3001\u589e\u91cf\u5e03\u5c40\u3001\u5c40\u90e8\u91cd\u6392\u90fd\u53ef\u4ee5\u5728 LayoutWrapper \u548c GeometryNode \u5c42\u5b8c\u6210\u3002<\/li>\n
  • \u652f\u6301\u590d\u6742\u5e03\u5c40：Flex\u3001WaterFlow\u3001LazyList \u7b49\u90fd\u53ef\u4ee5\u5b9e\u73b0\u5404\u81ea\u72ec\u7acb\u7684\u5e03\u5c40\u7b56\u7565，\u800c\u65e0\u9700\u6c61\u67d3\u516c\u5171\u4ee3\u7801\u3002<\/li>\n

    Paint \u6e90\u7801\u7ea7\u6df1\u5ea6\u89e3\u6790（\u4e00）\u2014\u2014 ArkUI \u4e3a\u4ec0\u4e48 Paint \u4e0d\u76f4\u63a5\u7ed8\u5236\u5230\u5c4f\u5e55？<\/h2>\n

    \u524d\u9762\u6211\u4eec\u5df2\u7ecf\u5206\u6790\u4e86\u6574\u4e2a Layout Engine\u3002<\/p>\n

    \u771f\u6b63：<\/p>\n

    \u5b8c\u6210：<\/p>\n

    Layout\u3002<\/p>\n

    \u4ee5\u540e\u3002<\/p>\n

    Runtime\u3002<\/p>\n

    \u5f97\u5230：<\/p>\n

    GeometryNode<\/p>\n

    \u91cc\u9762：<\/p>\n

    \u4fdd\u5b58：<\/p>\n

    x<\/p>\n

    y<\/p>\n

    width<\/p>\n

    height<\/p>\n

    \u5f88\u591a\u5f00\u53d1\u8005：<\/p>\n

    \u8ba4\u4e3a\u3002<\/p>\n

    \u63a5\u4e0b\u6765：<\/p>\n

    \u5c31\u662f：<\/p>\n

    Canvas.drawXXX()<\/p>\n

    \u5176\u5b9e\u3002<\/p>\n

    \u5b8c\u5168：<\/p>\n

    \u4e0d\u662f\u3002<\/p>\n

    \u771f\u6b63：<\/p>\n

    ACE Engine\u3002<\/p>\n

    \u771f\u6b63：<\/p>\n

    \u6267\u884c：<\/p>\n

    Layout<\/p>\n

    \u2193<\/p>\n

    Paint<\/p>\n

    \u2193<\/p>\n

    RenderNode<\/p>\n

    \u2193<\/p>\n

    RenderService<\/p>\n

    \u2193<\/p>\n

    GPU<\/p>\n

    \u8fd9\u91cc：<\/p>\n

    Paint\u3002<\/p>\n

    \u5e76\u4e0d\u4f1a：<\/p>\n

    \u76f4\u63a5：<\/p>\n

    \u7ed8\u5236\u3002<\/p>\n

    \u5c4f\u5e55\u3002<\/p>\n

    \u8fd9\u662f：<\/p>\n

    ArkUI\u3002<\/p>\n

    \u533a\u522b\u4e8e：<\/p>\n

    \u5f88\u591a：<\/p>\n

    Canvas UI\u3002<\/p>\n

    \u6700\u5927\u7684：<\/p>\n

    \u5730\u65b9\u3002<\/p>\n

    \n

    Paint \u5230\u5e95\u662f\u4ec0\u4e48？<\/h2>\n

    \u5f88\u591a\u6559\u7a0b：<\/p>\n

    \u4e00\u53e5\u8bdd：<\/p>\n

    Paint<\/p>\n

    \u2193<\/p>\n

    \u7ed8\u5236<\/p>\n

    \u5b9e\u9645\u4e0a\u3002<\/p>\n

    \u771f\u6b63：<\/p>\n

    Paint\u3002<\/p>\n

    \u8d1f\u8d23：<\/p>\n

    \u7684\u662f：<\/p>\n

    Generate Draw Command<\/p>\n

    \u4e5f\u5c31\u662f：<\/p>\n

    \u751f\u6210：<\/p>\n

    \u7ed8\u5236：<\/p>\n

    \u547d\u4ee4\u3002<\/p>\n

    \u4e0d\u662f：<\/p>\n

    \u7acb\u5373：<\/p>\n

    \u753b\u3002<\/p>\n

    \u4f8b\u5982：<\/p>\n

    Text("HarmonyOS")<\/p>\n

    \u771f\u6b63：<\/p>\n

    Paint\u3002<\/p>\n

    \u4e0d\u4f1a：<\/p>\n

    \u7acb\u5373：<\/p>\n

    \u6267\u884c：<\/p>\n

    canvas.drawText(…)<\/p>\n

    \u800c\u662f：<\/p>\n

    \u751f\u6210：<\/p>\n

    \u7c7b\u4f3c：<\/p>\n

    DrawText<\/p>\n

    x=20<\/p>\n

    y=50<\/p>\n

    font=16<\/p>\n

    color=#333<\/p>\n

    \u4fdd\u5b58：<\/p>\n

    \u4e0b\u6765\u3002<\/p>\n

    \u6700\u540e：<\/p>\n

    \u7edf\u4e00：<\/p>\n

    \u63d0\u4ea4\u3002<\/p>\n

    \n

    Runtime \u771f\u6b63\u6d41\u7a0b<\/h2>\n

    \u771f\u6b63：<\/p>\n

    Pipeline：<\/p>\n

    \u5982\u4e0b：<\/p>\n

    Build()<\/p>\n

    \u2193<\/p>\n

    Measure()<\/p>\n

    \u2193<\/p>\n

    Layout()<\/p>\n

    \u2193<\/p>\n

    Paint()<\/p>\n

    \u2193<\/p>\n

    DrawCommand<\/p>\n

    \u2193<\/p>\n

    RenderNode<\/p>\n

    \u2193<\/p>\n

    RenderService<\/p>\n

    \u2193<\/p>\n

    GPU<\/p>\n

    \u771f\u6b63：<\/p>\n

    GPU\u3002<\/p>\n

    \u76f4\u5230：<\/p>\n

    \u6700\u540e：<\/p>\n

    \u4e00\u6b65\u3002<\/p>\n

    \u624d：<\/p>\n

    \u77e5\u9053：<\/p>\n

    UI\u3002<\/p>\n

    \u662f\u4ec0\u4e48\u3002<\/p>\n

    \n

    \u4e3a\u4ec0\u4e48\u4e0d\u76f4\u63a5 Canvas？<\/h2>\n

    \u4f8b\u5982：<\/p>\n

    Android\u3002<\/p>\n

    \u4f20\u7edf：<\/p>\n

    View\u3002<\/p>\n

    \u5f88\u591a：<\/p>\n

    \u7ec4\u4ef6\u3002<\/p>\n

    \u76f4\u63a5：<\/p>\n

    onDraw(Canvas canvas)<\/p>\n

    HarmonyOS\u3002<\/p>\n

    \u6ca1\u6709\u3002<\/p>\n

    \u4e3a\u4ec0\u4e48？<\/p>\n

    \u56e0\u4e3a：<\/p>\n

    Canvas\u3002<\/p>\n

    \u5c5e\u4e8e：<\/p>\n

    CPU\u3002<\/p>\n

    \u771f\u6b63：<\/p>\n

    ArkUI\u3002<\/p>\n

    \u5e0c\u671b：<\/p>\n

    RenderService\u3002<\/p>\n

    \u7edf\u4e00：<\/p>\n

    \u8c03\u5ea6\u3002<\/p>\n

    GPU\u3002<\/p>\n

    \u56e0\u6b64：<\/p>\n

    Paint\u3002<\/p>\n

    \u9636\u6bb5\u3002<\/p>\n

    \u4e0d\u80fd：<\/p>\n

    \u7acb\u5373：<\/p>\n

    \u753b\u3002<\/p>\n

    \n

    PaintMethod<\/h2>\n

    \u771f\u6b63：<\/p>\n

    ACE Engine\u3002<\/p>\n

    \u6bcf\u4e00\u4e2a：<\/p>\n

    \u7ec4\u4ef6\u3002<\/p>\n

    \u90fd\u4f1a：<\/p>\n

    \u521b\u5efa：<\/p>\n

    PaintMethod<\/p>\n

    \u4f8b\u5982：<\/p>\n

    TextPaintMethod<\/p>\n

    ButtonPaintMethod<\/p>\n

    ImagePaintMethod<\/p>\n

    ListPaintMethod<\/p>\n

    \u771f\u6b63：<\/p>\n

    Paint\u3002<\/p>\n

    \u6267\u884c：<\/p>\n

    Pattern<\/p>\n

    \u2193<\/p>\n

    Create PaintMethod<\/p>\n

    \u2193<\/p>\n

    Generate DrawCommand<\/p>\n

    \u4e0d\u662f：<\/p>\n

    Pattern\u3002<\/p>\n

    \u81ea\u5df1：<\/p>\n

    \u753b\u3002<\/p>\n

    \n

    PaintMethod \u5185\u90e8\u7ed3\u6784<\/h2>\n

    \u62bd\u8c61：<\/p>\n

    \u4ee5\u540e：<\/p>\n

    \u66f4\u63a5\u8fd1：<\/p>\n

    class PaintMethod {<\/p>\n

    public:<\/p>\n

    virtual GetContentDrawFunction();<\/p>\n

    virtual GetOverlayDrawFunction();<\/p>\n

    virtual GetForegroundDrawFunction();<\/p>\n

    };<\/p>\n

    \u5f88\u591a：<\/p>\n

    \u5f00\u53d1\u8005：<\/p>\n

    \u7b2c\u4e00\u6b21：<\/p>\n

    \u770b\u5230：<\/p>\n

    \u90fd\u4f1a：<\/p>\n

    \u7591\u60d1\u3002<\/p>\n

    \u4e3a\u4ec0\u4e48：<\/p>\n

    \u4e09\u4e2a：<\/p>\n

    Draw？<\/p>\n

    \u539f\u56e0：<\/p>\n

    \u5c31\u662f：<\/p>\n

    ArkUI\u3002<\/p>\n

    \u771f\u6b63：<\/p>\n

    \u652f\u6301：<\/p>\n

    \u56fe\u5c42\u3002<\/p>\n

    \n

    Content Layer<\/h2>\n

    \u4f8b\u5982：<\/p>\n

    Button：<\/p>\n

    \u771f\u6b63：<\/p>\n

    \u4e3b\u4f53：<\/p>\n

    \u5185\u5bb9：<\/p>\n

    Background<\/p>\n

    \u2193<\/p>\n

    Text<\/p>\n

    \u2193<\/p>\n

    Icon<\/p>\n

    \u5168\u90e8：<\/p>\n

    \u5c5e\u4e8e：<\/p>\n

    Content<\/p>\n

    \n

    Foreground Layer<\/h2>\n

    \u4f8b\u5982：<\/p>\n

    Button：<\/p>\n

    \u83b7\u5f97：<\/p>\n

    \u7126\u70b9：<\/p>\n

    \u771f\u6b63：<\/p>\n

    \u7ed8\u5236：<\/p>\n

    Focus Ring<\/p>\n

    \u4f8b\u5982：<\/p>\n

    Hover：<\/p>\n

    \u771f\u6b63：<\/p>\n

    \u7ed8\u5236：<\/p>\n

    Highlight<\/p>\n

    \u771f\u6b63：<\/p>\n

    \u5c5e\u4e8e：<\/p>\n

    Foreground<\/p>\n

    \u4e0d\u662f：<\/p>\n

    Content\u3002<\/p>\n

    \n

    Overlay Layer<\/h2>\n

    \u4f8b\u5982：<\/p>\n

    Tooltip：<\/p>\n

    Popup：<\/p>\n

    Selection：<\/p>\n

    \u771f\u6b63：<\/p>\n

    \u7ed8\u5236：<\/p>\n

    \u5728：<\/p>\n

    Overlay<\/p>\n

    \u4f8b\u5982：<\/p>\n

    Text：<\/p>\n

    \u9009\u62e9：<\/p>\n

    \u6587\u5b57：<\/p>\n

    \u771f\u6b63：<\/p>\n

    \u84dd\u8272：<\/p>\n

    \u533a\u57df\u3002<\/p>\n

    \u5c31\u662f：<\/p>\n

    Overlay\u3002<\/p>\n

    \n

    \u4e3a\u4ec0\u4e48\u5206\u5c42？<\/h2>\n

    \u6765\u770b：<\/p>\n

    Button：<\/p>\n

    Hover\u3002<\/p>\n

    \u5982\u679c：<\/p>\n

    \u6ca1\u6709：<\/p>\n

    Layer\u3002<\/p>\n

    \u771f\u6b63：<\/p>\n

    \u5237\u65b0：<\/p>\n

    Button<\/p>\n

    \u2193<\/p>\n

    Background<\/p>\n

    \u2193<\/p>\n

    Text<\/p>\n

    \u2193<\/p>\n

    Icon<\/p>\n

    \u5168\u90e8：<\/p>\n

    \u91cd\u65b0：<\/p>\n

    \u753b\u3002<\/p>\n

    \u73b0\u5728：<\/p>\n

    \u53ea：<\/p>\n

    \u66f4\u65b0：<\/p>\n

    Foreground<\/p>\n

    \u6027\u80fd：<\/p>\n

    \u6781\u9ad8\u3002<\/p>\n

    \n

    PaintProperty<\/h2>\n

    \u5f88\u591a：<\/p>\n

    \u5f00\u53d1\u8005：<\/p>\n

    \u8ba4\u4e3a：<\/p>\n

    PaintMethod\u3002<\/p>\n

    \u4fdd\u5b58：<\/p>\n

    \u989c\u8272\u3002<\/p>\n

    \u5b9e\u9645\u4e0a：<\/p>\n

    \u4e0d\u662f\u3002<\/p>\n

    \u771f\u6b63：<\/p>\n

    \u989c\u8272：<\/p>\n

    \u5168\u90e8：<\/p>\n

    \u4fdd\u5b58：<\/p>\n

    PaintProperty<\/p>\n

    \u4f8b\u5982：<\/p>\n

    .backgroundColor(Color.Red)<\/p>\n

    .opacity(0.5)<\/p>\n

    .shadow()<\/p>\n

    .borderRadius()<\/p>\n

    \u771f\u6b63：<\/p>\n

    \u4fdd\u5b58：<\/p>\n

    PaintProperty<\/p>\n

    PaintMethod\u3002<\/p>\n

    \u53ea\u662f：<\/p>\n

    \u8bfb\u53d6\u3002<\/p>\n

    \n

    GeometryNode \u5728 Paint \u4e2d\u6709\u4ec0\u4e48\u7528？<\/h2>\n

    \u771f\u6b63：<\/p>\n

    Paint\u3002<\/p>\n

    \u7b2c\u4e00\u6b65：<\/p>\n

    \u8bfb\u53d6：<\/p>\n

    GeometryNode<\/p>\n

    \u4f8b\u5982：<\/p>\n

    x=20<\/p>\n

    y=50<\/p>\n

    width=300<\/p>\n

    height=80<\/p>\n

    \u7136\u540e：<\/p>\n

    \u751f\u6210：<\/p>\n

    \u771f\u6b63：<\/p>\n

    DrawCommand\u3002<\/p>\n

    \u5982\u679c：<\/p>\n

    \u6ca1\u6709：<\/p>\n

    Geometry\u3002<\/p>\n

    Paint\u3002<\/p>\n

    \u6839\u672c：<\/p>\n

    \u4e0d\u77e5\u9053：<\/p>\n

    \u753b：<\/p>\n

    \u54ea\u91cc\u3002<\/p>\n

    \n

    DrawContext<\/h2>\n

    \u771f\u6b63：<\/p>\n

    ACE Engine\u3002<\/p>\n

    \u4e0d\u4f1a：<\/p>\n

    \u76f4\u63a5：<\/p>\n

    \u4f20：<\/p>\n

    Canvas\u3002<\/p>\n

    \u800c\u662f：<\/p>\n

    DrawContext<\/p>\n

    \u91cc\u9762：<\/p>\n

    \u901a\u5e38：<\/p>\n

    \u5305\u542b：<\/p>\n

    Canvas<\/p>\n

    Geometry<\/p>\n

    PaintProperty<\/p>\n

    RenderContext<\/p>\n

    \u771f\u6b63：<\/p>\n

    PaintMethod\u3002<\/p>\n

    \u62ff\u5230：<\/p>\n

    DrawContext\u3002<\/p>\n

    \u624d\u80fd：<\/p>\n

    \u5f00\u59cb：<\/p>\n

    \u751f\u6210：<\/p>\n

    \u7ed8\u5236：<\/p>\n

    \u547d\u4ee4\u3002<\/p>\n

    \n

    DrawCommand<\/h2>\n

    \u771f\u6b63：<\/p>\n

    RenderService\u3002<\/p>\n

    \u6536\u5230：<\/p>\n

    \u4e0d\u662f：<\/p>\n

    Button\u3002<\/p>\n

    \u4e0d\u662f：<\/p>\n

    Text\u3002<\/p>\n

    \u800c\u662f：<\/p>\n

    DrawRect<\/p>\n

    \u2193<\/p>\n

    DrawImage<\/p>\n

    \u2193<\/p>\n

    DrawText<\/p>\n

    \u2193<\/p>\n

    DrawPath<\/p>\n

    \u7c7b\u4f3c：<\/p>\n

    GPU\u3002<\/p>\n

    \u547d\u4ee4\u3002<\/p>\n

    \u6240\u4ee5：<\/p>\n

    RenderService\u3002<\/p>\n

    \u5b8c\u5168：<\/p>\n

    \u4e0d\u77e5\u9053：<\/p>\n

    \u4ec0\u4e48：<\/p>\n

    \u53eb：<\/p>\n

    Button\u3002<\/p>\n

    \n

    RenderNode<\/h2>\n

    \u771f\u6b63：<\/p>\n

    Paint\u3002<\/p>\n

    \u7ed3\u675f：<\/p>\n

    \u4ee5\u540e\u3002<\/p>\n

    \u751f\u6210：<\/p>\n

    RenderNode<\/p>\n

    \u91cc\u9762：<\/p>\n

    \u4fdd\u5b58：<\/p>\n

    Transform<\/p>\n

    Clip<\/p>\n

    Opacity<\/p>\n

    DrawCommand<\/p>\n

    Children<\/p>\n

    RenderNode\u3002<\/p>\n

    \u771f\u6b63：<\/p>\n

    \u5bf9\u5e94：<\/p>\n

    GPU\u3002<\/p>\n

    \u8282\u70b9\u3002<\/p>\n

    \u4e0d\u662f：<\/p>\n

    FrameNode\u3002<\/p>\n

    \n

    \u4e3a\u4ec0\u4e48\u8fd8\u6709 RenderNode？<\/h2>\n

    \u5f88\u591a\u4eba：<\/p>\n

    \u7b2c\u4e00\u6b21：<\/p>\n

    \u770b：<\/p>\n

    \u6e90\u7801\u3002<\/p>\n

    \u90fd\u4f1a：<\/p>\n

    \u7591\u60d1\u3002<\/p>\n

    \u5df2\u7ecf：<\/p>\n

    \u6709：<\/p>\n

    FrameNode\u3002<\/p>\n

    \u4e3a\u4ec0\u4e48：<\/p>\n

    \u8fd8：<\/p>\n

    \u9700\u8981：<\/p>\n

    RenderNode？<\/p>\n

    \u539f\u56e0：<\/p>\n

    \u975e\u5e38：<\/p>\n

    \u7b80\u5355\u3002<\/p>\n

    FrameNode\u3002<\/p>\n

    \u4fdd\u5b58：<\/p>\n

    State<\/p>\n

    Property<\/p>\n

    Event<\/p>\n

    Pattern<\/p>\n

    GPU\u3002<\/p>\n

    \u6839\u672c：<\/p>\n

    \u4e0d\u9700\u8981\u3002<\/p>\n

    GPU\u3002<\/p>\n

    \u771f\u6b63：<\/p>\n

    \u9700\u8981：<\/p>\n

    \u53ea\u6709：<\/p>\n

    Geometry<\/p>\n

    DrawCommand<\/p>\n

    Transform<\/p>\n

    \u6240\u4ee5：<\/p>\n

    Runtime\u3002<\/p>\n

    \u771f\u6b63：<\/p>\n

    \u751f\u6210：<\/p>\n

    RenderNode\u3002<\/p>\n

    \u63d0\u4ea4：<\/p>\n

    GPU\u3002<\/p>\n

    \n

    Paint Dirty<\/h2>\n

    \u4f8b\u5982：<\/p>\n

    \u4fee\u6539：<\/p>\n

    .backgroundColor(Color.Blue)<\/p>\n

    \u771f\u6b63：<\/p>\n

    FrameNode：<\/p>\n

    \u6807\u8bb0：<\/p>\n

    Paint Dirty<\/p>\n

    \u4e0b\u4e00\u5e27：<\/p>\n

    \u771f\u6b63：<\/p>\n

    \u6267\u884c：<\/p>\n

    Paint()<\/p>\n

    \u2193<\/p>\n

    RenderNode Update<\/p>\n

    Layout\u3002<\/p>\n

    \u4e0d\u4f1a：<\/p>\n

    \u6267\u884c\u3002<\/p>\n

    Measure\u3002<\/p>\n

    \u4e0d\u4f1a：<\/p>\n

    \u6267\u884c\u3002<\/p>\n

    \n

    Opacity \u4e3a\u4ec0\u4e48\u4e0d\u5361？<\/h2>\n

    \u4f8b\u5982：<\/p>\n

    \u52a8\u753b：<\/p>\n

    .animateTo({<\/p>\n

    duration:300<\/p>\n

    }){<\/p>\n

    this.opacity=0<\/p>\n

    }<\/p>\n

    \u771f\u6b63：<\/p>\n

    Runtime\u3002<\/p>\n

    \u6bcf\u4e00\u5e27：<\/p>\n

    \u66f4\u65b0：<\/p>\n

    Opacity<\/p>\n

    \u771f\u6b63：<\/p>\n

    Dirty：<\/p>\n

    \u53ea\u6709：<\/p>\n

    Paint Dirty<\/p>\n

    \u771f\u6b63：<\/p>\n

    Layout\u3002<\/p>\n

    \u5b8c\u5168：<\/p>\n

    \u8df3\u8fc7\u3002<\/p>\n

    Measure\u3002<\/p>\n

    \u5b8c\u5168：<\/p>\n

    \u8df3\u8fc7\u3002<\/p>\n

    \u6240\u4ee5：<\/p>\n

    Opacity\u3002<\/p>\n

    \u52a8\u753b\u3002<\/p>\n

    \u53ef\u4ee5：<\/p>\n

    \u7a33\u5b9a：<\/p>\n

    60FPS\u3002<\/p>\n

    \n

    Clip \u4e3a\u4ec0\u4e48\u4e0d\u7528\u91cd\u65b0 Paint？<\/h2>\n

    \u4f8b\u5982：<\/p>\n

    Scroll\u3002<\/p>\n

    \u771f\u6b63：<\/p>\n

    \u53ea\u662f：<\/p>\n

    Clip Rect<\/p>\n

    \u53d8\u5316\u3002<\/p>\n

    \u771f\u6b63：<\/p>\n

    DrawCommand\u3002<\/p>\n

    \u5f88\u591a：<\/p>\n

    \u60c5\u51b5\u4e0b：<\/p>\n

    \u4e0d\u7528：<\/p>\n

    \u91cd\u65b0：<\/p>\n

    \u751f\u6210\u3002<\/p>\n

    \u771f\u6b63：<\/p>\n

    \u66f4\u65b0：<\/p>\n

    \u7684\u662f：<\/p>\n

    RenderNode Clip<\/p>\n

    \u56e0\u6b64：<\/p>\n

    Scroll\u3002<\/p>\n

    \u6027\u80fd\u3002<\/p>\n

    \u6781\u9ad8\u3002<\/p>\n

    \n

    RenderContext<\/h2>\n

    \u6574\u4e2a：<\/p>\n

    Paint\u3002<\/p>\n

    \u6700\u7ec8：<\/p>\n

    \u90fd：<\/p>\n

    \u4f1a：<\/p>\n

    \u66f4\u65b0：<\/p>\n

    RenderContext<\/p>\n

    \u771f\u6b63：<\/p>\n

    \u91cc\u9762：<\/p>\n

    \u4fdd\u5b58：<\/p>\n

    Transform<\/p>\n

    Opacity<\/p>\n

    Scale<\/p>\n

    Rotation<\/p>\n

    Shadow<\/p>\n

    Mask<\/p>\n

    Clip<\/p>\n

    RenderContext\u3002<\/p>\n

    \u771f\u6b63：<\/p>\n

    \u8d1f\u8d23：<\/p>\n

    \u540c\u6b65：<\/p>\n

    RenderNode\u3002<\/p>\n

    \n

    Paint Pipeline<\/h2>\n

    \u771f\u6b63：<\/p>\n

    \u5b8c\u6574：<\/p>\n

    \u6d41\u7a0b：<\/p>\n

    FrameNode<\/p>\n

    \u2193<\/p>\n

    Pattern<\/p>\n

    \u2193<\/p>\n

    PaintMethod<\/p>\n

    \u2193<\/p>\n

    DrawContext<\/p>\n

    \u2193<\/p>\n

    DrawCommand<\/p>\n

    \u2193<\/p>\n

    RenderNode<\/p>\n

    \u2193<\/p>\n

    RenderContext<\/p>\n

    \u2193<\/p>\n

    RenderService<\/p>\n

    \u6ce8\u610f：<\/p>\n

    \u6574\u4e2a：<\/p>\n

    Paint\u3002<\/p>\n

    \u8fc7\u7a0b\u3002<\/p>\n

    \u6ca1\u6709：<\/p>\n

    \u771f\u6b63：<\/p>\n

    GPU\u3002<\/p>\n

    GPU\u3002<\/p>\n

    \u771f\u6b63：<\/p>\n

    \u5f00\u59cb：<\/p>\n

    \u5de5\u4f5c\u3002<\/p>\n

    \u662f\u5728：<\/p>\n

    RenderService\u3002<\/p>\n

    \u6536\u5230：<\/p>\n

    RenderNode\u3002<\/p>\n

    \u4ee5\u540e\u3002<\/p>\n

    \n

    \u4e3a\u4ec0\u4e48 Paint \u548c Render \u5206\u79bb？<\/h2>\n

    \u5f88\u591a：<\/p>\n

    UI：<\/p>\n

    \u6846\u67b6\u3002<\/p>\n

    \u76f4\u63a5：<\/p>\n

    Paint<\/p>\n

    \u2193<\/p>\n

    GPU<\/p>\n

    HarmonyOS\u3002<\/p>\n

    \u6ca1\u6709\u3002<\/p>\n

    \u771f\u6b63：<\/p>\n

    \u62c6\u6210：<\/p>\n

    Paint<\/p>\n

    \u2193<\/p>\n

    RenderNode<\/p>\n

    \u2193<\/p>\n

    RenderService<\/p>\n

    \u2193<\/p>\n

    GPU<\/p>\n

    \u539f\u56e0：<\/p>\n

    \u5c31\u662f：<\/p>\n

    RenderService\u3002<\/p>\n

    \u662f：<\/p>\n

    \u72ec\u7acb：<\/p>\n

    \u8fdb\u7a0b\u3002<\/p>\n

    ACE Engine\u3002<\/p>\n

    \u548c：<\/p>\n

    GPU\u3002<\/p>\n

    \u5e76：<\/p>\n

    \u4e0d\u5728：<\/p>\n

    \u540c\u4e00\u4e2a：<\/p>\n

    \u8fdb\u7a0b\u3002<\/p>\n

    \u8fd9\u6837：<\/p>\n

    \u5e94\u7528：<\/p>\n

    \u5d29\u6e83\u3002<\/p>\n

    \u4e0d\u4f1a：<\/p>\n

    \u76f4\u63a5：<\/p>\n

    \u5f71\u54cd：<\/p>\n

    \u6574\u4e2a：<\/p>\n

    \u56fe\u5f62：<\/p>\n

    \u7cfb\u7edf\u3002<\/p>\n

    \n

    RenderNode \u6811<\/h2>\n

    \u771f\u6b63：<\/p>\n

    FrameNode：<\/p>\n

    \u6811：<\/p>\n

    Column<\/p>\n

    \u251c\u2500\u2500Text<\/p>\n

    \u251c\u2500\u2500Image<\/p>\n

    \u2514\u2500\u2500Button<\/p>\n

    Paint\u3002<\/p>\n

    \u4ee5\u540e：<\/p>\n

    \u53d8\u6210：<\/p>\n

    RenderNode<\/p>\n

    \u251c\u2500\u2500TextNode<\/p>\n

    \u251c\u2500\u2500ImageNode<\/p>\n

    \u2514\u2500\u2500ButtonNode<\/p>\n

    \u8fd9\u91cc：<\/p>\n

    \u5df2\u7ecf：<\/p>\n

    \u6ca1\u6709：<\/p>\n

    EventHub\u3002<\/p>\n

    \u6ca1\u6709：<\/p>\n

    Pattern\u3002<\/p>\n

    \u6ca1\u6709：<\/p>\n

    LayoutProperty\u3002<\/p>\n

    \u53ea：<\/p>\n

    \u5269\u4e0b：<\/p>\n

    \u6e32\u67d3：<\/p>\n

    \u4fe1\u606f\u3002<\/p>\n

    \n

    Paint \u5b50\u7cfb\u7edf\u603b\u7ed3<\/h2>\n

    \u6574\u4e2a Paint Engine \u53ef\u4ee5\u62bd\u8c61\u6210\u4e0b\u9762\u8fd9\u5f20\u56fe：<\/p>\n

    GeometryNode
    \n \u2502
    \n \u25bc
    \nPaintProperty
    \n \u2502
    \n \u25bc
    \nPaintMethod
    \n \u2502
    \n \u25bc
    \nDrawCommand
    \n \u2502
    \n \u25bc
    \nRenderNode
    \n \u2502
    \n \u25bc
    \nRenderContext
    \n \u2502
    \n \u25bc
    \nRenderService<\/p>\n

    \u53ef\u4ee5\u770b\u5230：<\/p>\n

    Paint \u9636\u6bb5\u5e76\u4e0d\u662f\u201c\u753b\u56fe\u201d，\u800c\u662f\u628a UI \u63cf\u8ff0\u8f6c\u6362\u4e3a\u4e00\u7ec4\u6807\u51c6\u5316\u7684\u7ed8\u5236\u547d\u4ee4，\u5e76\u7ec4\u7ec7\u6210 RenderNode \u6811，\u4e3a RenderService \u505a\u51c6\u5907\u3002<\/p>\n

    \u8fd9\u4e5f\u662f HarmonyOS \u80fd\u591f\u505a\u5230：<\/p>\n

      \n
    • UI \u7ebf\u7a0b\u4e0e\u6e32\u67d3\u7ebf\u7a0b\u89e3\u8026<\/li>\n
    • \u9ad8\u6027\u80fd\u52a8\u753b<\/li>\n
    • \u5c40\u90e8\u5237\u65b0（Dirty Region）<\/li>\n
    • GPU \u6279\u91cf\u63d0\u4ea4（Batch Submit）<\/li>\n
    • \u8de8\u8fdb\u7a0b\u6e32\u67d3<\/li>\n<\/ul>\n

      \u7684\u6838\u5fc3\u57fa\u7840\u3002<\/p>\n

      RenderService（RS）\u6e90\u7801\u7ea7\u6df1\u5ea6\u89e3\u6790（\u4e00）\u2014\u2014 HarmonyOS \u4e3a\u4ec0\u4e48\u628a\u6e32\u67d3\u653e\u5230\u72ec\u7acb\u8fdb\u7a0b？<\/h2>\n

      \u5230\u76ee\u524d\u4e3a\u6b62，\u6211\u4eec\u5df2\u7ecf\u5206\u6790\u5b8c\u4e86 ArkUI Runtime\u3002<\/p>\n

      \u6574\u4e2a\u8c03\u7528\u94fe\u5df2\u7ecf\u53d8\u6210：<\/p>\n

      @State<\/p>\n

      \u2193<\/p>\n

      ObservedProperty<\/p>\n

      \u2193<\/p>\n

      Build()<\/p>\n

      \u2193<\/p>\n

      FrameNode<\/p>\n

      \u2193<\/p>\n

      Layout<\/p>\n

      \u2193<\/p>\n

      Paint<\/p>\n

      \u2193<\/p>\n

      RenderNode<\/p>\n

      \u5f88\u591a\u5f00\u53d1\u8005\u8ba4\u4e3a：<\/p>\n

      \u4e0b\u4e00\u6b65：<\/p>\n

      \u5c31\u662f：<\/p>\n

      GPU<\/p>\n

      \u5176\u5b9e\u3002<\/p>\n

      \u8fd8\u5dee：<\/p>\n

      \u6574\u4e2a HarmonyOS \u56fe\u5f62\u7cfb\u7edf\u6700\u91cd\u8981\u7684\u4e00\u5c42：<\/p>\n

      RenderService（RS）<\/p>\n

      \u5982\u679c\u8bf4：<\/p>\n

      ACE Engine\u3002<\/p>\n

      \u8d1f\u8d23：<\/p>\n

      \u751f\u6210 UI<\/p>\n

      \u90a3\u4e48：<\/p>\n

      RenderService\u3002<\/p>\n

      \u8d1f\u8d23：<\/p>\n

      \u771f\u6b63\u8ba9 UI \u51fa\u73b0\u5728\u5c4f\u5e55\u4e0a<\/p>\n

      \n

      \u4ec0\u4e48\u662f RenderService？<\/h2>\n

      \u4e00\u53e5\u8bdd：<\/p>\n

      RenderService（RS）\u5c31\u662f HarmonyOS \u7684\u7cfb\u7edf\u7ea7\u6e32\u67d3\u670d\u52a1\u3002<\/p>\n

      \u53ef\u4ee5\u7406\u89e3\u6210：<\/p>\n

      ArkUI<\/p>\n

      \u2193<\/p>\n

      RenderService<\/p>\n

      \u2193<\/p>\n

      GPU<\/p>\n

      \u2193<\/p>\n

      Display<\/p>\n

      \u5b83\u5e76\u4e0d\u662f：<\/p>\n

      \u5e94\u7528\u7684\u4e00\u90e8\u5206\u3002<\/p>\n

      \u800c\u662f：<\/p>\n

      \u7cfb\u7edf\u8fdb\u7a0b\u3002<\/p>\n

      \u4e5f\u5c31\u662f\u8bf4：<\/p>\n

      \u4f60\u7684 App\u3002<\/p>\n

      \u548c：<\/p>\n

      RenderService\u3002<\/p>\n

      \u5e76\u4e0d\u5728：<\/p>\n

      \u540c\u4e00\u4e2a：<\/p>\n

      \u8fdb\u7a0b\u3002<\/p>\n

      \n

      \u4e3a\u4ec0\u4e48\u8bbe\u8ba1\u6210\u72ec\u7acb\u8fdb\u7a0b？<\/h2>\n

      \u8fd9\u662f HarmonyOS \u56fe\u5f62\u67b6\u6784\u6700\u5927\u7684\u7279\u70b9\u4e4b\u4e00\u3002<\/p>\n

      \u5f88\u591a\u4f20\u7edf UI \u6846\u67b6：<\/p>\n

      \u4f8b\u5982：<\/p>\n

      Android \u65e9\u671f：<\/p>\n

      App<\/p>\n

      \u2193<\/p>\n

      Canvas<\/p>\n

      \u2193<\/p>\n

      GPU<\/p>\n

      \u5168\u90e8：<\/p>\n

      \u53d1\u751f：<\/p>\n

      \u5728：<\/p>\n

      App\u3002<\/p>\n

      \u91cc\u9762\u3002<\/p>\n

      \u5982\u679c：<\/p>\n

      App：<\/p>\n

      \u5361\u4f4f：<\/p>\n

      GPU\u3002<\/p>\n

      \u4e5f：<\/p>\n

      \u5bb9\u6613：<\/p>\n

      \u53d7\u5230：<\/p>\n

      \u5f71\u54cd\u3002<\/p>\n

      HarmonyOS\u3002<\/p>\n

      \u8bbe\u8ba1：<\/p>\n

      \u53d8\u6210：<\/p>\n

      App<\/p>\n

      \u2193<\/p>\n

      ACE Engine<\/p>\n

      \u2193<\/p>\n

      IPC<\/p>\n

      \u2193<\/p>\n

      RenderService<\/p>\n

      \u2193<\/p>\n

      GPU<\/p>\n

      \u771f\u6b63：<\/p>\n

      \u7ed8\u5236：<\/p>\n

      \u5b8c\u5168：<\/p>\n

      \u4ea4\u7ed9：<\/p>\n

      RS\u3002<\/p>\n

      \n

      \u4e3a\u4ec0\u4e48\u8fd9\u6837\u66f4\u7a33\u5b9a？<\/h2>\n

      \u4f8b\u5982：<\/p>\n

      App：<\/p>\n

      \u53d1\u751f：<\/p>\n

      \u6b7b\u5faa\u73af：<\/p>\n

      while(true){<\/p>\n

      }<\/p>\n

      UI\u3002<\/p>\n

      \u7ebf\u7a0b：<\/p>\n

      \u5df2\u7ecf：<\/p>\n

      \u5361\u6b7b\u3002<\/p>\n

      \u4f46\u662f：<\/p>\n

      RenderService\u3002<\/p>\n

      \u4ecd\u7136：<\/p>\n

      \u8fd0\u884c\u3002<\/p>\n

      \u7cfb\u7edf：<\/p>\n

      \u8fd8\u80fd：<\/p>\n

      \u7ee7\u7eed：<\/p>\n

      \u7ed8\u5236：<\/p>\n

      \u5176\u4ed6：<\/p>\n

      \u5e94\u7528\u3002<\/p>\n

      \u4e0d\u4f1a：<\/p>\n

      \u6574\u4e2a：<\/p>\n

      \u56fe\u5f62：<\/p>\n

      \u7cfb\u7edf：<\/p>\n

      \u5d29\u6e83\u3002<\/p>\n

      \u8fd9\u5c31\u662f：<\/p>\n

      \u7cfb\u7edf：<\/p>\n

      \u7ea7：<\/p>\n

      \u9694\u79bb\u3002<\/p>\n

      \n

      RenderService \u5728\u7cfb\u7edf\u4e2d\u7684\u4f4d\u7f6e<\/h2>\n

      \u6574\u4e2a：<\/p>\n

      HarmonyOS\u3002<\/p>\n

      \u56fe\u5f62：<\/p>\n

      \u67b6\u6784：<\/p>\n

      \u66f4\u63a5\u8fd1：<\/p>\n

      Application<\/p>\n

      \u2193<\/p>\n

      ArkUI<\/p>\n

      \u2193<\/p>\n

      ACE Engine<\/p>\n

      \u2193<\/p>\n

      RenderNode Tree<\/p>\n

      \u2193<\/p>\n

      IPC<\/p>\n

      \u2193<\/p>\n

      RenderService<\/p>\n

      \u2193<\/p>\n

      RSNode Tree<\/p>\n

      \u2193<\/p>\n

      RenderThread<\/p>\n

      \u2193<\/p>\n

      GPU<\/p>\n

      \u2193<\/p>\n

      Display<\/p>\n

      \u6ce8\u610f：<\/p>\n

      \u4ece：<\/p>\n

      RenderService\u3002<\/p>\n

      \u5f00\u59cb\u3002<\/p>\n

      \u5df2\u7ecf：<\/p>\n

      \u5b8c\u5168：<\/p>\n

      \u4e0d\u77e5\u9053：<\/p>\n

      \u4ec0\u4e48：<\/p>\n

      \u53eb：<\/p>\n

      Button\u3002<\/p>\n

      \u4ec0\u4e48：<\/p>\n

      \u53eb：<\/p>\n

      Text\u3002<\/p>\n

      \n

      RenderNode \u4e3a\u4ec0\u4e48\u4e0d\u80fd\u76f4\u63a5\u7ed9 GPU？<\/h2>\n

      \u6765\u770b：<\/p>\n

      Paint\u3002<\/p>\n

      \u751f\u6210：<\/p>\n

      RenderNode<\/p>\n

      \u5f88\u591a\u4eba：<\/p>\n

      \u89c9\u5f97：<\/p>\n

      \u5df2\u7ecf：<\/p>\n

      \u53ef\u4ee5：<\/p>\n

      GPU\u3002<\/p>\n

      \u5176\u5b9e：<\/p>\n

      \u8fd8：<\/p>\n

      \u4e0d\u884c\u3002<\/p>\n

      \u539f\u56e0：<\/p>\n

      \u5c31\u662f：<\/p>\n

      RenderNode\u3002<\/p>\n

      \u5c5e\u4e8e：<\/p>\n

      ACE\u3002<\/p>\n

      \u5bf9\u8c61\u3002<\/p>\n

      GPU\u3002<\/p>\n

      \u6839\u672c：<\/p>\n

      \u4e0d\u8ba4\u8bc6\u3002<\/p>\n

      \u771f\u6b63：<\/p>\n

      RS\u3002<\/p>\n

      \u9700\u8981：<\/p>\n

      \u8f6c\u6362：<\/p>\n

      \u6210：<\/p>\n

      RSNode<\/p>\n

      \n

      RSNode \u5230\u5e95\u662f\u4ec0\u4e48？<\/h2>\n

      \u771f\u6b63：<\/p>\n

      RenderService\u3002<\/p>\n

      \u7ef4\u62a4：<\/p>\n

      \u7684\u662f：<\/p>\n

      RSNode Tree<\/p>\n

      \u4f8b\u5982：<\/p>\n

      RSRootNode<\/p>\n

      \u251c\u2500\u2500RSCanvasNode<\/p>\n

      \u251c\u2500\u2500RSTextNode<\/p>\n

      \u251c\u2500\u2500RSImageNode<\/p>\n

      \u2514\u2500\u2500RSSurfaceNode<\/p>\n

      \u53ef\u4ee5\u770b\u5230：<\/p>\n

      \u5df2\u7ecf：<\/p>\n

      \u6ca1\u6709：<\/p>\n

      FrameNode\u3002<\/p>\n

      \u6ca1\u6709：<\/p>\n

      Pattern\u3002<\/p>\n

      \u6ca1\u6709：<\/p>\n

      EventHub\u3002<\/p>\n

      \u53ea：<\/p>\n

      \u5269\u4e0b：<\/p>\n

      \u771f\u6b63：<\/p>\n

      \u6e32\u67d3：<\/p>\n

      \u8282\u70b9\u3002<\/p>\n

      \n

      \u4e3a\u4ec0\u4e48\u8fd8\u8981 RSNode？<\/h2>\n

      \u5f88\u591a\u5f00\u53d1\u8005：<\/p>\n

      \u7b2c\u4e00\u6b21：<\/p>\n

      \u770b：<\/p>\n

      \u6e90\u7801\u3002<\/p>\n

      \u90fd\u4f1a：<\/p>\n

      \u89c9\u5f97：<\/p>\n

      \u91cd\u590d：<\/p>\n

      \u8bbe\u8ba1\u3002<\/p>\n

      \u5b9e\u9645\u4e0a：<\/p>\n

      \u4e0d\u662f\u3002<\/p>\n

      RenderNode：<\/p>\n

      \u5c5e\u4e8e：<\/p>\n

      App\u3002<\/p>\n

      RSNode：<\/p>\n

      \u5c5e\u4e8e：<\/p>\n

      \u7cfb\u7edf\u3002<\/p>\n

      \u4e24\u4e2a：<\/p>\n

      \u5bf9\u8c61\u3002<\/p>\n

      \u751f\u547d\u5468\u671f：<\/p>\n

      \u5b8c\u5168：<\/p>\n

      \u4e0d\u540c\u3002<\/p>\n

      \u4f8b\u5982：<\/p>\n

      App：<\/p>\n

      \u9000\u51fa\u3002<\/p>\n

      RenderNode：<\/p>\n

      \u9500\u6bc1\u3002<\/p>\n

      RS：<\/p>\n

      \u6536\u5230：<\/p>\n

      IPC\u3002<\/p>\n

      \u4ee5\u540e\u3002<\/p>\n

      \u518d：<\/p>\n

      \u5220\u9664：<\/p>\n

      RSNode\u3002<\/p>\n

      \n

      IPC \u662f\u5982\u4f55\u5de5\u4f5c\u7684？<\/h2>\n

      \u771f\u6b63：<\/p>\n

      ACE Engine\u3002<\/p>\n

      \u4e0d\u4f1a：<\/p>\n

      \u76f4\u63a5：<\/p>\n

      \u8c03\u7528：<\/p>\n

      RS\u3002<\/p>\n

      \u800c\u662f：<\/p>\n

      \u901a\u8fc7：<\/p>\n

      IPC<\/p>\n

      \u53d1\u9001：<\/p>\n

      \u547d\u4ee4\u3002<\/p>\n

      \u4f8b\u5982：<\/p>\n

      CreateNode<\/p>\n

      \u2193<\/p>\n

      UpdateNode<\/p>\n

      \u2193<\/p>\n

      DeleteNode<\/p>\n

      \u2193<\/p>\n

      Draw<\/p>\n

      \u771f\u6b63：<\/p>\n

      \u53d1\u9001：<\/p>\n

      \u7684\u662f：<\/p>\n

      \u5e8f\u5217\u5316：<\/p>\n

      \u6570\u636e\u3002<\/p>\n

      \u4e0d\u662f：<\/p>\n

      \u5bf9\u8c61\u3002<\/p>\n

      \n

      \u4e00\u6b21 Text \u66f4\u65b0\u5230\u5e95\u53d1\u751f\u4e86\u4ec0\u4e48？<\/h2>\n

      \u4f8b\u5982：<\/p>\n

      \u5f00\u53d1\u8005：<\/p>\n

      \u6267\u884c：<\/p>\n

      this.name = "HarmonyOS"<\/p>\n

      \u771f\u6b63：<\/p>\n

      \u5b8c\u6574：<\/p>\n

      \u6d41\u7a0b：<\/p>\n

      State<\/p>\n

      \u2193<\/p>\n

      Build()<\/p>\n

      \u2193<\/p>\n

      Diff<\/p>\n

      \u2193<\/p>\n

      Paint<\/p>\n

      \u2193<\/p>\n

      RenderNode Update<\/p>\n

      \u2193<\/p>\n

      Serialize<\/p>\n

      \u2193<\/p>\n

      IPC<\/p>\n

      \u2193<\/p>\n

      RenderService<\/p>\n

      \u2193<\/p>\n

      RSNode Update<\/p>\n

      \u2193<\/p>\n

      GPU<\/p>\n

      \u771f\u6b63：<\/p>\n

      \u8de8：<\/p>\n

      \u8fdb\u7a0b\u3002<\/p>\n

      \u53ea\u6709：<\/p>\n

      \u6700\u540e：<\/p>\n

      \u4e00\u6b21：<\/p>\n

      \u540c\u6b65\u3002<\/p>\n

      \n

      RSNode \u5185\u90e8\u7ed3\u6784<\/h2>\n

      \u771f\u6b63：<\/p>\n

      \u6e90\u7801：<\/p>\n

      \u8fdc\u6bd4：<\/p>\n

      \u6559\u7a0b：<\/p>\n

      \u590d\u6742\u3002<\/p>\n

      \u62bd\u8c61：<\/p>\n

      \u4ee5\u540e：<\/p>\n

      \u66f4\u63a5\u8fd1：<\/p>\n

      class RSNode {<\/p>\n

      NodeId id;<\/p>\n

      Matrix matrix;<\/p>\n

      Rect bounds;<\/p>\n

      Opacity opacity;<\/p>\n

      Clip clip;<\/p>\n

      Children children;<\/p>\n

      DrawCommand command;<\/p>\n

      }<\/p>\n

      \u53ef\u4ee5：<\/p>\n

      \u770b\u5230：<\/p>\n

      \u8fd9\u91cc：<\/p>\n

      \u5df2\u7ecf：<\/p>\n

      \u6ca1\u6709：<\/p>\n

      UI\u3002<\/p>\n

      \u903b\u8f91\u3002<\/p>\n

      \u5168\u90e8：<\/p>\n

      \u90fd\u662f：<\/p>\n

      GPU：<\/p>\n

      \u6570\u636e\u3002<\/p>\n

      \n

      RSCanvasNode<\/h2>\n

      \u5f88\u591a：<\/p>\n

      \u666e\u901a：<\/p>\n

      \u7ec4\u4ef6\u3002<\/p>\n

      \u6700\u7ec8：<\/p>\n

      \u90fd\u4f1a：<\/p>\n

      \u8f6c\u6362：<\/p>\n

      \u6210：<\/p>\n

      RSCanvasNode<\/p>\n

      \u91cc\u9762：<\/p>\n

      \u771f\u6b63：<\/p>\n

      \u4fdd\u5b58：<\/p>\n

      DrawRect<\/p>\n

      DrawText<\/p>\n

      DrawImage<\/p>\n

      DrawPath<\/p>\n

      \u8fd9\u4e9b：<\/p>\n

      \u547d\u4ee4\u3002<\/p>\n

      \u6700\u540e：<\/p>\n

      GPU：<\/p>\n

      \u76f4\u63a5：<\/p>\n

      \u6267\u884c\u3002<\/p>\n

      \n

      RSSurfaceNode<\/h2>\n

      \u771f\u6b63：<\/p>\n

      \u590d\u6742：<\/p>\n

      \u4e00\u70b9：<\/p>\n

      \u7684\u662f：<\/p>\n

      RSSurfaceNode<\/p>\n

      \u4f8b\u5982：<\/p>\n

      Video<\/p>\n

      Camera<\/p>\n

      XComponent<\/p>\n

      Web<\/p>\n

      \u8fd9\u4e9b：<\/p>\n

      \u7ec4\u4ef6\u3002<\/p>\n

      \u4e0d\u662f：<\/p>\n

      \u666e\u901a：<\/p>\n

      DrawCommand\u3002<\/p>\n

      \u800c\u662f：<\/p>\n

      \u72ec\u7acb：<\/p>\n

      Surface\u3002<\/p>\n

      \u771f\u6b63：<\/p>\n

      GPU\u3002<\/p>\n

      \u76f4\u63a5：<\/p>\n

      \u5408\u6210\u3002<\/p>\n

      \u6240\u4ee5：<\/p>\n

      \u89c6\u9891\u3002<\/p>\n

      \u64ad\u653e\u3002<\/p>\n

      \u4e0d\u4f1a：<\/p>\n

      \u7ecf\u8fc7：<\/p>\n

      Canvas\u3002<\/p>\n

      \n

      \u4e3a\u4ec0\u4e48 Video \u4e0d\u4f1a\u5361 UI？<\/h2>\n

      \u56e0\u4e3a：<\/p>\n

      \u771f\u6b63：<\/p>\n

      \u89c6\u9891：<\/p>\n

      \u6d41\u7a0b：<\/p>\n

      \u4e0d\u662f：<\/p>\n

      Video<\/p>\n

      \u2193<\/p>\n

      Canvas<\/p>\n

      \u800c\u662f：<\/p>\n

      Video Decoder<\/p>\n

      \u2193<\/p>\n

      SurfaceBuffer<\/p>\n

      \u2193<\/p>\n

      RSSurfaceNode<\/p>\n

      \u2193<\/p>\n

      GPU Compose<\/p>\n

      UI\u3002<\/p>\n

      \u548c：<\/p>\n

      Video\u3002<\/p>\n

      \u5b8c\u5168：<\/p>\n

      \u72ec\u7acb\u3002<\/p>\n

      \n

      RSNode Tree<\/h2>\n

      \u771f\u6b63：<\/p>\n

      RenderService\u3002<\/p>\n

      \u7ef4\u62a4：<\/p>\n

      \u4e00\u68f5：<\/p>\n

      RS Tree<\/p>\n

      \u4f8b\u5982：<\/p>\n

      Root<\/p>\n

      \u251c\u2500\u2500Window<\/p>\n

      \u2502<\/p>\n

      \u251c\u2500\u2500Page<\/p>\n

      \u2502<\/p>\n

      \u251c\u2500\u2500Column<\/p>\n

      \u2502<\/p>\n

      \u251c\u2500\u2500Image<\/p>\n

      \u2502<\/p>\n

      \u2514\u2500\u2500Button<\/p>\n

      \u6700\u7ec8：<\/p>\n

      GPU\u3002<\/p>\n

      \u904d\u5386：<\/p>\n

      \u8fd9\u68f5：<\/p>\n

      \u6811\u3002<\/p>\n

      \u4e0d\u662f：<\/p>\n

      FrameNode\u3002<\/p>\n

      \n

      \u4e3a\u4ec0\u4e48 RSTree \u53ef\u4ee5\u8de8\u5e94\u7528？<\/h2>\n

      \u5f88\u591a：<\/p>\n

      \u4eba：<\/p>\n

      \u4e0d\u77e5\u9053\u3002<\/p>\n

      \u771f\u6b63：<\/p>\n

      RenderService\u3002<\/p>\n

      \u91cc\u9762：<\/p>\n

      \u4e0d\u662f：<\/p>\n

      \u53ea\u6709：<\/p>\n

      \u4f60\u7684：<\/p>\n

      App\u3002<\/p>\n

      \u800c\u662f：<\/p>\n

      App A<\/p>\n

      \u2193<\/p>\n

      RSNode<\/p>\n

      App B<\/p>\n

      \u2193<\/p>\n

      RSNode<\/p>\n

      System UI<\/p>\n

      \u2193<\/p>\n

      RSNode<\/p>\n

      \u6700\u540e：<\/p>\n

      \u7edf\u4e00：<\/p>\n

      Compose\u3002<\/p>\n

      \u6240\u4ee5：<\/p>\n

      \u901a\u77e5\u680f\u3002<\/p>\n

      \u60ac\u6d6e\u7a97\u3002<\/p>\n

      \u8f93\u5165\u6cd5\u3002<\/p>\n

      \u90fd：<\/p>\n

      \u53ef\u4ee5：<\/p>\n

      \u4e00\u8d77：<\/p>\n

      \u663e\u793a\u3002<\/p>\n

      \n

      Dirty Region<\/h2>\n

      \u5982\u679c：<\/p>\n

      \u6309\u94ae：<\/p>\n

      \u989c\u8272：<\/p>\n

      \u53d8\u5316\u3002<\/p>\n

      \u771f\u6b63：<\/p>\n

      RS\u3002<\/p>\n

      \u4e0d\u4f1a：<\/p>\n

      \u91cd\u7ed8：<\/p>\n

      \u6574\u4e2a：<\/p>\n

      \u5c4f\u5e55\u3002<\/p>\n

      \u771f\u6b63：<\/p>\n

      \u751f\u6210：<\/p>\n

      Dirty Region<\/p>\n

      \u4f8b\u5982：<\/p>\n

      20<\/p>\n

      50<\/p>\n

      200<\/p>\n

      80<\/p>\n

      GPU\u3002<\/p>\n

      \u771f\u6b63：<\/p>\n

      \u53ea：<\/p>\n

      \u66f4\u65b0：<\/p>\n

      \u8fd9\u4e00\u5757：<\/p>\n

      \u533a\u57df\u3002<\/p>\n

      \n

      \u4e3a\u4ec0\u4e48\u6eda\u52a8\u8fd9\u4e48\u6d41\u7545？<\/h2>\n

      \u4f8b\u5982：<\/p>\n

      List\u3002<\/p>\n

      \u6eda\u52a8\u3002<\/p>\n

      \u771f\u6b63：<\/p>\n

      RS\u3002<\/p>\n

      \u5f88\u591a：<\/p>\n

      \u60c5\u51b5\u4e0b：<\/p>\n

      \u66f4\u65b0：<\/p>\n

      \u7684\u662f：<\/p>\n

      Transform<\/p>\n

      \u4e0d\u662f：<\/p>\n

      DrawCommand\u3002<\/p>\n

      \u6240\u4ee5：<\/p>\n

      GPU\u3002<\/p>\n

      \u76f4\u63a5：<\/p>\n

      \u79fb\u52a8：<\/p>\n

      Layer\u3002<\/p>\n

      \u4e0d\u7528：<\/p>\n

      \u91cd\u65b0：<\/p>\n

      Raster\u3002<\/p>\n

      \u6027\u80fd：<\/p>\n

      \u6781\u9ad8\u3002<\/p>\n

      \n

      RS \u4e0e Animation<\/h2>\n

      \u771f\u6b63：<\/p>\n

      ArkUI：<\/p>\n

      \u52a8\u753b\u3002<\/p>\n

      \u5f88\u591a：<\/p>\n

      \u65f6\u5019：<\/p>\n

      \u771f\u6b63：<\/p>\n

      \u6267\u884c：<\/p>\n

      \u4f4d\u7f6e：<\/p>\n

      \u4e0d\u662f：<\/p>\n

      ACE\u3002<\/p>\n

      \u800c\u662f：<\/p>\n

      RS\u3002<\/p>\n

      \u4f8b\u5982：<\/p>\n

      .opacity()<\/p>\n

      .scale()<\/p>\n

      .translate()<\/p>\n

      .rotate()<\/p>\n

      \u771f\u6b63：<\/p>\n

      \u52a8\u753b：<\/p>\n

      \u53c2\u6570：<\/p>\n

      \u53d1\u9001：<\/p>\n

      RS\u3002<\/p>\n

      \u4ee5\u540e：<\/p>\n

      GPU：<\/p>\n

      \u6bcf\u5e27：<\/p>\n

      \u81ea\u5df1：<\/p>\n

      \u66f4\u65b0\u3002<\/p>\n

      ACE\u3002<\/p>\n

      \u6839\u672c：<\/p>\n

      \u4e0d\u7528：<\/p>\n

      \u53c2\u4e0e\u3002<\/p>\n

      \u6240\u4ee5：<\/p>\n

      \u5373\u4f7f：<\/p>\n

      JS\u3002<\/p>\n

      \u7ebf\u7a0b：<\/p>\n

      \u5076\u5c14：<\/p>\n

      \u5361\u987f\u3002<\/p>\n

      \u52a8\u753b：<\/p>\n

      \u4f9d\u7136：<\/p>\n

      \u975e\u5e38：<\/p>\n

      \u6d41\u7545\u3002<\/p>\n

      \n

      RenderThread<\/h2>\n

      \u771f\u6b63：<\/p>\n

      RenderService\u3002<\/p>\n

      \u5185\u90e8：<\/p>\n

      \u8fd8\u6709：<\/p>\n

      \u4e13\u95e8：<\/p>\n

      \u7ebf\u7a0b\u3002<\/p>\n

      \u4f8b\u5982：<\/p>\n

      IPC Thread<\/p>\n

      \u2193<\/p>\n

      Render Thread<\/p>\n

      \u2193<\/p>\n

      GPU Thread<\/p>\n

      \u771f\u6b63：<\/p>\n

      RenderThread\u3002<\/p>\n

      \u8d1f\u8d23：<\/p>\n

      \u751f\u6210：<\/p>\n

      GPU\u3002<\/p>\n

      CommandBuffer\u3002<\/p>\n

      \u4e0d\u662f：<\/p>\n

      \u4e3b\u7ebf\u7a0b\u3002<\/p>\n

      \n

      RenderService \u5b8c\u6574\u6d41\u7a0b<\/h2>\n

      \u6574\u4e2a：<\/p>\n

      RS\u3002<\/p>\n

      \u771f\u6b63：<\/p>\n

      \u6267\u884c：<\/p>\n

      \u5982\u4e0b：<\/p>\n

      Receive IPC<\/p>\n

      \u2193<\/p>\n

      Deserialize<\/p>\n

      \u2193<\/p>\n

      Update RSNode<\/p>\n

      \u2193<\/p>\n

      Dirty Region<\/p>\n

      \u2193<\/p>\n

      Layer Merge<\/p>\n

      \u2193<\/p>\n

      Render Thread<\/p>\n

      \u2193<\/p>\n

      GPU Command<\/p>\n

      \u2193<\/p>\n

      Swap Buffer<\/p>\n

      \u2193<\/p>\n

      Display<\/p>\n

      \u8fd9\u91cc：<\/p>\n

      \u771f\u6b63：<\/p>\n

      GPU\u3002<\/p>\n

      \u5f00\u59cb：<\/p>\n

      \u5de5\u4f5c\u3002<\/p>\n

      \n

      \u4e3a\u4ec0\u4e48 HarmonyOS \u7684\u52a8\u753b\u66f4\u7a33\u5b9a？<\/h2>\n

      \u56e0\u4e3a：<\/p>\n

      \u52a8\u753b：<\/p>\n

      \u771f\u6b63：<\/p>\n

      \u8fd0\u884c：<\/p>\n

      \u5728：<\/p>\n

      RenderService\u3002<\/p>\n

      \u800c\u4e0d\u662f：<\/p>\n

      ArkTS\u3002<\/p>\n

      \u4f8b\u5982：<\/p>\n

      .animateTo(){<\/p>\n

      opacity=0<\/p>\n

      }<\/p>\n

      \u771f\u6b63：<\/p>\n

      ACE：<\/p>\n

      \u53ea：<\/p>\n

      \u53d1\u9001：<\/p>\n

      \u4e00\u6b21：<\/p>\n

      Animation<\/p>\n

      Start<\/p>\n

      \u5269\u4f59：<\/p>\n

      300ms\u3002<\/p>\n

      \u5168\u90e8：<\/p>\n

      RS\u3002<\/p>\n

      \u5b8c\u6210\u3002<\/p>\n

      \u8fd9\u5c31\u662f：<\/p>\n

      \u4e3a\u4ec0\u4e48：<\/p>\n

      \u5373\u4f7f：<\/p>\n

      ArkTS\u3002<\/p>\n

      \u5076\u5c14：<\/p>\n

      GC\u3002<\/p>\n

      \u52a8\u753b：<\/p>\n

      \u4ecd\u7136：<\/p>\n

      \u4e0d\u4f1a：<\/p>\n

      \u660e\u663e：<\/p>\n

      \u6389\u5e27\u3002<\/p>\n

      \n

      RenderService \u5b50\u7cfb\u7edf\u67b6\u6784<\/h2>\n

      \u6574\u4e2a HarmonyOS \u56fe\u5f62\u7cfb\u7edf\u53ef\u4ee5\u62bd\u8c61\u4e3a：<\/p>\n

      ArkTS
      \n \u2502
      \n \u25bc
      \nACE Engine
      \n \u2502
      \n \u25bc
      \nRenderNode Tree
      \n \u2502
      \n \u25bc
      \nIPC
      \n \u2502
      \n \u25bc
      \nRenderService
      \n \u2502
      \n \u25bc
      \nRSNode Tree
      \n \u2502
      \n \u25bc
      \nDirty Region
      \n \u2502
      \n \u25bc
      \nRenderThread
      \n \u2502
      \n \u25bc
      \nGPU Command Buffer
      \n \u2502
      \n \u25bc
      \nDisplay<\/p>\n

      \u5230\u8fd9\u91cc，\u53ef\u4ee5\u770b\u51fa：<\/p>\n

      ACE Engine \u7684\u804c\u8d23\u662f\u6784\u5efa UI \u548c\u751f\u6210\u6e32\u67d3\u63cf\u8ff0，\u800c RenderService \u7684\u804c\u8d23\u662f\u7ef4\u62a4\u7cfb\u7edf\u7ea7\u6e32\u67d3\u6811\u3001\u7ba1\u7406\u56fe\u5c42\u3001\u5408\u6210\u753b\u9762，\u5e76\u6700\u7ec8\u9a71\u52a8 GPU \u5b8c\u6210\u7ed8\u5236\u3002<\/p>\n

      \u8fd9\u4e5f\u662f HarmonyOS \u5c06\u6e32\u67d3\u4e0e\u5e94\u7528\u5f7b\u5e95\u89e3\u8026\u7684\u6838\u5fc3\u8bbe\u8ba1\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"

      \u5982\u679c\u8bf4：Component\u662f\u5f00\u53d1\u8005\u770b\u5230\u7684\u7ec4\u4ef6\u3002\u90a3\u4e48：FrameNode\u5c31\u662f ArkUI Runtime \u771f\u6b63\u770b\u5230\u7684\u7ec4\u4ef6\u3002\u6574\u4e2a ArkUI ACE Engine \u91cc\u9762，\u51fa\u73b0\u9891\u7387\u6700\u9ad8\u7684\u7c7b\u4e0d\u662f：TextPattern
      \nButtonPattern
      \nColumnPattern\u800c\u662f：FrameNode\u51e0\u4e4e\u6240\u6709\u7ec4\u4ef6\u3002\u6700\u7ec8\u90fd\u4f1a\u8f6c\u6362\u6210：FrameNode\u53ef\u4ee5\u8bf4：FrameNode \u662f\u6574\u4e2a ArkU<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[280,67],"topic":[],"class_list":["post-89444","post","type-post","status-publish","format-standard","hentry","category-server","tag-harmonyos","tag-67"],"yoast_head":"\nFrameNode \u6e90\u7801\u7ea7\u6df1\u5ea6\u89e3\u6790\u2014\u2014 ArkUI \u4e3a\u4ec0\u4e48\u4e00\u5207\u7686 FrameNode - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wsisp.com\/helps\/89444.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"FrameNode \u6e90\u7801\u7ea7\u6df1\u5ea6\u89e3\u6790\u2014\u2014 ArkUI \u4e3a\u4ec0\u4e48\u4e00\u5207\u7686 FrameNode - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"\u5982\u679c\u8bf4：Component\u662f\u5f00\u53d1\u8005\u770b\u5230\u7684\u7ec4\u4ef6\u3002\u90a3\u4e48：FrameNode\u5c31\u662f ArkUI Runtime \u771f\u6b63\u770b\u5230\u7684\u7ec4\u4ef6\u3002\u6574\u4e2a ArkUI ACE Engine \u91cc\u9762，\u51fa\u73b0\u9891\u7387\u6700\u9ad8\u7684\u7c7b\u4e0d\u662f：TextPattern ButtonPattern ColumnPattern\u800c\u662f：FrameNode\u51e0\u4e4e\u6240\u6709\u7ec4\u4ef6\u3002\u6700\u7ec8\u90fd\u4f1a\u8f6c\u6362\u6210：FrameNode\u53ef\u4ee5\u8bf4：FrameNode \u662f\u6574\u4e2a ArkU\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/89444.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2026-08-02T18:56:34+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"31 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/89444.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/89444.html\",\"name\":\"FrameNode \u6e90\u7801\u7ea7\u6df1\u5ea6\u89e3\u6790\u2014\u2014 ArkUI \u4e3a\u4ec0\u4e48\u4e00\u5207\u7686 FrameNode - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2026-08-02T18:56:34+00:00\",\"dateModified\":\"2026-08-02T18:56:34+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/89444.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/89444.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/89444.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"FrameNode \u6e90\u7801\u7ea7\u6df1\u5ea6\u89e3\u6790\u2014\u2014 ArkUI \u4e3a\u4ec0\u4e48\u4e00\u5207\u7686 FrameNode\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\",\"url\":\"https:\/\/www.wsisp.com\/helps\/\",\"name\":\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"description\":\"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"contentUrl\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/wp.wsisp.com\"],\"url\":\"https:\/\/www.wsisp.com\/helps\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"FrameNode \u6e90\u7801\u7ea7\u6df1\u5ea6\u89e3\u6790\u2014\u2014 ArkUI \u4e3a\u4ec0\u4e48\u4e00\u5207\u7686 FrameNode - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wsisp.com\/helps\/89444.html","og_locale":"zh_CN","og_type":"article","og_title":"FrameNode \u6e90\u7801\u7ea7\u6df1\u5ea6\u89e3\u6790\u2014\u2014 ArkUI \u4e3a\u4ec0\u4e48\u4e00\u5207\u7686 FrameNode - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"\u5982\u679c\u8bf4：Component\u662f\u5f00\u53d1\u8005\u770b\u5230\u7684\u7ec4\u4ef6\u3002\u90a3\u4e48：FrameNode\u5c31\u662f ArkUI Runtime \u771f\u6b63\u770b\u5230\u7684\u7ec4\u4ef6\u3002\u6574\u4e2a ArkUI ACE Engine \u91cc\u9762，\u51fa\u73b0\u9891\u7387\u6700\u9ad8\u7684\u7c7b\u4e0d\u662f：TextPattern ButtonPattern ColumnPattern\u800c\u662f：FrameNode\u51e0\u4e4e\u6240\u6709\u7ec4\u4ef6\u3002\u6700\u7ec8\u90fd\u4f1a\u8f6c\u6362\u6210：FrameNode\u53ef\u4ee5\u8bf4：FrameNode \u662f\u6574\u4e2a ArkU","og_url":"https:\/\/www.wsisp.com\/helps\/89444.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2026-08-02T18:56:34+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"31 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/89444.html","url":"https:\/\/www.wsisp.com\/helps\/89444.html","name":"FrameNode \u6e90\u7801\u7ea7\u6df1\u5ea6\u89e3\u6790\u2014\u2014 ArkUI \u4e3a\u4ec0\u4e48\u4e00\u5207\u7686 FrameNode - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2026-08-02T18:56:34+00:00","dateModified":"2026-08-02T18:56:34+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/89444.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/89444.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/89444.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"FrameNode \u6e90\u7801\u7ea7\u6df1\u5ea6\u89e3\u6790\u2014\u2014 ArkUI \u4e3a\u4ec0\u4e48\u4e00\u5207\u7686 FrameNode"}]},{"@type":"WebSite","@id":"https:\/\/www.wsisp.com\/helps\/#website","url":"https:\/\/www.wsisp.com\/helps\/","name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","description":"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41","name":"admin","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/","url":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","contentUrl":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","caption":"admin"},"sameAs":["http:\/\/wp.wsisp.com"],"url":"https:\/\/www.wsisp.com\/helps\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/89444","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/comments?post=89444"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/89444\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=89444"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=89444"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=89444"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=89444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}