{"id":713,"date":"2025-07-17T02:05:29","date_gmt":"2025-07-17T02:05:29","guid":{"rendered":"https:\/\/boochlin.com\/?p=713"},"modified":"2026-09-19T17:04:01","modified_gmt":"2026-09-19T17:04:01","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
  • \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<\/p>\n<\/li>\n

  • \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<\/p>\n<\/li>\n<\/ul>\n

    \/\/ \u932f\u8aa4\u7684\u793a\u7bc4 (Naive Solution)<\/span>\n@Composable<\/span>\nfun<\/span> MyList<\/span>(listState: LazyListState<\/span>)<\/span><\/span> {\n    \/\/ ...<\/span>\n    val<\/span> showButton = listState.firstVisibleItemIndex > 0<\/span> \/\/ \u76f4\u63a5\u8a08\u7b97<\/span>\n\n    \/\/ ...<\/span>\n    if<\/span> (showButton) {\n        ScrollToTopButton() \/\/ \u4efb\u4f55\u7528\u5230 showButton \u7684\u5730\u65b9\u90fd\u6703\u53d7\u5f71\u97ff<\/span>\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
    \/\/ \u63a8\u85a6\u7684\u6b63\u78ba\u89e3\u6cd5 (Recommended Solution)<\/span>\n@Composable<\/span>\nfun<\/span> MyList<\/span>(listState: LazyListState<\/span>)<\/span><\/span> {\n    \/\/ ...<\/span>\n    \/\/ \u4f7f\u7528 derivedStateOf<\/span>\n    val<\/span> showButton by<\/span> remember {\n        derivedStateOf {\n            listState.firstVisibleItemIndex > 0<\/span>\n        }\n    }\n\n    \/\/ ...<\/span>\n    if<\/span> (showButton) {\n        ScrollToTopButton()\n    }\n}<\/code><\/pre>\n
    \u5b83\u7684\u904b\u4f5c\u65b9\u5f0f\u5982\u4e0b\uff1a<\/strong><\/p>\n
    derivedStateOf \u6703\u89c0\u5bdf\u5176 {\u2026} \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
    • \n
      \u521d\u59cb\u72c0\u614b\uff1a<\/strong> listState.firstVisibleItemIndex \u662f 0\u3002derivedStateOf \u8a08\u7b97\u51fa\u7684\u7d50\u679c\u662f false\u3002<\/p>\n<\/li>\n
    • \n
      \u958b\u59cb\u5411\u4e0b\u6efe\u52d5\uff1a<\/strong><\/p>\n
        \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><\/p>\n<\/li>\n
      • \n
        firstVisibleItemIndex \u7e7c\u7e8c\u8b8a\u6210 2, 3, 4\u2026 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><\/p>\n<\/li>\n<\/ul>\n<\/li>\n
      • \n
        \u6efe\u52d5\u56de\u9802\u90e8\uff1a<\/strong><\/p>\n
          \n
        • firstVisibleItemIndex \u8b8a\u56de 0\u3002\u8a08\u7b97\u7d50\u679c\u5f9e true \u8b8a\u70ba<\/strong> false\u3002**\u2192 derivedStateOf<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
          **<\/p>\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** […]<\/p>\n","protected":false},"author":1,"featured_media":872,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[86],"tags":[213,124,126,292],"_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":10,"href":"https:\/\/boochlin.com\/index.php?rest_route=\/wp\/v2\/posts\/713\/revisions"}],"predecessor-version":[{"id":1543,"href":"https:\/\/boochlin.com\/index.php?rest_route=\/wp\/v2\/posts\/713\/revisions\/1543"}],"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}]}}