Jetpack Compose 学习资源汇总

谁践踏了优雅 2022-12-04 02:21 233阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70_pic_center]

--------------------

Jetpack Compose 为Android带来了先进的声明式UI开发方式。  
近期alpha1.0正式发布，说明目前整体功能已接近完善，API也足够稳定，是时候开始学习一波了。

推荐一个项目，这里整理了各种高质量的官方、民间的Compose学习资料，有兴趣的同学不妨关注一下：

> ➡️ **[Learn Jetpack Compose Android][]** ⬅️  
> *aims to be your starting point to find the finest learning content for Jetpack Compose suites of libraries.*

> ***Contents***  
>    *· Slides:* *大会演讲、分享*  
>    *· Official:* *官方文档、代码实例*  
>    *· Articles:* *技术博客、文章*  
>    *· Githubs*: *民间开源项目*

# *Slides* #

--------------------

*  [https://speakerdeck.com/vinaygaba/360-andev-2020-learning-jetpack-compose-by-example][https_speakerdeck.com_vinaygaba_360-andev-2020-learning-jetpack-compose-by-example] \[July 23, 2020\]  
    360 | AnDev 2020：通过例子学习Jetpack Compose — Vinay Gaba
 *  [https://speakerdeck.com/alexzhukovich/lets-build-an-android-ui-with-jetpack-compose][https_speakerdeck.com_alexzhukovich_lets-build-an-android-ui-with-jetpack-compose] \[April 20, 2020\]  
    使用Jetpack Compose创建Android UI — Alex Zhukovich
 *  [https://speakerdeck.com/lnicolet/mvi-with-jetpack-compose][https_speakerdeck.com_lnicolet_mvi-with-jetpack-compose] \[September 09, 2019\]  
    Jetpack Compose中使用MVI — Luca Nicoletti
 *  [https://speakerdeck.com/lelandrichardson/react-meet-compose][https_speakerdeck.com_lelandrichardson_react-meet-compose] \[July 12, 2019\]  
    React与Compose — Leland Richardson
 *  [https://speakerdeck.com/ragunathjawahar/jetpack-compose-next-gen-kotlin-ui-toolkit-for-android][https_speakerdeck.com_ragunathjawahar_jetpack-compose-next-gen-kotlin-ui-toolkit-for-android] \[June 22, 2019\]  
    Jetpack Compose：新一代Kotlin/UI框架 — Ragunath Jawahar
 *  [https://speakerdeck.com/takusemba/jetpack-compose][https_speakerdeck.com_takusemba_jetpack-compose] \[May 21, 2019\]  
    Jetpack Compose — TakuSemba

# *Official* #

--------------------

*  [https://developer.android.com/courses/pathways/compose][https_developer.android.com_courses_pathways_compose]  
    Jetpack Compose 官方教程
 *  [https://developer.android.com/jetpack/compose][https_developer.android.com_jetpack_compose]  
    Jetpack Compose 官网主页
 *  [https://developer.android.com/jetpack/compose/documentation][https_developer.android.com_jetpack_compose_documentation]  
    Jetpack Compose 官方文档
 *  [https://codelabs.developers.google.com/codelabs/jetpack-compose-basics/index.html][https_codelabs.developers.google.com_codelabs_jetpack-compose-basics_index.html]  
    代码实验室之基础
 *  [https://codelabs.developers.google.com/codelabs/jetpack-compose-migration/index.html][https_codelabs.developers.google.com_codelabs_jetpack-compose-migration_index.html]  
    代码实验室之迁移到Compose
 *  [https://codelabs.developers.google.com/codelabs/jetpack-compose-layouts/index.html][https_codelabs.developers.google.com_codelabs_jetpack-compose-layouts_index.html]  
    代码实验室之布局
 *  [https://codelabs.developers.google.com/codelabs/jetpack-compose-theming/index.html][https_codelabs.developers.google.com_codelabs_jetpack-compose-theming_index.html]  
    代码实验室之Theming
 *  [https://codelabs.developers.google.com/codelabs/jetpack-compose-state/index.html][https_codelabs.developers.google.com_codelabs_jetpack-compose-state_index.html]  
    代码实验室之状态管理
 *  [https://android.googlesource.com/platform/frameworks/support/+/refs/heads/androidx-master-dev/ui][https_android.googlesource.com_platform_frameworks_support_refs_heads_androidx-master-dev_ui]  
    Jetpack Compose 官方源码仓库
 *  [https://github.com/androidx/androidx/tree/androidx-master-dev/ui][https_github.com_androidx_androidx_tree_androidx-master-dev_ui]  
    github仓库，与官方仓库定期同步
 *  [https://github.com/aosp-mirror/platform\_frameworks\_support/tree/androidx-master-dev/ui][https_github.com_aosp-mirror_platform_frameworks_support_tree_androidx-master-dev_ui]  
    Jetpack Compose AOSP镜像
 *  [https://issuetracker.google.com/issues?q=status:open%20componentid:612128][https_issuetracker.google.com_issues_q_status_open_20componentid_612128]  
    Jetpack Compose issues近期问题一栏
 *  [https://issuetracker.google.com/issues/new?component=612128][https_issuetracker.google.com_issues_new_component_612128]  
    Jetpack Compose 新issues创建
 *  [https://github.com/android/compose-samples][https_github.com_android_compose-samples]  
    官方Sample

# *Articles* #

--------------------

*  [https://jetc.dev/][https_jetc.dev]  
    Jetpack Compose Resources + Newsletter。
 *  [https://medium.com/androiddevelopers/understanding-jetpack-compose-part-1-of-2-ca316fe39050][https_medium.com_androiddevelopers_understanding-jetpack-compose-part-1-of-2-ca316fe39050]  
    Jetpack Compose实现原理Part 1 of 2 — Leland Richardson
 *  [https://joebirch.co/tag/jetpack-compose/][https_joebirch.co_tag_jetpack-compose]  
    Jetpack Compose的一些学习内容整理 — Joe Birch
 *  [https://medium.com/tag/jetpack-compose/latest][https_medium.com_tag_jetpack-compose_latest]  
    记录了Jetpack Compose的最新进展以及一些学习资源
 *  [https://dev.to/t/jetpackcompose][https_dev.to_t_jetpackcompose]  
    同样汇总了一些最新的学习资料和项目进展
 *  [https://compose.academy/][https_compose.academy]  
    非官方的教学网站，但做的比官方的还要友好
 *  [https://jetpackcompose.app/][https_jetpackcompose.app]  
    介绍了基本的使用方法以及与传统UI开发方式的比较
 *  [https://alexzh.com/tag/jetpack-compose/][https_alexzh.com_tag_jetpack-compose]  
    Quality Jetpack Compose — AlexZh
 *  [https://www.raywenderlich.com/7032631-jetpack-compose-tutorial-for-android-getting-started][https_www.raywenderlich.com_7032631-jetpack-compose-tutorial-for-android-getting-started]  
    入门教程

# *Githubs* #

--------------------

## *Application* ##

*  [https://github.com/androiddevnotes/awesome-jetpack-compose-android-apps][https_github.com_androiddevnotes_awesome-jetpack-compose-android-apps]  
    基于Jetpack Compose 开发的各种APP项目汇总
 *  [https://docs.github.com/en/github/searching-for-information-on-github/about-searching-on-github][https_docs.github.com_en_github_searching-for-information-on-github_about-searching-on-github]  
    在github中的一些搜索技巧，帮助你搜索感想去的项目

## *Libraries* ##

*  [https://github.com/chrisbanes/accompanist][https_github.com_chrisbanes_accompanist]
 *  [https://github.com/airbnb/Showkase][https_github.com_airbnb_Showkase]

## *Resources* ##

*  [https://github.com/vinaygaba/Learn-Jetpack-Compose-By-Example][https_github.com_vinaygaba_Learn-Jetpack-Compose-By-Example]  
    通过很多小例子来学习Compose的使用
 *  [https://github.com/hitherejoe/ComposeAcademy-Playground][https_github.com_hitherejoe_ComposeAcademy-Playground]  
    适合对Compose渐进式的学习，类目整理的很合理
 *  [https://github.com/Foso/Jetpack-Compose-Playground][https_github.com_Foso_Jetpack-Compose-Playground]  
    非常全的Jetpack Compose demo项目，一直紧跟版本升级
 *  [https://github.com/Naveentp/Awesome-Jetpack-Compose][https_github.com_Naveentp_Awesome-Jetpack-Compose]  
    像Learn Jetpack Compose Android一样，汇总了各种Compose的学习资源

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/4943f684f65141a2a5e4cfdcdff7f861.png
[Learn Jetpack Compose Android]: https://github.com/androiddevnotes/learn-jetpack-compose-android
[https_speakerdeck.com_vinaygaba_360-andev-2020-learning-jetpack-compose-by-example]: https://speakerdeck.com/vinaygaba/360-andev-2020-learning-jetpack-compose-by-example
[https_speakerdeck.com_alexzhukovich_lets-build-an-android-ui-with-jetpack-compose]: https://speakerdeck.com/alexzhukovich/lets-build-an-android-ui-with-jetpack-compose
[https_speakerdeck.com_lnicolet_mvi-with-jetpack-compose]: https://speakerdeck.com/lnicolet/mvi-with-jetpack-compose
[https_speakerdeck.com_lelandrichardson_react-meet-compose]: https://speakerdeck.com/lelandrichardson/react-meet-compose
[https_speakerdeck.com_ragunathjawahar_jetpack-compose-next-gen-kotlin-ui-toolkit-for-android]: https://speakerdeck.com/ragunathjawahar/jetpack-compose-next-gen-kotlin-ui-toolkit-for-android
[https_speakerdeck.com_takusemba_jetpack-compose]: https://speakerdeck.com/takusemba/jetpack-compose
[https_developer.android.com_courses_pathways_compose]: https://developer.android.com/courses/pathways/compose
[https_developer.android.com_jetpack_compose]: https://developer.android.com/jetpack/compose
[https_developer.android.com_jetpack_compose_documentation]: https://developer.android.com/jetpack/compose/documentation
[https_codelabs.developers.google.com_codelabs_jetpack-compose-basics_index.html]: https://codelabs.developers.google.com/codelabs/jetpack-compose-basics/index.html
[https_codelabs.developers.google.com_codelabs_jetpack-compose-migration_index.html]: https://codelabs.developers.google.com/codelabs/jetpack-compose-migration/index.html
[https_codelabs.developers.google.com_codelabs_jetpack-compose-layouts_index.html]: https://codelabs.developers.google.com/codelabs/jetpack-compose-layouts/index.html
[https_codelabs.developers.google.com_codelabs_jetpack-compose-theming_index.html]: https://codelabs.developers.google.com/codelabs/jetpack-compose-theming/index.html
[https_codelabs.developers.google.com_codelabs_jetpack-compose-state_index.html]: https://codelabs.developers.google.com/codelabs/jetpack-compose-state/index.html
[https_android.googlesource.com_platform_frameworks_support_refs_heads_androidx-master-dev_ui]: https://android.googlesource.com/platform/frameworks/support/+/refs/heads/androidx-master-dev/ui
[https_github.com_androidx_androidx_tree_androidx-master-dev_ui]: https://github.com/androidx/androidx/tree/androidx-master-dev/ui
[https_github.com_aosp-mirror_platform_frameworks_support_tree_androidx-master-dev_ui]: https://github.com/aosp-mirror/platform_frameworks_support/tree/androidx-master-dev/ui
[https_issuetracker.google.com_issues_q_status_open_20componentid_612128]: https://issuetracker.google.com/issues?q=status:open%20componentid:612128
[https_issuetracker.google.com_issues_new_component_612128]: https://issuetracker.google.com/issues/new?component=612128
[https_github.com_android_compose-samples]: https://github.com/android/compose-samples
[https_jetc.dev]: https://jetc.dev/
[https_medium.com_androiddevelopers_understanding-jetpack-compose-part-1-of-2-ca316fe39050]: https://medium.com/androiddevelopers/understanding-jetpack-compose-part-1-of-2-ca316fe39050
[https_joebirch.co_tag_jetpack-compose]: https://joebirch.co/tag/jetpack-compose/
[https_medium.com_tag_jetpack-compose_latest]: https://medium.com/tag/jetpack-compose/latest
[https_dev.to_t_jetpackcompose]: https://dev.to/t/jetpackcompose
[https_compose.academy]: https://compose.academy/
[https_jetpackcompose.app]: https://jetpackcompose.app/
[https_alexzh.com_tag_jetpack-compose]: https://alexzh.com/tag/jetpack-compose/
[https_www.raywenderlich.com_7032631-jetpack-compose-tutorial-for-android-getting-started]: https://www.raywenderlich.com/7032631-jetpack-compose-tutorial-for-android-getting-started
[https_github.com_androiddevnotes_awesome-jetpack-compose-android-apps]: https://github.com/androiddevnotes/awesome-jetpack-compose-android-apps
[https_docs.github.com_en_github_searching-for-information-on-github_about-searching-on-github]: https://docs.github.com/en/github/searching-for-information-on-github/about-searching-on-github
[https_github.com_chrisbanes_accompanist]: https://github.com/chrisbanes/accompanist
[https_github.com_airbnb_Showkase]: https://github.com/airbnb/Showkase
[https_github.com_vinaygaba_Learn-Jetpack-Compose-By-Example]: https://github.com/vinaygaba/Learn-Jetpack-Compose-By-Example
[https_github.com_hitherejoe_ComposeAcademy-Playground]: https://github.com/hitherejoe/ComposeAcademy-Playground
[https_github.com_Foso_Jetpack-Compose-Playground]: https://github.com/Foso/Jetpack-Compose-Playground
[https_github.com_Naveentp_Awesome-Jetpack-Compose]: https://github.com/Naveentp/Awesome-Jetpack-Compose