{"id":713,"date":"2025-07-17T02:05:29","date_gmt":"2025-07-17T02:05:29","guid":{"rendered":"https:\/\/boochlin.com\/?p=713"},"modified":"2025-08-27T22:33:23","modified_gmt":"2025-08-27T22:33:23","slug":"jetpack-compose-%e4%bd%95%e6%99%82%e8%a9%b2%e7%94%a8-derivedstateof%ef%bc%9f","status":"publish","type":"post","link":"https:\/\/boochlin.com\/?p=713","title":{"rendered":"Jetpack Compose: \u4f55\u6642\u8a72\u7528 derivedStateOf\uff1f"},"content":{"rendered":"

\u5b98\u65b9\u5c0e\u8b80<\/a><\/p>\n

derivedStateOf \u662f\u4e00\u500b\u6548\u80fd\u512a\u5316\u5de5\u5177<\/strong>\uff0c\u5c08\u9580\u7528\u4f86\u9632\u6b62\u56e0\u300c\u4f86\u6e90\u72c0\u614b\u300d\u8b8a\u5316\u904e\u65bc\u983b\u7e41\u800c\u5c0e\u81f4\u7684**\u300c\u4e0d\u5fc5\u8981\u7684 UI \u91cd\u7d44 (Recomposition)\u300d\u3002<\/strong>\u3002<\/p>\n

\n

1. \u884d\u751f<\/h4>\n

\u4e00\u500b\u5e38\u898b\u7684\u7bc4\u4f8b\u958b\u5834\uff1a\u4e00\u500b\u53ef\u6efe\u52d5\u7684\u5217\u8868\uff0c\u4ee5\u53ca\u4e00\u500b\u300c\u56de\u5230\u9802\u90e8\u300d\u7684\u6309\u9215\u3002<\/p>\n

    \n
  • \u9700\u6c42\uff1a<\/strong> \u9019\u500b\u6309\u9215\u53ea\u6709\u5728\u4f7f\u7528\u8005\u5411\u4e0b\u6efe\u52d5\u5f8c<\/strong>\u624d\u9700\u8981\u986f\u793a\u3002<\/li>\n
  • \u72c0\u614b\u95dc\u4fc2\uff1a<\/strong> \u6309\u9215\u7684\u986f\u793a\u72c0\u614b (showButton: Boolean)\uff0c\u662f derived \u81ea<\/strong>\u5217\u8868\u7684\u6efe\u52d5\u72c0\u614b (listState.firstVisibleItemIndex > 0)\u3002<\/li>\n<\/ul>\n

    Kotlin<\/p>\n

    \/\/ \u932f\u8aa4\u7684\u793a\u7bc4 (Naive Solution)\n@Composable\nfun MyList(listState: LazyListState) {\n    \/\/ ...\n    val showButton = listState.firstVisibleItemIndex > 0 \/\/ \u76f4\u63a5\u8a08\u7b97\n\n    \/\/ ...\n    if (showButton) {\n        ScrollToTopButton() \/\/ \u4efb\u4f55\u7528\u5230 showButton \u7684\u5730\u65b9\u90fd\u6703\u53d7\u5f71\u97ff\n    }\n}\n<\/code><\/pre>\n
    \u554f\u984c\u5728\u54ea\uff1f<\/strong><\/p>\n
    listState.firstVisibleItemIndex (\u7b2c\u4e00\u500b\u53ef\u898b\u9805\u76ee) \u9019\u500b\u72c0\u614b\u5728\u4f7f\u7528\u8005\u6efe\u52d5\u5217\u8868\u6642\uff0c\u6703\u4ee5\u6975\u9ad8\u7684\u983b\u7387<\/strong>\u6539\u8b8a\uff08\u6efe\u52d5\u89f8\u767c\uff09\u3002\u9019\u5c0e\u81f4 showButton \u983b\u7e41\u5730\u91cd\u65b0\u8a08\u7b97\u3002<\/p>\n
    \u96d6\u7136 showButton \u7684\u53ef\u80fd\u4e00\u76f4\u90fd\u662f true\uff0c\u4f46\u56e0\u70ba\u5b83\u7684\u300c\u4f86\u6e90\u300dlistState \u4e00\u76f4\u5728\u8b8a\uff0c\u4efb\u4f55\u8b80\u53d6 showButton \u7684 Composable \u90fd\u6703\u88ab\u4e0d\u65b7\u5730\u91cd\u7d44<\/strong>\uff0c\u9020\u6210\u56b4\u91cd\u7684\u6548\u80fd\u6d6a\u8cbb\u3002<\/p>\n
    \n
    2. derivedStateOf \u7684\u904b\u4f5c\u539f\u7406<\/h4>\n
    Kotlin<\/p>\n
    \/\/ \u63a8\u85a6\u7684\u6b63\u78ba\u89e3\u6cd5 (Recommended Solution)\n@Composable\nfun MyList(listState: LazyListState) {\n    \/\/ ...\n    \/\/ \u4f7f\u7528 derivedStateOf\n    val showButton by remember {\n        derivedStateOf {\n            listState.firstVisibleItemIndex > 0\n        }\n    }\n\n    \/\/ ...\n    if (showButton) {\n        ScrollToTopButton()\n    }\n}\n<\/code><\/pre>\n
    \u5b83\u7684\u904b\u4f5c\u65b9\u5f0f\u5982\u4e0b\uff1a<\/strong><\/p>\n
    derivedStateOf \u6703\u89c0\u5bdf\u5176 {…} \u5340\u584a\u5167\u7684\u8a08\u7b97\u3002\u5b83\u53ea\u95dc\u5fc3\u9019\u500b\u8a08\u7b97\u7684\u6700\u7d42\u7d50\u679c<\/strong>\u662f\u5426\u8207\u4e0a\u4e00\u6b21\u76f8\u540c\u3002<\/p>\n
      \n
    • \u521d\u59cb\u72c0\u614b\uff1a<\/strong> listState.firstVisibleItemIndex \u662f 0\u3002derivedStateOf \u8a08\u7b97\u51fa\u7684\u7d50\u679c\u662f false\u3002<\/li>\n
    • \u958b\u59cb\u5411\u4e0b\u6efe\u52d5\uff1a<\/strong>\n
        \n
      • firstVisibleItemIndex \u8b8a\u6210 1\u3002\u8a08\u7b97\u7d50\u679c\u5f9e false \u8b8a\u70ba<\/strong> true\u3002\u2192 derivedStateOf \u901a\u77e5 UI \u91cd\u7d44\uff0c\u6309\u9215\u51fa\u73fe\u3002<\/strong><\/li>\n
      • firstVisibleItemIndex \u7e7c\u7e8c\u8b8a\u6210 2, 3, 4… 100\u3002\u96d6\u7136\u4f86\u6e90\u72c0\u614b\u4e00\u76f4\u5728\u8b8a\uff0c\u4f46\u8a08\u7b97\u7d50\u679c\u59cb\u7d42\u662f true<\/strong>\u3002\u2192 derivedStateOf \u767c\u73fe\u7d50\u679c\u6c92\u8b8a\uff0c\u56e0\u6b64\u300c\u6514\u622a\u300d\u4e86\u66f4\u65b0\uff0c\u4e0d\u6703\u89f8\u767c UI \u91cd\u7d44\u3002<\/strong><\/li>\n<\/ul>\n<\/li>\n
      • \u6efe\u52d5\u56de\u9802\u90e8\uff1a<\/strong>\n
          \n
        • firstVisibleItemIndex \u8b8a\u56de 0\u3002\u8a08\u7b97\u7d50\u679c\u5f9e true \u8b8a\u70ba<\/strong> false\u3002\u2192 derivedStateOf
          \n<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
          \u5b98\u65b9\u5c0e\u8b80 derivedStateOf \u662f\u4e00\u500b\u6548\u80fd\u512a\u5316\u5de5\u5177\uff0c\u5c08\u9580\u7528\u4f86\u9632\u6b62\u56e0\u300c\u4f86\u6e90\u72c0\u614b\u300d\u8b8a\u5316\u904e\u65bc\u983b\u7e41\u800c\u5c0e\u81f4\u7684**\u300c\u4e0d\u5fc5\u8981\u7684 UI \u91cd\u7d44 (Recomposition)\u300d\u3002\u3002 1. \u884d\u751f \u4e00\u500b\u5e38\u898b\u7684\u7bc4\u4f8b\u958b…<\/p>\n","protected":false},"author":1,"featured_media":872,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[81],"tags":[],"_links":{"self":[{"href":"https:\/\/boochlin.com\/index.php?rest_route=\/wp\/v2\/posts\/713"}],"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=713"}],"version-history":[{"count":7,"href":"https:\/\/boochlin.com\/index.php?rest_route=\/wp\/v2\/posts\/713\/revisions"}],"predecessor-version":[{"id":873,"href":"https:\/\/boochlin.com\/index.php?rest_route=\/wp\/v2\/posts\/713\/revisions\/873"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/boochlin.com\/index.php?rest_route=\/wp\/v2\/media\/872"}],"wp:attachment":[{"href":"https:\/\/boochlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=713"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/boochlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=713"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/boochlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=713"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}