{"id":92589,"date":"2026-08-10T18:00:49","date_gmt":"2026-08-10T10:00:49","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/92589.html"},"modified":"2026-08-10T18:00:49","modified_gmt":"2026-08-10T10:00:49","slug":"%e9%b8%bf%e8%92%996-1-arkui-observer-ui%e8%a7%82%e5%af%9f%e5%99%a8%e5%9d%91%ef%bc%9auiobserver-namespace%e7%9c%9f%e5%90%8d%e4%b8%8d%e6%98%afobserver","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/92589.html","title":{"rendered":"\u9e3f\u84996.1 arkui.observer UI\u89c2\u5bdf\u5668\u5751\uff1auiObserver namespace\u771f\u540d\u4e0d\u662fobserver"},"content":{"rendered":"<h2>\u9e3f\u8499 6.1 API 23 \u5f00\u53d1\u5751\u7cfb\u5217\u7bc7 5&#xff1a;arkui.observer UI \u89c2\u5bdf\u5668\u5751\u2014\u2014uiObserver namespace \u771f\u540d\u4e0d\u662f observer &#043; on type \u662f string literal \u4e0d\u662f enum \u6839\u56e0<\/h2>\n<p>\u672c\u6587\u662f\u300c\u9e3f\u8499 6.1 API 23 \u5f00\u53d1\u5751\u7cfb\u5217\u300d\u7b2c 5 \u7bc7&#xff08;ArkUI \u6876\u7b2c 5 \u7bc7&#xff09;\u3002\u672c\u7bc7\u8bb2 &#064;ohos.arkui.observer namespace&#xff08;API 11&#043;&#xff0c;\u9e3f\u8499 6.1 API 23 \u57fa\u5ea7&#xff09;\u2014\u2014UI \u89c2\u5bdf\u5668 uiObserver namespace &#043; on(type, callback)\/off(type, callback) &#043; 7 \u79cd type &#043; ScrollEventInfo\/NavDestinationInfo\u3002\u9e3f\u8499\u5751\u6839\u56e0&#xff1a;\u2460 namespace \u771f\u540d\u662f uiObserver \u4e0d\u662f observer&#xff08;import { observer } from \u7f16\u8bd1\u9519 has no exported member&#xff0c;\u5fc5\u987b import uiObserver from&#xff08;default import\u4e0d\u662f named import&#xff09;&#xff09;&#xff1b;\u2461 on(type, callback) \u7684 type \u53c2\u6570\u662f string literal&#xff08;&#034;scrollEvent&#034;&#xff09;\u4e0d\u662f enum&#xff08;ScrollEventType&#xff09;&#xff1b;\u2462 ScrollEventInfo\/ObserverOptions\/NavDestinationInfo\/NavDestinationState \u90fd\u5d4c\u5957\u5728 namespace uiObserver \u91cc\u4e0d\u662f\u9876\u5c42 export&#xff08;import { ScrollEventInfo } \u7f16\u8bd1\u9519&#xff0c;\u5fc5\u987b uiObserver.ScrollEventInfo \u547d\u540d\u7a7a\u95f4\u8bbf\u95ee&#xff09;&#xff1b;\u2463 ScrollEventInfo \u6ca1\u6709 type \u5c5e\u6027&#xff08;React scroll event \u6709 type&#xff0c;\u9e3f\u8499\u6ca1\u6709&#xff0c;\u771f\u5c5e\u6027\u662f id\/uniqueId\/offset\/triggerOffset\/observableScrollableTotalRange&#xff09;&#xff1b;\u2464 on \u652f\u6301 7 \u79cd type string literal&#xff1a;scrollEvent\/navDestinationUpdate\/routerPageUpdate\/densityUpdate\/willDraw\/didLayout\/tabContentUpdate\/navDestinationSwitch\u3002<\/p>\n<h3>\u4e00\u3001\u5f00\u7bc7&#xff1a;\u9e3f\u8499 uiObserver \u4e0d\u662f React addEventListener&#xff0c;\u662f\u300cnamespace \u9876\u5c42\u51fd\u6570 on\/off\u300d<\/h3>\n<p>\u4f60\u5199 React \u65f6&#xff0c;UI \u4e8b\u4ef6\u76d1\u542c\u7528 addEventListener&#xff08;type \u662f enum\/string&#xff0c;\u56de\u8c03\u4f20 Event \u5bf9\u8c61&#xff09;&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ React addEventListener&#xff1a;type \u662f string\/enum&#xff0c;\u56de\u8c03\u4f20 Event \u5bf9\u8c61<\/span><br \/>\nelement<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;scroll&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span>event<span class=\"token operator\">:<\/span> Event<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span>  <span class=\"token comment\">\/\/ \u274c React type \u662f string &#039;scroll&#039;<\/span><br \/>\n  <span class=\"token builtin\">console<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span>event<span class=\"token punctuation\">.<\/span>type<span class=\"token punctuation\">)<\/span>  <span class=\"token comment\">\/\/ \u274c React Event \u6709 type \u5c5e\u6027&#xff08;&#039;scroll&#039;&#xff09;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><\/p>\n<p>\u4f60\u5199\u9e3f\u8499 ArkTS \u65f6&#xff0c;UI \u89c2\u5bdf\u5668\u7528 uiObserver.on(type, callback)&#xff08;namespace \u9876\u5c42\u51fd\u6570&#xff0c;type \u662f string literal&#xff09;&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ ArkTS uiObserver.on&#xff1a;namespace \u9876\u5c42\u51fd\u6570&#xff0c;type \u662f string literal \u4e0d\u662f enum<\/span><br \/>\n<span class=\"token keyword\">import<\/span> uiObserver <span class=\"token keyword\">from<\/span> <span class=\"token string\">&#039;&#064;ohos.arkui.observer&#039;<\/span>  <span class=\"token comment\">\/\/ \u2705 default import&#xff08;\u4e0d\u662f { uiObserver }&#xff09;<\/span><\/p>\n<p>uiObserver<span class=\"token punctuation\">.<\/span><span class=\"token function\">on<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;scrollEvent&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span>info<span class=\"token operator\">:<\/span> uiObserver<span class=\"token punctuation\">.<\/span>ScrollEventInfo<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span>  <span class=\"token comment\">\/\/ \u2705 type \u662f string literal &#039;scrollEvent&#039;<\/span><br \/>\n  <span class=\"token comment\">\/\/ \u2705 ScrollEventInfo \u5d4c\u5957\u5728 namespace uiObserver \u91cc&#xff08;\u4e0d\u662f\u9876\u5c42 export&#xff09;<\/span><br \/>\n  <span class=\"token comment\">\/\/ \u2705 ScrollEventInfo \u6ca1\u6709 type \u5c5e\u6027&#xff08;React Event \u6709 type&#xff0c;\u9e3f\u8499\u6ca1\u6709&#xff09;<\/span><br \/>\n  <span class=\"token builtin\">console<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token string\">uniqueId: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>info<span class=\"token punctuation\">.<\/span>uniqueId<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">, offset: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>info<span class=\"token punctuation\">.<\/span>offset<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">)<\/span>  <span class=\"token comment\">\/\/ \u2705 \u771f\u5c5e\u6027\u662f uniqueId\/offset<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token comment\">\/\/ \u9e3f\u8499\u5751\u6839\u56e0&#xff1a;namespace \u771f\u540d\u662f uiObserver \u4e0d\u662f observer&#xff0c;on type \u662f string literal \u4e0d\u662f enum<\/span><\/p>\n<p>React addEventListener vs \u9e3f\u8499 uiObserver.on \u7684\u533a\u522b&#xff1a;React \u628a\u4e8b\u4ef6\u76d1\u542c\u5f53 DOM \u65b9\u6cd5&#xff08;element.addEventListener(&#039;scroll&#039;, cb)&#xff0c;type \u662f string\/enum&#xff0c;\u56de\u8c03\u4f20 Event \u5bf9\u8c61\u6709 type \u5c5e\u6027&#xff09;&#xff0c;ArkTS \u628a UI \u89c2\u5bdf\u5668\u5f53 namespace \u9876\u5c42\u51fd\u6570&#xff08;uiObserver.on(&#039;scrollEvent&#039;, cb)&#xff0c;type \u662f string literal \u4e0d\u662f enum&#xff0c;\u56de\u8c03\u4f20 ScrollEventInfo \u5d4c\u5957\u5728 namespace \u91cc\u6ca1\u6709 type \u5c5e\u6027&#xff09;\u3002\u6839\u56e0\u4e0d\u662f DOM \u65b9\u6cd5\u662f namespace \u9876\u5c42\u51fd\u6570\u2014\u2014\u9e3f\u8499 uiObserver.on \u7684 type \u662f string literal&#xff0c;ScrollEventInfo \u5d4c\u5957\u5728 namespace \u91cc\u6ca1\u6709 type \u5c5e\u6027\u3002<\/p>\n<h3>\u4e8c\u3001\u6839\u56e0&#xff1a;\u9e3f\u8499 arkui.observer \u7684\u4e94\u4e2a\u7ed1\u5b9a\u673a\u5236<\/h3>\n<p>\u9e3f\u8499 &#064;ohos.arkui.observer namespace&#xff08;API 11&#043;&#xff09;\u6838\u5fc3\u5bfc\u51fa uiObserver namespace&#xff08;default export&#xff09;&#043; on(type, callback)\/off(type, callback) \u9876\u5c42\u51fd\u6570 &#043; ScrollEventInfo\/ObserverOptions\/NavDestinationInfo\/NavDestinationState\/ScrollEventType \u5d4c\u5957\u7c7b\u578b\u3002\u7ed1\u5b9a\u673a\u5236\u6765\u81ea\u4e94\u91cd\u6839\u56e0\u3002<\/p>\n<h4>\u673a\u5236 1&#xff1a;namespace \u771f\u540d\u662f uiObserver \u4e0d\u662f observer\u2014\u2014default import \u4e0d\u662f named import<\/h4>\n<p>\u9e3f\u8499\u5751\u6839\u56e0&#xff1a;namespace \u771f\u540d\u662f uiObserver&#xff0c;\u4e14\u662f default export \u4e0d\u662f named export&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ \u274c \u9e3f\u8499\u5751&#xff1a;import { observer } from \u7f16\u8bd1\u9519&#xff08;namespace \u771f\u540d\u662f uiObserver \u4e0d\u662f observer&#xff09;<\/span><br \/>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> observer <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">&#039;&#064;ohos.arkui.observer&#039;<\/span>  <span class=\"token comment\">\/\/ \u274c has no exported member &#039;observer&#039;<\/span><br \/>\n<span class=\"token comment\">\/\/ \u274c import { uiObserver } from &#039;&#064;ohos.arkui.observer&#039;  \/\/ \u274c \u4e5f\u7f16\u8bd1\u9519&#xff08;default export \u4e0d\u662f named export&#xff09;<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u2705 \u6b63\u786e\u7528\u6cd5&#xff1a;default import&#xff08;uiObserver \u662f default export \u4e0d\u662f named export&#xff09;<\/span><br \/>\n<span class=\"token keyword\">import<\/span> uiObserver <span class=\"token keyword\">from<\/span> <span class=\"token string\">&#039;&#064;ohos.arkui.observer&#039;<\/span>  <span class=\"token comment\">\/\/ \u2705 default import<\/span><br \/>\n<span class=\"token comment\">\/\/ \u9e3f\u8499\u5751\u6839\u56e0&#xff1a;namespace \u771f\u540d\u662f uiObserver \u4e0d\u662f observer&#xff0c;\u4e14\u662f default export \u4e0d\u662f named export<\/span><\/p>\n<p>namespace \u771f\u540d\u5751\u6839\u56e0&#xff1a;&#064;ohos.arkui.observer \u7684 .d.ts \u58f0\u660e\u662f declare default namespace uiObserver&#xff08;default namespace export&#xff0c;\u771f\u540d uiObserver \u4e0d\u662f observer&#xff09;&#xff0c;\u6240\u4ee5 import { observer } \u89e6\u53d1 has no exported member &#039;observer&#039; \u7f16\u8bd1\u9519&#xff0c;import { uiObserver } \u89e6\u53d1 has no exported member &#039;uiObserver&#039;&#xff08;default export \u4e0d\u80fd named import&#xff09;\u3002\u6b63\u786e\u7528\u6cd5\u662f import uiObserver from&#xff08;default import&#xff09;\u3002\u9e3f\u8499\u5751&#xff1a;namespace \u771f\u540d uiObserver \u4e0d\u662f observer&#xff08;\u6587\u4ef6\u540d observer \u4f46 namespace \u540d uiObserver&#xff09;&#xff0c;\u4e14\u662f default export \u5fc5\u987b default import\u3002<\/p>\n<h4>\u673a\u5236 2&#xff1a;on \u7684 type \u53c2\u6570\u662f string literal \u4e0d\u662f enum\u2014\u2014\u201cscrollEvent\u201d \u4e0d\u662f ScrollEventType<\/h4>\n<p>\u9e3f\u8499\u5751\u6839\u56e0&#xff1a;on(type, callback) \u7684 type \u53c2\u6570\u662f string literal&#xff0c;\u4e0d\u662f enum&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ \u274c \u9e3f\u8499\u5751&#xff1a;on \u7684 type \u4f20 enum \u7f16\u8bd1\u9519&#xff08;type \u662f string literal \u4e0d\u662f enum&#xff09;<\/span><br \/>\n<span class=\"token keyword\">import<\/span> uiObserver <span class=\"token keyword\">from<\/span> <span class=\"token string\">&#039;&#064;ohos.arkui.observer&#039;<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u274c \u7f16\u8bd1\u9519&#xff1a;Argument of type &#039;ScrollEventType&#039; is not assignable to parameter of type &#039;string&#039;<\/span><br \/>\nuiObserver<span class=\"token punctuation\">.<\/span><span class=\"token function\">on<\/span><span class=\"token punctuation\">(<\/span>ScrollEventType<span class=\"token punctuation\">.<\/span><span class=\"token constant\">SCROLL_START<\/span><span class=\"token punctuation\">,<\/span> callback<span class=\"token punctuation\">)<\/span>  <span class=\"token comment\">\/\/ \u274c type \u4e0d\u662f enum \u662f string literal<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u2705 \u6b63\u786e\u7528\u6cd5&#xff1a;type \u4f20 string literal &#039;scrollEvent&#039;&#xff08;\u4e0d\u662f enum ScrollEventType&#xff09;<\/span><br \/>\nuiObserver<span class=\"token punctuation\">.<\/span><span class=\"token function\">on<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;scrollEvent&#039;<\/span><span class=\"token punctuation\">,<\/span> callback<span class=\"token punctuation\">)<\/span>  <span class=\"token comment\">\/\/ \u2705 type \u662f string literal &#039;scrollEvent&#039;<\/span><br \/>\n<span class=\"token comment\">\/\/ \u9e3f\u8499\u5751\u6839\u56e0&#xff1a;on \u7684 type \u662f string literal&#xff08;&#034;scrollEvent&#034;&#xff09;\u4e0d\u662f enum&#xff08;ScrollEventType&#xff09;<\/span><\/p>\n<p>type string literal \u5751\u6839\u56e0&#xff1a;uiObserver.on(type: string, callback: AsyncCallback&lt;ScrollEventInfo&gt;): void \u7684 type \u53c2\u6570\u7c7b\u578b\u662f string&#xff08;string literal&#xff09;&#xff0c;\u4e0d\u662f enum ScrollEventType\u3002\u9e3f\u8499\u5751&#xff1a;\u4f20 enum ScrollEventType.SCROLL_START \u89e6\u53d1 Argument of type &#039;ScrollEventType&#039; is not assignable to parameter of type &#039;string&#039; \u7f16\u8bd1\u9519\u2014\u2014\u5fc5\u987b\u4f20 string literal &#039;scrollEvent&#039;\u3002ScrollEventType enum&#xff08;SCROLL_START&#061;0\/SCROLL_STOP&#061;1&#xff09;\u662f ScrollEventInfo.type \u5c5e\u6027\u7684\u503c\u7c7b\u578b&#xff08;\u4f46 ScrollEventInfo \u5b9e\u9645\u6ca1\u6709 type \u5c5e\u6027&#xff0c;\u89c1\u673a\u5236 4&#xff09;&#xff0c;\u4e0d\u662f on \u7684 type \u53c2\u6570\u3002<\/p>\n<h4>\u673a\u5236 3&#xff1a;ScrollEventInfo\/ObserverOptions\/NavDestinationInfo \u5d4c\u5957\u5728 namespace \u91cc\u2014\u2014\u4e0d\u662f\u9876\u5c42 export<\/h4>\n<p>\u9e3f\u8499\u5751\u6839\u56e0&#xff1a;ScrollEventInfo\/ObserverOptions\/NavDestinationInfo\/NavDestinationState \u90fd\u5d4c\u5957\u5728 namespace uiObserver \u91cc&#xff0c;\u4e0d\u662f\u9876\u5c42 export&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ \u274c \u9e3f\u8499\u5751&#xff1a;import { ScrollEventInfo } from \u7f16\u8bd1\u9519&#xff08;\u5d4c\u5957\u5728 namespace uiObserver \u91cc\u4e0d\u662f\u9876\u5c42 export&#xff09;<\/span><br \/>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> ScrollEventInfo<span class=\"token punctuation\">,<\/span> ObserverOptions<span class=\"token punctuation\">,<\/span> NavDestinationInfo <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">&#039;&#064;ohos.arkui.observer&#039;<\/span>  <span class=\"token comment\">\/\/ \u274c has no exported member<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u2705 \u6b63\u786e\u7528\u6cd5&#xff1a;\u7528 uiObserver.ScrollEventInfo \u547d\u540d\u7a7a\u95f4\u8bbf\u95ee&#xff08;\u5d4c\u5957\u5728 namespace uiObserver \u91cc&#xff09;<\/span><br \/>\n<span class=\"token keyword\">import<\/span> uiObserver <span class=\"token keyword\">from<\/span> <span class=\"token string\">&#039;&#064;ohos.arkui.observer&#039;<\/span><\/p>\n<p>uiObserver<span class=\"token punctuation\">.<\/span><span class=\"token function\">on<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;scrollEvent&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span>info<span class=\"token operator\">:<\/span> uiObserver<span class=\"token punctuation\">.<\/span>ScrollEventInfo<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span>  <span class=\"token comment\">\/\/ \u2705 uiObserver.ScrollEventInfo<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> options<span class=\"token operator\">:<\/span> uiObserver<span class=\"token punctuation\">.<\/span>ObserverOptions <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">{<\/span> id<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;scrollTarget&#039;<\/span> <span class=\"token punctuation\">}<\/span>  <span class=\"token comment\">\/\/ \u2705 uiObserver.ObserverOptions<\/span><br \/>\n  uiObserver<span class=\"token punctuation\">.<\/span><span class=\"token function\">on<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;navDestinationUpdate&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span>navInfo<span class=\"token operator\">:<\/span> uiObserver<span class=\"token punctuation\">.<\/span>NavDestinationInfo<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span>  <span class=\"token comment\">\/\/ \u2705 uiObserver.NavDestinationInfo<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token comment\">\/\/ \u9e3f\u8499\u5751\u6839\u56e0&#xff1a;ScrollEventInfo\/ObserverOptions\/NavDestinationInfo \u5d4c\u5957\u5728 namespace uiObserver \u91cc\u4e0d\u662f\u9876\u5c42 export<\/span><\/p>\n<p>\u5d4c\u5957 namespace \u5751\u6839\u56e0&#xff1a;&#064;ohos.arkui.observer.d.ts \u7684 declare default namespace uiObserver { export interface ScrollEventInfo { &#8230; } }\u2014\u2014ScrollEventInfo\/ObserverOptions\/NavDestinationInfo\/NavDestinationState\/ScrollEventType \u90fd\u58f0\u660e\u5728 namespace uiObserver { } \u5757\u5185&#xff08;\u5d4c\u5957 export&#xff09;&#xff0c;\u4e0d\u662f\u9876\u5c42 export\u3002\u9e3f\u8499\u5751&#xff1a;import { ScrollEventInfo } \u89e6\u53d1 has no exported member &#039;ScrollEventInfo&#039; \u7f16\u8bd1\u9519\u2014\u2014\u5fc5\u987b\u7528 uiObserver.ScrollEventInfo \u547d\u540d\u7a7a\u95f4\u8bbf\u95ee\u3002<\/p>\n<h4>\u673a\u5236 4&#xff1a;ScrollEventInfo \u6ca1\u6709 type \u5c5e\u6027\u2014\u2014\u771f\u5c5e\u6027\u662f id\/uniqueId\/offset\/triggerOffset<\/h4>\n<p>\u9e3f\u8499\u5751\u6839\u56e0&#xff1a;ScrollEventInfo \u6ca1\u6709 type \u5c5e\u6027&#xff08;React Event \u6709 type&#xff0c;\u9e3f\u8499\u6ca1\u6709&#xff09;&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ \u274c \u9e3f\u8499\u5751&#xff1a;ScrollEventInfo \u6ca1\u6709 type \u5c5e\u6027&#xff08;React Event \u6709 type&#xff0c;\u9e3f\u8499\u6ca1\u6709&#xff09;<\/span><br \/>\n<span class=\"token keyword\">import<\/span> uiObserver <span class=\"token keyword\">from<\/span> <span class=\"token string\">&#039;&#064;ohos.arkui.observer&#039;<\/span><\/p>\n<p>uiObserver<span class=\"token punctuation\">.<\/span><span class=\"token function\">on<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;scrollEvent&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span>info<span class=\"token operator\">:<\/span> uiObserver<span class=\"token punctuation\">.<\/span>ScrollEventInfo<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token comment\">\/\/ \u274c \u7f16\u8bd1\u9519&#xff1a;Property &#039;type&#039; does not exist on type &#039;ScrollEventInfo&#039;<\/span><br \/>\n  <span class=\"token builtin\">console<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span>info<span class=\"token punctuation\">.<\/span>type<span class=\"token punctuation\">)<\/span>  <span class=\"token comment\">\/\/ \u274c ScrollEventInfo \u6ca1\u6709 type \u5c5e\u6027&#xff08;React Event \u6709 type&#xff0c;\u9e3f\u8499\u6ca1\u6709&#xff09;<\/span><\/p>\n<p>  <span class=\"token comment\">\/\/ \u2705 \u6b63\u786e\u7528\u6cd5&#xff1a;\u7528\u771f\u5c5e\u6027 id\/uniqueId\/offset\/triggerOffset\/observableScrollableTotalRange<\/span><br \/>\n  <span class=\"token builtin\">console<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token string\">uniqueId: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>info<span class=\"token punctuation\">.<\/span>uniqueId<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">)<\/span>  <span class=\"token comment\">\/\/ \u2705 uniqueId \u6eda\u52a8\u7ec4\u4ef6\u552f\u4e00 id<\/span><br \/>\n  <span class=\"token builtin\">console<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token string\">offset: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>info<span class=\"token punctuation\">.<\/span>offset<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">)<\/span>  <span class=\"token comment\">\/\/ \u2705 offset \u6eda\u52a8\u504f\u79fb\u91cf<\/span><br \/>\n  <span class=\"token builtin\">console<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token string\">triggerOffset: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>info<span class=\"token punctuation\">.<\/span>triggerOffset<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">)<\/span>  <span class=\"token comment\">\/\/ \u2705 triggerOffset \u89e6\u53d1\u504f\u79fb\u91cf<\/span><br \/>\n  <span class=\"token builtin\">console<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token string\">observableScrollableTotalRange: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>info<span class=\"token punctuation\">.<\/span>observableScrollableTotalRange<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">)<\/span>  <span class=\"token comment\">\/\/ \u2705 \u53ef\u89c2\u5bdf\u6eda\u52a8\u603b\u8303\u56f4<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token comment\">\/\/ \u9e3f\u8499\u5751\u6839\u56e0&#xff1a;ScrollEventInfo \u6ca1\u6709 type \u5c5e\u6027&#xff0c;\u771f\u5c5e\u6027\u662f id\/uniqueId\/offset\/triggerOffset<\/span><\/p>\n<p>ScrollEventInfo \u65e0 type \u5751\u6839\u56e0&#xff1a;uiObserver.ScrollEventInfo \u7684\u771f\u5c5e\u6027\u662f id: ResourceStr&#xff08;\u7ec4\u4ef6 id&#xff09;\u3001uniqueId: string&#xff08;\u552f\u4e00 id&#xff09;\u3001offset: number&#xff08;\u6eda\u52a8\u504f\u79fb\u91cf&#xff09;\u3001triggerOffset: number&#xff08;\u89e6\u53d1\u504f\u79fb\u91cf&#xff09;\u3001observableScrollableTotalRange: ObservableScrollableTotalRange&#xff08;\u53ef\u89c2\u5bdf\u6eda\u52a8\u603b\u8303\u56f4&#xff09;\u3002\u9e3f\u8499\u5751&#xff1a;React Event \u6709 type \u5c5e\u6027&#xff08;&#039;scroll&#039;&#xff09;&#xff0c;\u9e3f\u8499 ScrollEventInfo \u6ca1\u6709 type \u5c5e\u6027\u2014\u2014\u4f20 info.type \u89e6\u53d1 Property &#039;type&#039; does not exist on type &#039;ScrollEventInfo&#039; \u7f16\u8bd1\u9519\u3002ScrollEventType enum&#xff08;SCROLL_START&#061;0\/SCROLL_STOP&#061;1&#xff09;\u4e0d\u662f ScrollEventInfo.type \u5c5e\u6027\u7684\u503c\u7c7b\u578b&#xff08;ScrollEventInfo \u65e0 type \u5c5e\u6027&#xff09;&#xff0c;\u662f\u522b\u5904\u7684 enum\u3002<\/p>\n<h4>\u673a\u5236 5&#xff1a;on \u652f\u6301 7 \u79cd type string literal\u2014\u2014scrollEvent\/navDestinationUpdate \u7b49<\/h4>\n<p>\u9e3f\u8499\u5751\u6839\u56e0&#xff1a;on \u652f\u6301 7 \u79cd type string literal&#xff0c;\u6bcf\u4e2a\u5bf9\u5e94\u4e0d\u540c Info \u7c7b\u578b&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ \u2705 on \u652f\u6301 7 \u79cd type string literal&#xff08;\u6bcf\u4e2a\u5bf9\u5e94\u4e0d\u540c Info \u7c7b\u578b&#xff09;<\/span><br \/>\n<span class=\"token keyword\">import<\/span> uiObserver <span class=\"token keyword\">from<\/span> <span class=\"token string\">&#039;&#064;ohos.arkui.observer&#039;<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u2705 7 \u79cd type string literal&#xff1a;<\/span><br \/>\nuiObserver<span class=\"token punctuation\">.<\/span><span class=\"token function\">on<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;scrollEvent&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span>info<span class=\"token operator\">:<\/span> uiObserver<span class=\"token punctuation\">.<\/span>ScrollEventInfo<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>  <span class=\"token comment\">\/\/ \u2705 \u6eda\u52a8\u4e8b\u4ef6<\/span><br \/>\nuiObserver<span class=\"token punctuation\">.<\/span><span class=\"token function\">on<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;navDestinationUpdate&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span>info<span class=\"token operator\">:<\/span> uiObserver<span class=\"token punctuation\">.<\/span>NavDestinationInfo<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>  <span class=\"token comment\">\/\/ \u2705 NavDestination \u8def\u7531\u66f4\u65b0<\/span><br \/>\nuiObserver<span class=\"token punctuation\">.<\/span><span class=\"token function\">on<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;routerPageUpdate&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span>info<span class=\"token operator\">:<\/span> uiObserver<span class=\"token punctuation\">.<\/span>RouterPageInfo<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>  <span class=\"token comment\">\/\/ \u2705 Router \u9875\u9762\u66f4\u65b0<\/span><br \/>\nuiObserver<span class=\"token punctuation\">.<\/span><span class=\"token function\">on<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;densityUpdate&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span>info<span class=\"token operator\">:<\/span> uiObserver<span class=\"token punctuation\">.<\/span>DensityInfo<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>  <span class=\"token comment\">\/\/ \u2705 Density \u66f4\u65b0<\/span><br \/>\nuiObserver<span class=\"token punctuation\">.<\/span><span class=\"token function\">on<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;willDraw&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>  <span class=\"token comment\">\/\/ \u2705 \u5c06\u8981\u7ed8\u5236&#xff08;\u65e0 Info \u53c2\u6570&#xff09;<\/span><br \/>\nuiObserver<span class=\"token punctuation\">.<\/span><span class=\"token function\">on<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;didLayout&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>  <span class=\"token comment\">\/\/ \u2705 \u5e03\u5c40\u5b8c\u6210&#xff08;\u65e0 Info \u53c2\u6570&#xff09;<\/span><br \/>\nuiObserver<span class=\"token punctuation\">.<\/span><span class=\"token function\">on<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;tabContentUpdate&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span>info<span class=\"token operator\">:<\/span> uiObserver<span class=\"token punctuation\">.<\/span>TabContentInfo<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>  <span class=\"token comment\">\/\/ \u2705 TabContent \u66f4\u65b0<\/span><br \/>\n<span class=\"token comment\">\/\/ \u2705 \u8fd8\u6709 navDestinationSwitch&#xff08;API 11&#043;&#xff0c;NavDestination \u5207\u6362&#xff09;<\/span><br \/>\n<span class=\"token comment\">\/\/ \u9e3f\u8499\u5751\u6839\u56e0&#xff1a;on \u652f\u6301 7 \u79cd type string literal&#xff0c;\u6bcf\u4e2a\u5bf9\u5e94\u4e0d\u540c Info \u7c7b\u578b<\/span><\/p>\n<p>7 \u79cd type string literal \u5751\u6839\u56e0&#xff1a;uiObserver.on(type: string, callback) \u7684 type \u652f\u6301 7 \u79cd string literal&#xff1a;&#039;scrollEvent&#039;&#xff08;\u6eda\u52a8\u4e8b\u4ef6&#xff0c;\u56de\u8c03\u4f20 ScrollEventInfo&#xff09;\u3001&#039;navDestinationUpdate&#039;&#xff08;NavDestination \u8def\u7531\u66f4\u65b0&#xff0c;\u56de\u8c03\u4f20 NavDestinationInfo&#xff09;\u3001&#039;routerPageUpdate&#039;&#xff08;Router \u9875\u9762\u66f4\u65b0&#xff0c;\u56de\u8c03\u4f20 RouterPageInfo&#xff09;\u3001&#039;densityUpdate&#039;&#xff08;Density \u66f4\u65b0&#xff0c;\u56de\u8c03\u4f20 DensityInfo&#xff09;\u3001&#039;willDraw&#039;&#xff08;\u5c06\u8981\u7ed8\u5236&#xff0c;\u65e0 Info \u53c2\u6570&#xff09;\u3001&#039;didLayout&#039;&#xff08;\u5e03\u5c40\u5b8c\u6210&#xff0c;\u65e0 Info \u53c2\u6570&#xff09;\u3001&#039;tabContentUpdate&#039;&#xff08;TabContent \u66f4\u65b0&#xff0c;\u56de\u8c03\u4f20 TabContentInfo&#xff09;\u3001&#039;navDestinationSwitch&#039;&#xff08;API 11&#043;&#xff0c;NavDestination \u5207\u6362&#xff09;\u3002\u9e3f\u8499\u5751&#xff1a;React addEventListener type \u662f DOM \u4e8b\u4ef6\u540d&#xff08;&#039;scroll&#039;\/&#039;click&#039;&#xff09;&#xff0c;\u9e3f\u8499 uiObserver.on type \u662f 7 \u79cd string literal&#xff08;&#039;scrollEvent&#039; \u4e0d\u662f &#039;scroll&#039;&#xff0c;\u9a7c\u5cf0\u547d\u540d\u5e26 Event \u540e\u7f00&#xff09;\u3002<\/p>\n<h3>\u4e09\u3001\u771f\u673a\u914d\u56fe&#xff1a;\u9e3f\u8499 arkui.observer UI \u89c2\u5bdf\u5668\u5751\u2014\u2014uiObserver namespace &#043; on\/off<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/08\/20260810100041-6a79a149d0556.jpg\" alt=\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\" \/><br \/>\n<img decoding=\"async\" src=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/08\/20260810100043-6a79a14b8e7f4.jpg\" alt=\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\" \/><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/08\/20260810100045-6a79a14d1e8ab.jpg\" alt=\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\" \/><br \/>\n<img decoding=\"async\" src=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/08\/20260810100046-6a79a14e9f5f1.jpg\" alt=\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\" \/><\/p>\n<p>\u771f\u673a\u914d\u56fe\u5c55\u793a\u9e3f\u8499 arkui.observer UI \u89c2\u5bdf\u5668\u5751&#xff1a;<\/p>\n<ul>\n<li>\u521d\u59cb\u6001&#xff1a;\u9e3f\u8499 6.1 arkui.observer UI \u89c2\u5bdf\u5668\u5751\u6807\u9898&#xff0c;\u6eda\u52a8\u76ee\u6807\u7ec4\u4ef6&#xff08;\u7eff\u6846 id&#061;scrollTarget&#xff0c;5 \u884c\u6eda\u52a8\u5185\u5bb9&#xff09;&#xff0c;\u573a\u666f1~5 \u5361\u7247&#xff08;namespace \u771f\u540d\/on scrollEvent\/on&#043;ObserverOptions\/off scrollEvent\/on navDestinationUpdate&#xff09;&#xff0c;\u8981\u70b9\u8bf4\u660e<\/li>\n<li>namespace &#043; on scrollEvent \u6001&#xff1a;\u70b9\u51fb\u300c\u2460 \u9a8c\u8bc1 namespace \u771f\u540d\u300d&#043;\u300c\u2461 \u9a8c\u8bc1 on scrollEvent\u300d&#043;\u300c\u2462 \u9a8c\u8bc1 on &#043; ObserverOptions\u300d\u6309\u94ae&#xff0c;\u663e\u793a\u300c\u2705 uiObserver namespace \u771f\u540d\u4e0d\u662f observer\u300d&#043;\u300c\u2705 uiObserver.on(\u201cscrollEvent\u201d, callback) \u76d1\u542c\u6eda\u52a8\u4e8b\u4ef6\u9a8c\u8bc1\u6210\u529f\u300d&#043;\u300c\u2705 \u5e26 ObserverOptions \u76d1\u542c\u6307\u5b9a id \u9a8c\u8bc1\u6210\u529f\u300d\u2014\u2014namespace \u771f\u540d &#043; on type string literal &#043; ObserverOptions \u9a8c\u8bc1<\/li>\n<li>\u6ed1\u540e\u6001&#xff1a;\u4e0b\u6ed1\u540e\u663e\u793a\u573a\u666f4&#xff08;off scrollEvent&#xff09;&#043; \u573a\u666f5&#xff08;on navDestinationUpdate&#xff09;&#043; \u8981\u70b9\u8bf4\u660e<\/li>\n<li>off &#043; navDestinationUpdate \u603a\u6001&#xff1a;\u70b9\u51fb\u300c\u2466 \u9a8c\u8bc1 off scrollEvent\u300d&#043;\u300c\u2464 \u9a8c\u8bc1 on navDestinationUpdate\u300d\u6309\u94ae&#xff0c;\u663e\u793a\u300c\u2705 uiObserver.off(\u201cscrollEvent\u201d, callback) \u53d6\u6d88\u76d1\u542c\u9a8c\u8bc1\u6210\u529f\u300d&#043;\u300c\u2705 uiObserver.on(\u201cnavDestinationUpdate\u201d, callback) \u76d1\u542c NavDestination \u8def\u7531\u9a8c\u8bc1\u6210\u529f\u300d\u2014\u2014off callback \u540c\u5f15\u7528 &#043; navDestinationUpdate \u9a8c\u8bc1<\/li>\n<\/ul>\n<h3>\u56db\u3001\u771f\u89e3\u6cd5&#xff1a;\u9e3f\u8499 arkui.observer \u7684\u56db\u4e2a\u573a\u666f<\/h3>\n<h4>\u573a\u666f 1&#xff1a;uiObserver namespace default import &#043; on(\u2018scrollEvent\u2019)\u2014\u201490% \u573a\u666f\u9996\u9009<\/h4>\n<p>uiObserver on \u76d1\u542c\u7528 import uiObserver from &#043; uiObserver.on(&#039;scrollEvent&#039;, callback)&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ \u2705 \u573a\u666f 1&#xff1a;uiObserver namespace default import &#043; on(&#039;scrollEvent&#039;)&#xff08;API 11&#xff0c;90% \u573a\u666f\u9996\u9009&#xff09;<\/span><br \/>\n<span class=\"token keyword\">import<\/span> uiObserver <span class=\"token keyword\">from<\/span> <span class=\"token string\">&#039;&#064;ohos.arkui.observer&#039;<\/span>  <span class=\"token comment\">\/\/ \u2705 default import&#xff08;\u4e0d\u662f { uiObserver }&#xff09;<\/span><\/p>\n<p><span class=\"token decorator\"><span class=\"token at operator\">&#064;<\/span><span class=\"token function\">Entry<\/span><\/span><br \/>\n<span class=\"token decorator\"><span class=\"token at operator\">&#064;<\/span><span class=\"token function\">Component<\/span><\/span><br \/>\nstruct Index <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token function\">aboutToAppear<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token comment\">\/\/ \u2705 on(&#039;scrollEvent&#039;, callback) \u76d1\u542c\u6eda\u52a8\u4e8b\u4ef6\u2014\u2014type \u662f string literal \u4e0d\u662f enum<\/span><br \/>\n    uiObserver<span class=\"token punctuation\">.<\/span><span class=\"token function\">on<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;scrollEvent&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span>info<span class=\"token operator\">:<\/span> uiObserver<span class=\"token punctuation\">.<\/span>ScrollEventInfo<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span>  <span class=\"token comment\">\/\/ \u2705 uiObserver.ScrollEventInfo \u547d\u540d\u7a7a\u95f4\u8bbf\u95ee<\/span><br \/>\n      <span class=\"token comment\">\/\/ \u2705 ScrollEventInfo \u6ca1\u6709 type \u5c5e\u6027&#xff0c;\u771f\u5c5e\u6027\u662f uniqueId\/offset\/triggerOffset<\/span><br \/>\n      <span class=\"token builtin\">console<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token string\">uniqueId: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>info<span class=\"token punctuation\">.<\/span>uniqueId<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">, offset: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>info<span class=\"token punctuation\">.<\/span>offset<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">)<\/span>  <span class=\"token comment\">\/\/ \u2705 \u771f\u5c5e\u6027<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><br \/>\n  <span class=\"token function\">build<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token function\">Column<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> space<span class=\"token operator\">:<\/span> <span class=\"token number\">8<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token function\">Text<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;demo&#039;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">}<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token comment\">\/\/ uiObserver namespace default import &#043; on(&#039;scrollEvent&#039;)&#xff1a;90% \u573a\u666f\u9996\u9009&#xff0c;type \u662f string literal<\/span><\/p>\n<p>\u9e3f\u8499 arkui.observer API \u771f\u540d\u5751&#xff1a;import uiObserver from &#039;&#064;ohos.arkui.observer&#039;&#xff08;default import \u4e0d\u662f named import&#xff0c;namespace \u771f\u540d uiObserver \u4e0d\u662f observer&#xff09;&#xff1b;uiObserver.on(type: string, callback: AsyncCallback&lt;ScrollEventInfo&gt;): void namespace \u9876\u5c42\u51fd\u6570&#xff08;type \u662f string literal \u4e0d\u662f enum&#xff09;&#xff1b;uiObserver.off(type: string, callback?: AsyncCallback&lt;T&gt;): void \u53d6\u6d88\u76d1\u542c&#xff08;callback \u53ef\u9009&#xff0c;\u4e0d\u4f20\u53d6\u6d88\u6240\u6709&#xff09;&#xff1b;ScrollEventInfo\/ObserverOptions\/NavDestinationInfo \u5d4c\u5957\u5728 namespace uiObserver \u91cc&#xff08;\u7528 uiObserver.ScrollEventInfo \u547d\u540d\u7a7a\u95f4\u8bbf\u95ee&#xff09;&#xff1b;SysCap SystemCapability.ArkUI.ArkUI.Full&#xff1b;&#064;crossplatform \u8de8\u5e73\u53f0&#xff1b;&#064;atomicservice \u539f\u5b50\u5316\u670d\u52a1\u3002<\/p>\n<h4>\u573a\u666f 2&#xff1a;on(\u2018scrollEvent\u2019, ObserverOptions, callback) \u5e26 options \u76d1\u542c\u6307\u5b9a id<\/h4>\n<p>on \u5e26 options \u7528 uiObserver.on(&#039;scrollEvent&#039;, { id: &#039;xxx&#039; }, callback) \u76d1\u542c\u6307\u5b9a\u7ec4\u4ef6 id&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ \u2705 \u573a\u666f 2&#xff1a;on(&#039;scrollEvent&#039;, ObserverOptions, callback) \u5e26 options \u76d1\u542c\u6307\u5b9a id&#xff08;API 11&#xff09;<\/span><br \/>\n<span class=\"token keyword\">import<\/span> uiObserver <span class=\"token keyword\">from<\/span> <span class=\"token string\">&#039;&#064;ohos.arkui.observer&#039;<\/span><\/p>\n<p>uiObserver<span class=\"token punctuation\">.<\/span><span class=\"token function\">on<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;scrollEvent&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span> id<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;scrollTarget&#039;<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span>info<span class=\"token operator\">:<\/span> uiObserver<span class=\"token punctuation\">.<\/span>ScrollEventInfo<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span>  <span class=\"token comment\">\/\/ \u2705 ObserverOptions { id: string }<\/span><br \/>\n  <span class=\"token comment\">\/\/ \u2705 \u53ea\u76d1\u542c id&#061;&#039;scrollTarget&#039; \u7ec4\u4ef6\u7684\u6eda\u52a8\u4e8b\u4ef6&#xff08;\u4e0d\u4f20 options \u76d1\u542c\u6240\u6709\u7ec4\u4ef6&#xff09;<\/span><br \/>\n  <span class=\"token builtin\">console<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token string\">uniqueId: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>info<span class=\"token punctuation\">.<\/span>uniqueId<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">)<\/span>  <span class=\"token comment\">\/\/ \u2705 uniqueId \u662f\u6eda\u52a8\u7ec4\u4ef6\u552f\u4e00 id<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token comment\">\/\/ on &#043; ObserverOptions&#xff1a;\u6307\u5b9a\u76d1\u542c\u54ea\u4e2a\u7ec4\u4ef6 id \u7684\u6eda\u52a8\u4e8b\u4ef6&#xff08;\u4e0d\u4f20 options \u76d1\u542c\u6240\u6709\u7ec4\u4ef6&#xff09;<\/span><\/p>\n<p>\u9e3f\u8499 on &#043; ObserverOptions API \u771f\u540d\u5751&#xff1a;uiObserver.on(type: string, options: ObserverOptions, callback: AsyncCallback&lt;ScrollEventInfo&gt;): void \u91cd\u8f7d&#xff08;\u5e26 options \u6307\u5b9a\u76d1\u542c\u7ec4\u4ef6 id&#xff09;&#xff1b;uiObserver.ObserverOptions \u63a5\u53e3 { id: string }&#xff08;id \u6307\u5b9a\u76d1\u542c\u54ea\u4e2a\u7ec4\u4ef6&#xff0c;string \u7c7b\u578b&#xff09;&#xff1b;\u9e3f\u8499\u5751&#xff1a;\u4e0d\u4f20 options \u65f6\u76d1\u542c\u6240\u6709\u7ec4\u4ef6\u7684\u6eda\u52a8\u4e8b\u4ef6&#xff0c;\u4f20 options \u65f6\u53ea\u76d1\u542c\u6307\u5b9a id \u7ec4\u4ef6\u2014\u2014React addEventListener \u76d1\u542c\u7279\u5b9a DOM \u5143\u7d20&#xff0c;\u9e3f\u8499 uiObserver.on \u7528 ObserverOptions.id \u6307\u5b9a\u76d1\u542c\u7ec4\u4ef6\u3002<\/p>\n<h4>\u573a\u666f 3&#xff1a;off(\u2018scrollEvent\u2019, callback) \u53d6\u6d88\u76d1\u542c\u2014\u2014callback \u4f20\u540c\u4e00\u4e2a\u5f15\u7528<\/h4>\n<p>off \u53d6\u6d88\u76d1\u542c\u7528 uiObserver.off(&#039;scrollEvent&#039;, callback)&#xff0c;callback \u5fc5\u987b\u4f20\u540c\u4e00\u4e2a\u5f15\u7528&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ \u2705 \u573a\u666f 3&#xff1a;off(&#039;scrollEvent&#039;, callback) \u53d6\u6d88\u76d1\u542c\u2014\u2014callback \u4f20\u540c\u4e00\u4e2a\u5f15\u7528&#xff08;API 11&#xff09;<\/span><br \/>\n<span class=\"token keyword\">import<\/span> uiObserver <span class=\"token keyword\">from<\/span> <span class=\"token string\">&#039;&#064;ohos.arkui.observer&#039;<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u2705 \u5148\u5b58 callback \u5f15\u7528&#xff0c;off \u65f6\u4f20\u540c\u4e00\u4e2a\u5f15\u7528&#xff08;\u4e0d\u662f\u533f\u540d\u51fd\u6570&#xff09;<\/span><br \/>\n<span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">scrollCallback<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">(<\/span>info<span class=\"token operator\">:<\/span> uiObserver<span class=\"token punctuation\">.<\/span>ScrollEventInfo<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token function-variable function\">void<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">(<\/span>info<span class=\"token operator\">:<\/span> uiObserver<span class=\"token punctuation\">.<\/span>ScrollEventInfo<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token builtin\">console<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token string\">uniqueId: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>info<span class=\"token punctuation\">.<\/span>uniqueId<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><br \/>\nuiObserver<span class=\"token punctuation\">.<\/span><span class=\"token function\">on<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;scrollEvent&#039;<\/span><span class=\"token punctuation\">,<\/span> scrollCallback<span class=\"token punctuation\">)<\/span>  <span class=\"token comment\">\/\/ \u2705 on \u65f6\u5b58 callback \u5f15\u7528<\/span><br \/>\nuiObserver<span class=\"token punctuation\">.<\/span><span class=\"token function\">off<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;scrollEvent&#039;<\/span><span class=\"token punctuation\">,<\/span> scrollCallback<span class=\"token punctuation\">)<\/span>  <span class=\"token comment\">\/\/ \u2705 off \u65f6\u4f20\u540c\u4e00\u4e2a callback \u5f15\u7528<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u2705 off callback \u53ef\u9009&#xff08;\u4e0d\u4f20\u5219\u53d6\u6d88\u6240\u6709 &#039;scrollEvent&#039; \u76d1\u542c&#xff09;<\/span><br \/>\nuiObserver<span class=\"token punctuation\">.<\/span><span class=\"token function\">off<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;scrollEvent&#039;<\/span><span class=\"token punctuation\">)<\/span>  <span class=\"token comment\">\/\/ \u2705 \u4e0d\u4f20 callback \u53d6\u6d88\u6240\u6709\u76d1\u542c<\/span><br \/>\n<span class=\"token comment\">\/\/ off callback \u4f20\u540c\u4e00\u4e2a\u5f15\u7528&#xff1a;\u4e0d\u662f\u533f\u540d\u51fd\u6570&#xff0c;\u4e0d\u4f20\u5219\u53d6\u6d88\u6240\u6709\u76d1\u542c<\/span><\/p>\n<p>\u9e3f\u8499 off API \u771f\u540d\u5751&#xff1a;uiObserver.off(type: string, callback?: AsyncCallback&lt;T&gt;): void \u53d6\u6d88\u76d1\u542c&#xff08;callback \u53ef\u9009&#xff09;&#xff1b;\u9e3f\u8499\u5751&#xff1a;off \u7684 callback \u5fc5\u987b\u4f20\u540c\u4e00\u4e2a\u5f15\u7528&#xff08;\u4e0d\u662f\u533f\u540d\u51fd\u6570&#xff0c;\u533f\u540d\u51fd\u6570\u6bcf\u6b21\u521b\u5efa\u65b0\u5f15\u7528\u65e0\u6cd5\u5339\u914d\u53d6\u6d88&#xff09;&#xff0c;\u4e0d\u4f20 callback \u5219\u53d6\u6d88\u8be5 type \u7684\u6240\u6709\u76d1\u542c\u2014\u2014React removeEventListener \u4e5f\u8981\u6c42\u4f20\u540c\u4e00\u4e2a callback \u5f15\u7528&#xff0c;\u9e3f\u8499 uiObserver.off \u540c\u7406\u3002<\/p>\n<h4>\u573a\u666f 4&#xff1a;on(\u2018navDestinationUpdate\u2019) \u76d1\u542c NavDestination \u8def\u7531\u66f4\u65b0<\/h4>\n<p>on navDestinationUpdate \u7528 uiObserver.on(&#039;navDestinationUpdate&#039;, callback) \u76d1\u542c NavDestination \u8def\u7531&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ \u2705 \u573a\u666f 4&#xff1a;on(&#039;navDestinationUpdate&#039;, callback) \u76d1\u542c NavDestination \u8def\u7531\u66f4\u65b0&#xff08;API 11&#xff09;<\/span><br \/>\n<span class=\"token keyword\">import<\/span> uiObserver <span class=\"token keyword\">from<\/span> <span class=\"token string\">&#039;&#064;ohos.arkui.observer&#039;<\/span><\/p>\n<p>uiObserver<span class=\"token punctuation\">.<\/span><span class=\"token function\">on<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;navDestinationUpdate&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span>info<span class=\"token operator\">:<\/span> uiObserver<span class=\"token punctuation\">.<\/span>NavDestinationInfo<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span>  <span class=\"token comment\">\/\/ \u2705 uiObserver.NavDestinationInfo<\/span><br \/>\n  <span class=\"token comment\">\/\/ \u2705 NavDestinationInfo \u5d4c\u5957\u5728 namespace uiObserver \u91cc&#xff08;\u4e0d\u662f\u9876\u5c42 export&#xff09;<\/span><br \/>\n  <span class=\"token comment\">\/\/ \u2705 NavDestinationInfo \u771f\u5c5e\u6027&#xff08;navigator\/context\/from\/to\u2014\u2014\u5177\u4f53\u770b SDK \u58f0\u660e&#xff09;<\/span><br \/>\n  <span class=\"token builtin\">console<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;NavDestination \u8def\u7531\u66f4\u65b0\u89e6\u53d1&#039;<\/span><span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token comment\">\/\/ on navDestinationUpdate&#xff1a;\u76d1\u542c NavDestination \u8def\u7531\u66f4\u65b0&#xff0c;NavDestinationInfo \u5d4c\u5957\u5728 namespace \u91cc<\/span><\/p>\n<p>\u9e3f\u8499 on navDestinationUpdate API \u771f\u540d\u5751&#xff1a;uiObserver.on(&#039;navDestinationUpdate&#039;, callback: AsyncCallback&lt;NavDestinationInfo&gt;): void \u76d1\u542c NavDestination \u8def\u7531\u66f4\u65b0&#xff1b;uiObserver.NavDestinationInfo \u5d4c\u5957\u5728 namespace uiObserver \u91cc&#xff08;\u7528 uiObserver.NavDestinationInfo \u547d\u540d\u7a7a\u95f4\u8bbf\u95ee&#xff0c;\u4e0d\u662f\u9876\u5c42 export&#xff09;&#xff1b;\u9e3f\u8499\u5751&#xff1a;NavDestinationInfo \u7684\u771f\u5c5e\u6027\u4e0d\u662f React \u4e60\u60ef\u7684 from\/to&#xff08;\u5177\u4f53\u5c5e\u6027\u770b SDK \u58f0\u660e&#xff0c;\u76f4\u63a5\u8bbf\u95ee info.from\/info.to \u53ef\u80fd\u89e6\u53d1 Property does not exist \u7f16\u8bd1\u9519\u2014\u2014\u5148\u67e5 SDK \u771f\u5c5e\u6027\u518d\u7528&#xff09;\u3002<\/p>\n<h3>\u4e94\u3001\u4e00\u53e5\u8bdd\u54f2\u5b66<\/h3>\n<p>\u5199\u9e3f\u8499 ArkUI \u8bb0\u4f4f&#xff1a;uiObserver \u4e0d\u662f React addEventListener \u662f\u300cnamespace \u9876\u5c42\u51fd\u6570 on\/off\u300d\u2014\u2014\u9e3f\u8499 6.1 API 23 &#064;ohos.arkui.observer namespace&#xff08;API 11&#043;&#xff0c;\u9e3f\u8499 6.1 API 23 \u57fa\u5ea7&#xff0c;uiObserver namespace default export &#043; on\/off \u9876\u5c42\u51fd\u6570 &#043; 7 \u79cd type &#043; ScrollEventInfo\/NavDestinationInfo \u5d4c\u5957\u7c7b\u578b&#xff0c;SysCap SystemCapability.ArkUI.ArkUI.Full&#xff0c;&#064;crossplatform &#064;atomicservice&#xff09;\u3002\u6839\u56e0\u4e0d\u662f DOM \u65b9\u6cd5\u662f namespace \u9876\u5c42\u51fd\u6570\u2014\u2014namespace \u771f\u540d\u662f uiObserver \u4e0d\u662f observer&#xff08;\u2705 import uiObserver from&#xff08;default import\u4e0d\u662f named import&#xff09;&#xff0c;\u274c import { observer } from \u7f16\u8bd1\u9519 has no exported member &#039;observer&#039;&#xff0c;\u274c import { uiObserver } from \u7f16\u8bd1\u9519&#xff08;default export \u4e0d\u80fd named import&#xff09;&#xff09;&#xff0c;on(type, callback) \u7684 type \u53c2\u6570\u662f string literal&#xff08;\u2705 &#039;scrollEvent&#039; \u4e0d\u662f enum ScrollEventType&#xff0c;\u274c \u4f20 enum \u89e6\u53d1 Argument of type &#039;ScrollEventType&#039; is not assignable to parameter of type &#039;string&#039;&#xff09;&#xff0c;ScrollEventInfo\/ObserverOptions\/NavDestinationInfo\/NavDestinationState\/ScrollEventType \u90fd\u5d4c\u5957\u5728 namespace uiObserver \u91cc\u4e0d\u662f\u9876\u5c42 export&#xff08;\u2705 uiObserver.ScrollEventInfo \u547d\u540d\u7a7a\u95f4\u8bbf\u95ee&#xff0c;\u274c import { ScrollEventInfo } \u7f16\u8bd1\u9519 has no exported member&#039;&#xff09;&#xff0c;ScrollEventInfo \u6ca1\u6709 type \u5c5e\u6027&#xff08;\u2705 \u771f\u5c5e\u6027 id\/uniqueId\/offset\/triggerOffset\/observableScrollableTotalRange&#xff0c;\u274c info.type \u89e6\u53d1 Property &#039;type&#039; does not exist \u7f16\u8bd1\u9519&#xff0c;React Event \u6709 type \u9e3f\u8499 ScrollEventInfo \u6ca1\u6709&#xff09;&#xff0c;on \u652f\u6301 7 \u79cd type string literal&#xff08;&#039;scrollEvent&#039;\/&#039;navDestinationUpdate&#039;\/&#039;routerPageUpdate&#039;\/&#039;densityUpdate&#039;\/&#039;willDraw&#039;\/&#039;didLayout&#039;\/&#039;tabContentUpdate&#039;\/&#039;navDestinationSwitch&#039;&#xff0c;\u6bcf\u4e2a\u5bf9\u5e94\u4e0d\u540c Info \u7c7b\u578b&#xff0c;React &#039;scroll&#039; \u9e3f\u8499 &#039;scrollEvent&#039; \u9a7c\u5cf0\u547d\u540d\u5e26 Event \u540e\u7f00&#xff09;&#xff0c;off(type, callback) \u53d6\u6d88\u76d1\u542c&#xff08;callback \u5fc5\u987b\u4f20\u540c\u4e00\u4e2a\u5f15\u7528\u4e0d\u662f\u533f\u540d\u51fd\u6570&#xff0c;\u4e0d\u4f20\u5219\u53d6\u6d88\u8be5 type \u6240\u6709\u76d1\u542c&#xff09;\u3002namespace \u771f\u540d uiObserver &#043; default import &#043; on type string literal &#043; ScrollEventInfo \u5d4c\u5957 namespace \u65e0 type \u5c5e\u6027\u662f\u9e3f\u8499 6.1 arkui.observer UI \u89c2\u5bdf\u5668\u5751\u6838\u5fc3&#xff01;<\/p>\n<h3>\u80fd\u529b\u7cfb\u5217\u56de\u94fe<\/h3>\n<ul>\n<li>\u9e3f\u8499 7.0 \u65b0\u7279\u6027\u7bc7 1~17&#xff08;\u6c89\u6d78\u5f0f\u6bdb\u73bb\u7483\/Component3D\/\u667a\u80fd\u4f53\u6846\u67b6\/\u65b9\u821f\u5f15\u64ce\/\u661f\u76fe\u5b89\u5168\/\u661f\u6cb3\u4e92\u8054\/\u7a7a\u95f4\u97f3\u9891\/\u53ef\u53d8\u5b57\u4f53\/\u6e38\u620f\u5feb\u542f\/\u5206\u5e03\u5f0f\u6570\u636e\u76fe\/LTPO \u53ef\u53d8\u5e27\u7387\/AI \u6587\u6863\u8bc6\u522b\/\u591a\u5f62\u6001\u670d\u52a1\u7a97\u53e3\/AI \u53cd\u8bc8\/\u673a\u5bc6\u8ba1\u7b97\/\u7a7a\u95f4\u8ba1\u7b97\/\u5c0f\u827a\u5168\u9762\u8fdb\u5316&#xff09;<\/li>\n<li>\u9e3f\u8499 6.1 API 23 \u5f00\u53d1\u5751\u7cfb\u5217\u7bc7 1\u300cArkUI.modifier \u88c5\u9970\u5668\u5751\u300d\u2014\u2014attributeModifier &#043; AttributeModifier \u72b6\u6001\u5316\u8282\u70b9\u4fee\u6539\u5668<\/li>\n<li>\u9e3f\u8499 6.1 API 23 \u5f00\u53d1\u5751\u7cfb\u5217\u7bc7 2\u300carkui.componentSnapshot \u7ec4\u4ef6\u622a\u56fe\u5751\u300d\u2014\u2014get\/getSync\/createFromBuilder \u8fd4\u56de image.PixelMap \u50cf\u7d20\u56fe<\/li>\n<li>\u9e3f\u8499 6.1 API 23 \u5f00\u53d1\u5751\u7cfb\u5217\u7bc7 3\u300carkui.node \u8282\u70b9\u5751\u300d\u2014\u2014NodeController abstract class makeNode override &#043; BuilderNode WrappedBuilder<\/li>\n<li>\u9e3f\u8499 6.1 API 23 \u5f00\u53d1\u5751\u7cfb\u5217\u7bc7 4\u300carkui.UIContext UI \u4e0a\u4e0b\u6587\u5751\u300d\u2014\u2014runScopedTask \u4e0d\u662f runScopedOnUiThread &#043; 11 \u4e2a\u5b50\u7ba1\u7406\u5668<\/li>\n<li>\u9e3f\u8499 6.1 API 23 \u5f00\u53d1\u5751\u7cfb\u5217\u7bc7 5\u300carkui.observer UI \u89c2\u5bdf\u5668\u5751\u300d\u2014\u2014uiObserver namespace \u771f\u540d\u4e0d\u662f observer &#043; on type string literal&#xff08;\u672c\u6587&#xff09;<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u9e3f\u8499 6.1 API 23 \u5f00\u53d1\u5751\u7cfb\u5217\u7bc7 5&#xff1a;arkui.observer UI \u89c2\u5bdf\u5668\u5751\u2014\u2014uiObserver namespace \u771f\u540d\u4e0d\u662f observer  on type \u662f string literal \u4e0d\u662f enum \u6839\u56e0\u672c\u6587\u662f\u300c\u9e3f\u8499 6.1 API 23 \u5f00\u53d1\u5751\u7cfb\u5217\u300d\u7b2c 5 \u7bc7&#xff08;ArkUI \u6876\u7b2c 5 \u7bc7&#xff09;\u3002\u672c\u7bc7\u8bb2 ohos.arkui.observer namespace&#xff08;API 11&#xff0c;\u9e3f\u8499<\/p>\n","protected":false},"author":2,"featured_media":92585,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[280,292],"topic":[],"class_list":["post-92589","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server","tag-harmonyos","tag-292"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u9e3f\u84996.1 arkui.observer UI\u89c2\u5bdf\u5668\u5751\uff1auiObserver namespace\u771f\u540d\u4e0d\u662fobserver - \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\/92589.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u9e3f\u84996.1 arkui.observer UI\u89c2\u5bdf\u5668\u5751\uff1auiObserver namespace\u771f\u540d\u4e0d\u662fobserver - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"\u9e3f\u8499 6.1 API 23 \u5f00\u53d1\u5751\u7cfb\u5217\u7bc7 5&#xff1a;arkui.observer UI \u89c2\u5bdf\u5668\u5751\u2014\u2014uiObserver namespace \u771f\u540d\u4e0d\u662f observer on type \u662f string literal \u4e0d\u662f enum \u6839\u56e0\u672c\u6587\u662f\u300c\u9e3f\u8499 6.1 API 23 \u5f00\u53d1\u5751\u7cfb\u5217\u300d\u7b2c 5 \u7bc7&#xff08;ArkUI \u6876\u7b2c 5 \u7bc7&#xff09;\u3002\u672c\u7bc7\u8bb2 ohos.arkui.observer namespace&#xff08;API 11&#xff0c;\u9e3f\u8499\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/92589.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-10T10:00:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/08\/20260810100041-6a79a149d0556.jpg\" \/>\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=\"10 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/92589.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/92589.html\",\"name\":\"\u9e3f\u84996.1 arkui.observer UI\u89c2\u5bdf\u5668\u5751\uff1auiObserver namespace\u771f\u540d\u4e0d\u662fobserver - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2026-08-10T10:00:49+00:00\",\"dateModified\":\"2026-08-10T10:00:49+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/92589.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/92589.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/92589.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u9e3f\u84996.1 arkui.observer UI\u89c2\u5bdf\u5668\u5751\uff1auiObserver namespace\u771f\u540d\u4e0d\u662fobserver\"}]},{\"@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":"\u9e3f\u84996.1 arkui.observer UI\u89c2\u5bdf\u5668\u5751\uff1auiObserver namespace\u771f\u540d\u4e0d\u662fobserver - \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\/92589.html","og_locale":"zh_CN","og_type":"article","og_title":"\u9e3f\u84996.1 arkui.observer UI\u89c2\u5bdf\u5668\u5751\uff1auiObserver namespace\u771f\u540d\u4e0d\u662fobserver - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"\u9e3f\u8499 6.1 API 23 \u5f00\u53d1\u5751\u7cfb\u5217\u7bc7 5&#xff1a;arkui.observer UI \u89c2\u5bdf\u5668\u5751\u2014\u2014uiObserver namespace \u771f\u540d\u4e0d\u662f observer on type \u662f string literal \u4e0d\u662f enum \u6839\u56e0\u672c\u6587\u662f\u300c\u9e3f\u8499 6.1 API 23 \u5f00\u53d1\u5751\u7cfb\u5217\u300d\u7b2c 5 \u7bc7&#xff08;ArkUI \u6876\u7b2c 5 \u7bc7&#xff09;\u3002\u672c\u7bc7\u8bb2 ohos.arkui.observer namespace&#xff08;API 11&#xff0c;\u9e3f\u8499","og_url":"https:\/\/www.wsisp.com\/helps\/92589.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2026-08-10T10:00:49+00:00","og_image":[{"url":"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/08\/20260810100041-6a79a149d0556.jpg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"10 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/92589.html","url":"https:\/\/www.wsisp.com\/helps\/92589.html","name":"\u9e3f\u84996.1 arkui.observer UI\u89c2\u5bdf\u5668\u5751\uff1auiObserver namespace\u771f\u540d\u4e0d\u662fobserver - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2026-08-10T10:00:49+00:00","dateModified":"2026-08-10T10:00:49+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/92589.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/92589.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/92589.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"\u9e3f\u84996.1 arkui.observer UI\u89c2\u5bdf\u5668\u5751\uff1auiObserver namespace\u771f\u540d\u4e0d\u662fobserver"}]},{"@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\/92589","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=92589"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/92589\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media\/92585"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=92589"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=92589"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=92589"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=92589"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}