{"id":650,"date":"2025-10-14T01:57:36","date_gmt":"2025-10-14T01:57:36","guid":{"rendered":"https:\/\/boochlin.com\/?p=650"},"modified":"2026-09-20T14:34:16","modified_gmt":"2026-09-20T14:34:16","slug":"compose-%e4%b8%89%e9%9a%8e%e6%ae%b5%e6%b8%b2%e6%9f%93%e7%ae%a1%e7%b7%9a","status":"publish","type":"post","link":"https:\/\/boochlin.com\/?p=650","title":{"rendered":"Compose \u4e09\u968e\u6bb5\u6e32\u67d3\u7ba1\u7dda"},"content":{"rendered":"
\n

\u300c\u60f3\u7576\u5e74\u5beb\u50b3\u7d71 Android View\uff0c\u81ea\u8a02\u5143\u4ef6\u6700\u6015\u5728 onMeasure<\/code> \u88e1\u8ddf MeasureSpec<\/code> \u5927\u6230\u4e09\u767e\u56de\u5408\u2014\u2014AT_MOST\u3001EXACTLY \u7b97\u5230\u982d\u79bf\uff0c\u9084\u5f97\u9632\u7bc4\u5de2\u72c0 RelativeLayout \u5f15\u8d77\u7684 $O(2^n)$ \u6e2c\u91cf\u6307\u6578\u7206\u70b8\u3002\u76f4\u5230\u5207\u5230 Jetpack Compose\uff0c\u5b98\u65b9\u76f4\u63a5\u5b9a\u4e86\u4e00\u689d\u9435\u5f8b\uff1a\u300e\u55ae\u8d9f\u6e2c\u91cf\uff08Single-Pass Layout\uff09\uff0c\u8ab0\u6562\u91cf\u5169\u6b21\u5c31\u7576\u5834\u5d29\u6f70\u7d66\u4f60\u770b\u300f\u3002\u300d<\/strong><\/p>\n<\/blockquote>\n

\"\"<\/p>\n

\u5f88\u591a\u958b\u767c\u8005\u525b\u5beb Compose \u6642\uff0c\u4ee5\u70ba\u5b83\u53ea\u662f\u628a XML \u63db\u6210 Kotlin \u51fd\u5f0f\u800c\u5df2\u3002
\n\u4f46\u53ea\u8981\u7a0d\u5fae\u9047\u5230\u8907\u96dc\u52d5\u756b\u6216\u9ad8\u983b\u6ed1\u52d5\uff0cUI \u5e40\u7387\u7acb\u523b\u5f9e 60fps \u66b4\u8dcc\u5230\u500b\u4f4d\u6578\u3002\u539f\u56e0\u5f88\u7c21\u55ae\uff1a\u4f60\u4e0d\u61c2 Compose \u7684\u4e09\u968e\u6bb5\u6e32\u67d3\u7ba1\u7dda\uff08Pipeline\uff09\uff0c\u628a\u672c\u8a72\u5728\u7e6a\u88fd\u968e\u6bb5\u89e3\u6c7a\u7684\u72c0\u614b\u8b80\u53d6\uff0c\u7121\u8166\u4e1f\u5728\u7d44\u5408\u968e\u6bb5\u89f8\u767c\u760b\u72c2\u91cd\u7d44\uff08Recomposition\uff09\u3002<\/p>\n

\u9019\u7bc7\u4e0d\u8b1b\u7384\u5b78\uff0c\u76f4\u63a5\u62c6\u89e3 Compose \u5e95\u5c64\u7684\u6e32\u67d3\u4e09\u90e8\u66f2\u3001\u72c0\u614b\u8b80\u53d6\u968e\u6bb5\u8df3\u904e\u6700\u4f73\u5316\uff0c\u4ee5\u53ca\u770b\u4f3c\u6253\u7834\u55ae\u8d9f\u6e2c\u91cf\u9435\u5f8b\u7684 Intrinsic Measurements\uff08\u56fa\u6709\u5c3a\u5bf8\uff09<\/strong> \u7269\u7406\u672c\u8cea\u3002<\/p>\n

\n

\u70ba\u4ec0\u9ebc View \u6703\u5361\uff0c\u800c Compose \u8981\u5b9a\u300c\u55ae\u8d9f\u6e2c\u91cf\u300d\u6b7b\u7dda\uff1f<\/h2>\n

\u5728\u50b3\u7d71 View \u7cfb\u7d71\u88e1\uff0c\u6700\u5e38\u898b\u7684\u6548\u80fd\u6bd2\u7624\u662f\u5de2\u72c0 RelativeLayout<\/code> \u6216\u5e36\u6709 layout_weight<\/code> \u7684 LinearLayout<\/code>\u3002<\/p>\n

\u7236\u5bb9\u5668\u70ba\u4e86\u78ba\u5b9a\u81ea\u8eab\u5c3a\u5bf8\uff0c\u5fc5\u9808\u5148\u7528\u7121\u9650\u5236\u7d04\u675f\u6e2c\u91cf\u5b50\u5143\u4ef6\u4e00\u6b21\uff1b\u5b50\u5143\u4ef6\u91cf\u5b8c\u56de\u5831\u5f8c\uff0c\u7236\u5bb9\u5668\u518d\u7528\u5177\u9ad4\u5c3a\u5bf8\u91cf\u7b2c\u4e8c\u6b21\u3002\u4e00\u65e6\u968e\u5c64\u5de2\u72c0\u5d4c\u5957 5 \u5c64\uff1a
\n$$2^5 = 32 \\text{ \u6b21\u6e2c\u91cf}$$
\n\u82e5\u5de2\u72c0 10 \u5c64\uff0c\u4e00\u5e40\u4e4b\u5167\u5c31\u6703\u5674\u51fa $2^{10} = 1024$ \u6b21\u905e\u8ff4\u6e2c\u91cf\uff01CPU \u7b97\u529b\u76f4\u63a5\u88ab\u8017\u76e1\uff0c16.6ms \u7684\u6e32\u67d3\u6642\u9593\u9810\u7b97\u7576\u5834\u7206\u8868\u3002<\/p>\n

\u70ba\u4e86\u7d42\u7d50\u9019\u7a2e\u6307\u6578\u7d1a\u707d\u96e3\uff0cCompose \u5728\u67b6\u69cb\u5e95\u5c64\u7acb\u4e0b\u9435\u5247\uff1a\u55ae\u8d9f\u7248\u9762\u914d\u7f6e\uff08Single-Pass Layout\uff09\uff0c\u6f14\u7b97\u6cd5\u8907\u96dc\u5ea6\u56b4\u683c\u58d3\u5728 $O(n)$\u3002<\/strong>
\n\u5728\u4e00\u6b21\u6e32\u67d3\u9031\u671f\u4e2d\uff0c\u6bcf\u500b\u7bc0\u9ede\u6709\u4e14\u50c5\u6709\u4e00\u6b21<\/strong>\u6e2c\u91cf\u6a5f\u6703\uff0c\u7d55\u5c0d\u7981\u6b62\u7236\u5143\u4ef6\u5c0d\u540c\u4e00\u500b\u5b50\u5143\u4ef6\u547c\u53eb\u5169\u6b21 measure()<\/code>\u3002<\/p>\n

\n

\u6838\u5fc3\u4e09\u968e\u6bb5\uff1aComposition \u2794 Layout \u2794 Draw<\/h2>\n

Compose \u5c07 UI \u7684\u751f\u6210\u8207\u50cf\u7d20\u8f38\u51fa\u7cbe\u78ba\u62c6\u89e3\u70ba\u4e09\u500b\u4f9d\u5e8f\u57f7\u884c\u7684\u7368\u7acb\u968e\u6bb5\uff1a<\/p>\n

flowchart LR\n    State[\"State \u8b8a\u66f4\\n(\u5982 count++)\"] --> Phase1\n    \n    subgraph Phase1 [\"1. \u7d44\u5408 (Composition)\"]\n        direction TB\n        C1[\"\u57f7\u884c @Composable \u51fd\u5f0f\"]\n        C2[\"\u7522\u751f \/ \u66f4\u65b0 Slot Table (UiNode \u6a39)\"]\n        C3[\"\u300e\u6c7a\u5b9a\u986f\u793a\u4ec0\u9ebc\u300f\"]\n        C1 --> C2 --> C3\n    end\n\n    subgraph Phase2 [\"2. \u7248\u9762\u914d\u7f6e (Layout)\"]\n        direction TB\n        L1[\"\u6e2c\u91cf (Measure):\\n\u7236\u50b3\u905e Constraints\uff0c\u5b50\u56de\u5831 Size\"]\n        L2[\"\u653e\u7f6e (Place):\\n\u6c7a\u5b9a (x, y) \u5ea7\u6a19\u4e26\u64fa\u653e Placeable\"]\n        L3[\"\u300e\u6c7a\u5b9a\u5927\u5c0f\u8207\u4f4d\u7f6e\u300f\"]\n        L1 --> L2 --> L3\n    end\n\n    subgraph Phase3 [\"3. \u7e6a\u88fd (Drawing)\"]\n        direction TB\n        D1[\"\u904d\u6b77 LayoutNode \u6a39\"]\n        D2[\"\u8f49\u8b6f\u70ba RenderNode \/ GPU \u6307\u4ee4\"]\n        D3[\"\u300e\u50cf\u7d20\u7e6a\u88fd\u5230\u87a2\u5e55\u300f\"]\n        D1 --> D2 --> D3\n    end\n\n    Phase1 --> Phase2 --> Phase3<\/code><\/pre>\n
1. \u7d44\u5408\u968e\u6bb5 (Composition) \u2014\u2014\u300c\u6c7a\u5b9a\u986f\u793a\u4ec0\u9ebc\u300d<\/h3>\n
    \n
  • \u6838\u5fc3\u4efb\u52d9<\/strong>\uff1a\u57f7\u884c\u6a19\u8a18\u70ba @Composable<\/code> \u7684\u51fd\u5f0f\u7a0b\u5f0f\u78bc\uff0c\u7522\u51fa\u6216\u66f4\u65b0\u8a18\u61b6\u9ad4\u4e2d\u7684\u6a39\u72c0\u8cc7\u6599\u7d50\u69cb\uff08\u5167\u90e8\u7531 Slot Table \u8207 LayoutNode<\/code> \u7d44\u6210\uff09\u3002<\/li>\n
  • \u7269\u7406\u908a\u754c<\/strong>\uff1a\u9019\u500b\u968e\u6bb5\u5b8c\u5168\u4e0d\u77e5\u9053<\/strong>\u4efb\u4f55\u87a2\u5e55\u50cf\u7d20\u5bec\u9ad8\u6216\u5ea7\u6a19\uff01\u5b83\u53ea\u8ca0\u8cac\u628a\u8cc7\u6599\u8f49\u63db\u70ba UI \u63cf\u8ff0\u7bc0\u9ede\u3002<\/li>\n<\/ul>\n
    2. \u7248\u9762\u914d\u7f6e\u968e\u6bb5 (Layout) \u2014\u2014\u300c\u6c7a\u5b9a\u5927\u5c0f\u8207\u4f4d\u7f6e\u300d<\/h3>\n
    \u7248\u9762\u914d\u7f6e\u7531\u5169\u9053\u4e0d\u53ef\u9006\u7684\u55ae\u5411\u5de5\u5e8f\u7d44\u6210\uff1a<\/p>\n
      \n
    • \u6b65\u9a5f A\uff1a\u6e2c\u91cf (Measure)<\/strong>\uff1a\u7236\u7bc0\u9ede\u5411\u5b50\u7bc0\u9ede\u50b3\u905e Constraints<\/code>\uff08\u5305\u542b\u5bec\u9ad8\u4e4b min\/max \u908a\u754c\uff09\uff1b\u5b50\u7bc0\u9ede\u6839\u64da\u7d04\u675f\u6e2c\u91cf\u81ea\u5df1\uff0c\u4e26\u5c07\u5c3a\u5bf8\u6253\u5305\u56de\u50b3\u6210 Placeable<\/code>\u3002\u9019\u662f\u4e00\u500b\u7531\u4e0a\u800c\u4e0b\u7684\u7d04\u675f\u50b3\u905e\u3001\u7531\u4e0b\u800c\u4e0a\u7684\u5c3a\u5bf8\u56de\u5831\u904e\u7a0b\u3002<\/li>\n
    • \u6b65\u9a5f B\uff1a\u653e\u7f6e (Place)<\/strong>\uff1a\u7236\u7bc0\u9ede\u6839\u64da\u81ea\u8eab\u7684\u7248\u9762\u6392\u5217\u908f\u8f2f\uff08\u5982 Row\u3001Column\u3001Box\uff09\uff0c\u547c\u53eb placeable.placeRelative(x, y)<\/code> \u5c07\u5b50\u7bc0\u9ede\u9328\u5b9a\u5728\u7279\u5b9a\u5ea7\u6a19\u3002<\/li>\n<\/ul>\n
      3. \u7e6a\u88fd\u968e\u6bb5 (Drawing) \u2014\u2014\u300c\u628a\u50cf\u7d20\u6253\u5728\u87a2\u5e55\u4e0a\u300d<\/h3>\n
        \n
      • \u6838\u5fc3\u4efb\u52d9<\/strong>\uff1a\u7cfb\u7d71\u904d\u6b77\u653e\u7f6e\u5b8c\u6210\u7684 LayoutNode<\/code> \u6a39\uff0c\u5c07\u7e6a\u88fd\u7bc0\u9ede\u8f49\u63db\u70ba\u786c\u9ad4\u52a0\u901f\u7684 Canvas \u8207 GPU \u7e6a\u5716\u6307\u4ee4\uff08RenderNode\uff09\uff0c\u6700\u7d42\u5728\u87a2\u5e55\u4e0a\u8f49\u5316\u70ba\u5be6\u969b\u50cf\u7d20\u3002<\/li>\n<\/ul>\n
        \n
        \u6548\u80fd\u8abf\u6821\u6838\u5fc3\uff1aState \u8b80\u53d6\u4f4d\u7f6e\u6c7a\u5b9a\u8df3\u904e\u54ea\u4e9b\u968e\u6bb5<\/h2>\n
        \u9019\u662f Compose \u6548\u80fd\u6700\u95dc\u9375\u7684\u300c\u5206\u6c34\u5dba\u300d\uff1a\u5728\u54ea\u500b\u968e\u6bb5\u8b80\u53d6 State<\/code>\uff0c\u5c31\u53ea\u6703\u89f8\u767c\u8a72\u968e\u6bb5\u53ca\u5176\u5f8c\u7e8c\u7ba1\u7dda\u7684\u91cd\u65b0\u57f7\u884c\uff01<\/strong><\/p>\n
        \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502 \u72c0\u614b\u8b80\u53d6\u4f4d\u7f6e\u8207\u7ba1\u7dda\u958b\u92b7\u5c0d\u7167                                   \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502 \u72c0\u614b\u8b80\u53d6\u4f4d\u7f6e     \u2502 \u89f8\u767c\u968e\u6bb5        \u2502 \u904b\u7b97\u958b\u92b7\u8207\u756b\u9762\u5f71\u97ff     \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502 1. \u7d44\u5408\u968e\u6bb5\u76f4\u63a5\u8b80\u2502 Composition \u91cd\u7d44\u2502 \u91cd\u65b0\u57f7\u884c Composable \u51fd\u5f0f (\u6700\u6602\u8cb4)\u2502\n\u2502 2. Layout \u5340\u584a\u8b80 \u2502 Layout \u91cd\u6392     \u2502 \u8df3\u904e\u91cd\u7d44\uff0c\u50c5\u91cd\u65b0\u6e2c\u91cf\u653e\u7f6e (\u4e2d\u7b49)\u2502\n\u2502 3. Draw \u5340\u584a\u8b80   \u2502 Draw \u91cd\u7e6a       \u2502 \u8df3\u904e\u91cd\u7d44\u8207\u7248\u9762\u6392\u7248\uff0c\u76f4\u63a5\u91cd\u7e6a (\u6975\u5feb)\u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518<\/code><\/pre>\n
        \u6158\u75db\u53cd\u4f8b\uff1a\u628a\u9ad8\u983b\u6ed1\u52d5\u503c\u653e\u5728\u7d44\u5408\u968e\u6bb5\u8b80\u53d6<\/h3>\n
        \/\/ \u707d\u96e3\u53cd\u4f8b\uff1a\u6bcf\u6ed1\u52d5 1px \u5c31\u89f8\u767c\u4e00\u6b21\u5168\u5143\u4ef6 Recomposition<\/span>\nval<\/span> scrollOffset = scrollState.value \/\/ \u5728\u7d44\u5408\u968e\u6bb5\u76f4\u63a5\u8b80\u53d6 State<\/span>\n\nBox(\n    modifier = Modifier\n        .offset(y = scrollOffset.dp) \/\/ \u6bcf\u6b21 offset \u8b8a\u66f4\uff0c\u6574\u500b Box \u51fd\u5f0f\u91cd\u8dd1\u4e00\u904d\uff01<\/span>\n        .background(Color.Red)\n)<\/code><\/pre>\n
        \u9802\u7d1a\u6700\u4f73\u5316\uff1a\u5ef6\u9072\u5230 Layout \/ Draw \u968e\u6bb5\u8b80\u53d6<\/h3>\n
        Compose \u63d0\u4f9b\u4e86\u4e00\u7cfb\u5217\u7684 Lambda \u4fee\u98fe\u7b26\uff0c\u628a State \u7684\u8b80\u53d6\u5ef6\u5f8c\u5230\u7248\u9762\u914d\u7f6e\u6216\u7e6a\u88fd\u968e\u6bb5\uff1a<\/p>\n
        \/\/ \u6700\u4f73\u5316\u5beb\u6cd5\uff1a\u5229\u7528 Lambda \u5c07\u8b80\u53d6\u63a8\u9072\u5230 Layout \u968e\u6bb5<\/span>\nBox(\n    modifier = Modifier\n        .offset { \n            \/\/ \u9589\u5305\u53ea\u5728 Layout\/Place \u968e\u6bb5\u88ab\u547c\u53eb\uff01<\/span>\n            \/\/ \u5b8c\u7f8e\u8df3\u904e Composition \u968e\u6bb5\uff0c\u91cd\u7d44\u6b21\u6578\u76f4\u63a5\u6b78\u96f6\uff01<\/span>\n            IntOffset(x = 0<\/span>, y = scrollState.value) \n        }\n        .drawBehind {\n            \/\/ \u5728 Draw \u968e\u6bb5\u76f4\u63a5\u8b80\u53d6\u72c0\u614b\u7e6a\u88fd\uff0c\u9023 Layout \u90fd\u8df3\u904e<\/span>\n            drawCircle(color = if<\/span> (scrollState.value > 100<\/span>) Color.Green else<\/span> Color.Red)\n        }\n)<\/code><\/pre>\n
        \u900f\u904e Lambda \u5c01\u88dd\uff0c\u7576 scrollState<\/code> \u5287\u70c8\u8b8a\u5316\u6642\uff0cCompose \u667a\u6167\u5730\u8fa8\u8b58\u51fa\u7d50\u69cb\u6c92\u6709\u6539\u8b8a\uff0c\u5b8c\u5168\u8df3\u904e\u7d44\u5408\u968e\u6bb5<\/strong>\uff0c\u76f4\u63a5\u9032\u5165 Layout \u6216 Draw \u968e\u6bb5\uff0c\u8f15\u9b06\u7dad\u6301 120fps \u7d72\u6ed1\u66f4\u65b0\u3002<\/p>\n
        \n
        \u56fa\u6709\u5c3a\u5bf8\uff08Intrinsic Measurements\uff09\uff1a\u55ae\u8d9f\u6e2c\u91cf\u6a21\u578b\u4e0b\u7684\u6551\u706b\u6096\u8ad6<\/h2>\n
        \u55ae\u8d9f\u6e2c\u91cf\u96d6\u7136\u9ad8\u6548\uff0c\u4f46\u7acb\u523b\u5728\u5de5\u4f4d\u73fe\u5834\u5f15\u767c\u4e86\u4e00\u500b\u7d93\u5178\u6b7b\u7a74\uff1a\u7576\u7236\u5143\u4ef6\u7684\u5c3a\u5bf8\u5fc5\u9808\u4f9d\u8cf4\u5b50\u5143\u4ef6\u7684\u5167\u5bb9\u6642\uff0c\u8a72\u600e\u9ebc\u8fa6\uff1f<\/strong><\/p>\n
        \u6700\u7d93\u5178\u7684\u6848\u767c\u73fe\u5834\u5c31\u662f\u5e36\u6709\u5206\u9694\u7dda\u7684\u6587\u5b57\u5217\uff1a<\/p>\n
        \/\/ \u7d93\u5178\u6158\u5287\uff1aDivider \u60f3\u8981\u8ddf\u6700\u9ad8\u7684\u90a3\u884c Text \u4e00\u6a23\u9ad8<\/span>\nRow(modifier = Modifier.height(IntrinsicSize.Min)) {\n    Text("\u6a19\u984c\u6587\u5b57"<\/span>, modifier = Modifier.weight(1f<\/span>))\n    VerticalDivider(\n        modifier = Modifier\n            .fillMaxHeight() \/\/ \u81f4\u547d\u554f\u984c\uff1a\u5728\u7121\u908a\u754c Row \u88e1\uff0cfillMaxHeight \u662f\u591a\u9ad8\uff1f<\/span>\n            .width(1.<\/span>dp)\n    )\n    Text("\u843d\u843d\u9577\u7684\u8a73\u7d30\u5167\u5bb9\u8aaa\u660e\\n\u7b2c\u4e8c\u884c\u8a3b\u89e3\u6587\u5b57\\n\u7b2c\u4e09\u884c\u5099\u8a3b"<\/span>, modifier = Modifier.weight(1f<\/span>))\n}<\/code><\/pre>\n
        \u5728\u6a19\u6e96\u55ae\u8d9f\u6e2c\u91cf\u6a21\u578b\u4e0b\uff0c\u9019\u662f\u4e00\u500b\u908f\u8f2f\u6b7b\u5faa\u74b0<\/strong>\uff1a<\/p>\n
          \n
        1. VerticalDivider<\/code> \u8aaa\uff1a\u300c\u6211\u8981 fillMaxHeight()<\/code>\uff0c\u4f60 Row \u591a\u9ad8\u6211\u5c31\u591a\u9ad8\uff01\u300d<\/li>\n
        2. Row<\/code> \u8aaa\uff1a\u300c\u6211\u662f wrap_content<\/code>\uff0c\u6211\u5f97\u770b\u4f60\u5011\u6240\u6709\u4eba\u91cf\u5b8c\u624d\u77e5\u9053\u6211\u6709\u591a\u9ad8\uff01\u300d<\/li>\n
        3. \u5169\u908a\u4e92\u76f8\u4e7e\u77aa\u773c\u3002\u5728\u820a View \u7cfb\u7d71\u88e1\u53ea\u80fd\u91cf\u5169\u6b21\uff1b\u4f46\u5728 Compose \u56b4\u7981\u547c\u53eb\u5169\u6b21 measure()<\/code> \u7684\u9435\u5f8b\u4e0b\uff0c\u5982\u679c\u76f4\u63a5\u57f7\u884c\uff0cDivider \u6703\u7576\u5834\u628a Row \u6490\u5230\u7121\u7aae\u5927\u6216\u76f4\u63a5\u5831\u932f\u3002<\/li>\n<\/ol>\n
          \u6551\u8d16\u65b9\u6848\uff1a\u7368\u7acb\u7684\u9810\u5148\u67e5\u8a62\u901a\u9053\uff08Query Pass\uff09<\/h3>\n
          \u70ba\u4e86\u5728\u4e0d\u7834\u58de\u55ae\u8d9f\u6e2c\u91cf\u524d\u63d0\u4e0b\u89e3\u958b\u6096\u8ad6\uff0cCompose \u8a2d\u8a08\u4e86 Intrinsic Measurements\uff08\u56fa\u6709\u5c3a\u5bf8\u67e5\u8a62\uff09<\/strong>\u3002
          \n\u9019\u662f\u5728\u6b63\u5f0f\u57f7\u884c measure()<\/code> \u4e4b\u524d\uff0c\u7236\u5143\u4ef6\u88ab\u5141\u8a31\u958b\u95e2\u7684\u4e00\u689d\u300c\u8f15\u91cf\u7d1a\u554f\u8a62\u901a\u9053\u300d\uff1a<\/p>\n
          sequenceDiagram\n    autonumber\n    participant P as \u7236\u5143\u4ef6 (Row)\n    participant C1 as \u5b50\u5143\u4ef6 1 (Text)\n    participant C2 as \u5b50\u5143\u4ef6 2 (VerticalDivider)\n\n    Note over P,C2: \u968e\u6bb5\u4e00\uff1a\u9810\u5148\u67e5\u8a62\u901a\u9053 (Query Pass - \u4e0d\u5206\u914d Placeable)\n    P->>C1: minIntrinsicHeight(width)? (\u4f60\u6700\u5c11\u9700\u8981\u591a\u9ad8\uff1f)\n    C1-->>P: \u56de\u5831 60dp (\u4e09\u884c\u6587\u5b57\u9ad8\u5ea6)\n    P->>C2: minIntrinsicHeight(width)? (\u4f60\u6700\u5c11\u9700\u8981\u591a\u9ad8\uff1f)\n    C2-->>P: \u56de\u5831 0dp\n\n    Note over P: \u7236\u5143\u4ef6\u78ba\u5b9a\u81ea\u8eab\u9ad8\u5ea6 Constraints: min=60dp, max=60dp\n\n    Note over P,C2: \u968e\u6bb5\u4e8c\uff1a\u6b63\u5f0f\u55ae\u8d9f\u6e2c\u91cf (Final Measure Pass - \u50c5\u6b64\u4e00\u6b21\uff01)\n    P->>C1: measure(Constraints(maxHeight=60dp))\n    C1-->>P: \u56de\u50b3 Placeable\n    P->>C2: measure(Constraints(maxHeight=60dp))\n    C2-->>P: VerticalDivider \u6839\u64da 60dp \u6eff\u5e45\u5c55\u958b\uff0c\u56de\u50b3 Placeable\n\n    Note over P: \u5169\u8005\u7686\u50c5\u88ab measure() \u4e00\u6b21\uff0c\u56b4\u683c\u5b88\u8b77 O(n) \u55ae\u8d9f\u9435\u5247\uff01<\/code><\/pre>\n
          \u5e95\u5c64\u96d9\u4ecb\u9762\u5206\u5de5\uff1aMeasurable vs. IntrinsicMeasurable<\/h3>\n
          \u5728\u81ea\u8a02 Layout<\/code> \u6216 Modifier.layout<\/code> \u7684\u5e95\u5c64\uff0c\u50b3\u9032\u4f86\u7684 measurable<\/code> \u7269\u4ef6\u5be6\u969b\u4e0a\u5be6\u4f5c\u4e86\u5169\u500b\u4e0d\u540c\u89d2\u8272\u7684\u4ecb\u9762\uff1a<\/p>\n
          \/\/ Compose \u5167\u90e8\u67b6\u69cb\u62bd\u8c61\u7c21\u5316<\/span>\ninterface<\/span> IntrinsicMeasurable<\/span> {\n    fun<\/span> minIntrinsicWidth<\/span>(height: Int<\/span>)<\/span><\/span>: Int<\/span>\n    fun<\/span> maxIntrinsicWidth<\/span>(height: Int<\/span>)<\/span><\/span>: Int<\/span>\n    fun<\/span> minIntrinsicHeight<\/span>(width: Int<\/span>)<\/span><\/span>: Int<\/span>\n    fun<\/span> maxIntrinsicHeight<\/span>(width: Int<\/span>)<\/span><\/span>: Int<\/span>\n}\n\ninterface<\/span> Measurable<\/span> : IntrinsicMeasurable<\/span> {\n    \/\/ \u6700\u7d42\u6b0a\u5a01\u6307\u4ee4\uff1a\u53ea\u80fd\u547c\u53eb\u4e00\u6b21\uff0c\u547c\u53eb\u5169\u6b21\u76f4\u63a5\u62cb\u51fa IllegalStateException\uff01<\/span>\n    fun<\/span> measure<\/span>(constraints: Constraints<\/span>)<\/span><\/span>: Placeable\n}<\/code><\/pre>\n
            \n
          1. IntrinsicMeasurable<\/code>\uff08\u63a2\u807d\u504f\u597d\uff09<\/strong>\uff1a\u7236\u5143\u4ef6\u5728\u6b63\u5f0f\u6e2c\u91cf\u524d\uff0c\u900f\u904e minIntrinsicHeight<\/code> \u7b49\u51fd\u5f0f\u5411\u5b50\u5143\u4ef6\u6253\u807d\u300c\u5728\u4f60\u7406\u60f3\u7684\u4e16\u754c\u88e1\uff0c\u4f60\u6700\u5c11\u9700\u8981\u591a\u5927\u7a7a\u9593\uff1f\u300d\uff0c\u9019\u53ea\u662f\u4e00\u6b21\u56de\u50b3\u6574\u6578 Int<\/code> \u7684\u8f15\u91cf\u8a66\u7b97\uff0c\u4e0d\u6703\u5efa\u7acb\u4efb\u4f55 Placeable \u8a18\u61b6\u9ad4\u7d50\u69cb<\/strong>\u3002<\/li>\n
          2. Measurable<\/code>\uff08\u6700\u7d42\u5b9a\u8b9e\uff09<\/strong>\uff1a\u7236\u5143\u4ef6\u532f\u7e3d\u6240\u6709\u5b50\u5143\u4ef6\u7684\u56fa\u6709\u5c3a\u5bf8\uff0c\u7b97\u51fa\u78ba\u5207\u7684\u908a\u754c\u5f8c\uff0c\u6b63\u5f0f\u4e0b\u9054 measure(constraints)<\/code> \u547d\u4ee4\u3002\u6b64\u6642\u5b50\u5143\u4ef6\u771f\u6b63\u57f7\u884c\u55ae\u8d9f\u6e2c\u91cf\u4e26\u7522\u51fa Placeable<\/code>\u3002<\/li>\n<\/ol>\n
            IntrinsicSize \u7684\u56db\u7a2e\u5e38\u7528\u6a21\u5f0f<\/h3>\n
            \u5728 Composable \u4e0a\u8a2d\u5b9a Modifier<\/code> \u6642\uff0c\u53ef\u6839\u64da\u9700\u6c42\u5411\u5b50\u5143\u4ef6\u67e5\u8a62\u4e0d\u540c\u7dad\u5ea6\uff1a<\/p>\n
              \n
            • Modifier.width(IntrinsicSize.Min)<\/code>\uff1a\u5728\u7d66\u5b9a\u9ad8\u5ea6\u4e0b\uff0c\u80fd\u6b63\u78ba\u5448\u73fe\u5167\u5bb9\u6240\u9700\u7684\u6700\u5c0f\u5bec\u5ea6\u3002<\/li>\n
            • Modifier.width(IntrinsicSize.Max)<\/code>\uff1a\u5728\u4e0d\u767c\u751f\u975e\u9810\u671f\u6298\u884c\u7684\u60c5\u6cc1\u4e0b\uff0c\u5167\u5bb9\u6240\u9700\u7684\u6700\u5927\u5bec\u5ea6\u3002<\/li>\n
            • Modifier.height(IntrinsicSize.Min)<\/code>\uff1a\u5e38\u7528\u65bc Row \u5782\u76f4\u5206\u9694\u7dda\u5c0d\u9f4a\uff0c\u4ee5\u6700\u9ad8\u5167\u5bb9\u70ba\u57fa\u6e96\u3002<\/li>\n
            • Modifier.height(IntrinsicSize.Max)<\/code>\uff1a\u4ee5\u6700\u5927\u5c55\u958b\u70ba\u57fa\u6e96\u7684\u9ad8\u5ea6\u504f\u597d\u3002<\/li>\n<\/ul>\n
              \n
              \u5de5\u4f4d\u5927\u5be6\u8a71\u8207\u6536\u5de5<\/h2>\n
                \n
              1. \u5206\u6e05\u4e09\u968e\u6bb5\u662f\u6548\u80fd\u8abf\u6821\u7684\u57fa\u77f3<\/strong>\uff1a\u80fd\u7528 Modifier.offset { }<\/code> \u89e3\u6c7a\u7684\u52d5\u756b\uff0c\u5c31\u4e0d\u8981\u5728 Composable \u51fd\u5f0f\u672c\u9ad4\u5167\u76f4\u63a5\u8b80\u53d6 State\uff1b\u80fd\u7528 drawBehind<\/code> \u7e6a\u88fd\u7684\u8996\u89ba\u6548\u679c\uff0c\u5c31\u4e0d\u8981\u958b\u4e00\u500b\u65b0\u7684 Box \u5143\u4ef6\u3002<\/li>\n
              2. Intrinsic Measurements \u662f\u6602\u8cb4\u7684\u6551\u706b\u7279\u4f8b<\/strong>\uff1a\u5b83\u96d6\u7136\u4fdd\u8b49\u4e86\u55ae\u8d9f\u6e2c\u91cf\u7684\u8a9e\u7fa9\u5b8c\u6574\uff0c\u4f46\u80cc\u5f8c\u4ecd\u6709\u591a\u8dd1\u4e00\u6b21\u67e5\u8a62\u905e\u8ff4\u7684\u7b97\u529b\u4ee3\u50f9\u3002\u9664\u975e\u50cf\u300c\u5782\u76f4\u5206\u9694\u7dda\u8cbc\u9f4a\u5167\u5bb9\u9ad8\u5ea6\u300d\u9019\u7a2e\u4e0d\u53ef\u66ff\u4ee3\u7684\u7248\u9762\u5834\u666f\uff0c\u5426\u5247\u4e0d\u8981\u7121\u8166\u5728\u5168 App \u5230\u8655\u5957\u7528 IntrinsicSize.Min<\/code>\u3002<\/li>\n<\/ol>\n
                \u611f\u8b1d\u89c0\u770b\uff0c\u6536\u5de5\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
                \u300c\u60f3\u7576\u5e74\u5beb\u50b3\u7d71 Android View\uff0c\u81ea\u8a02\u5143\u4ef6\u6700\u6015\u5728 onMeasure \u88e1\u8ddf MeasureSpec \u5927 […]<\/p>\n","protected":false},"author":1,"featured_media":1244,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[86],"tags":[215,124,311],"_links":{"self":[{"href":"https:\/\/boochlin.com\/index.php?rest_route=\/wp\/v2\/posts\/650"}],"collection":[{"href":"https:\/\/boochlin.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/boochlin.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/boochlin.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/boochlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=650"}],"version-history":[{"count":10,"href":"https:\/\/boochlin.com\/index.php?rest_route=\/wp\/v2\/posts\/650\/revisions"}],"predecessor-version":[{"id":1609,"href":"https:\/\/boochlin.com\/index.php?rest_route=\/wp\/v2\/posts\/650\/revisions\/1609"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/boochlin.com\/index.php?rest_route=\/wp\/v2\/media\/1244"}],"wp:attachment":[{"href":"https:\/\/boochlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=650"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/boochlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=650"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/boochlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=650"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}