Bắt đầu với Jetpack Compose
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Jetpack Compose là một bộ công cụ hiện đại giúp xây dựng giao diện người dùng gốc của Android. Trong phần đây, bạn sẽ tìm thấy thông tin mới nhất về cách sử dụng Compose.
- Tổng quan: Xem tất cả tài nguyên có sẵn dành cho các nhà phát triển Compose.
- Hướng dẫn: Bắt đầu với Compose bằng cách sử dụng Compose để xây dựng một giao diện người dùng đơn giản.
- Hướng dẫn nhanh: Mới! Hãy thử các hướng dẫn nhanh và tập trung của chúng tôi, được thiết kế để giúp bạn đạt được mục tiêu nhanh nhất có thể.
Tổ chức
- Suy nghĩ về Compose: Tìm hiểu xem cách tiếp cận khai báo của Compose khác với cách tiếp cận dựa trên lượt xem mà bạn có thể đã sử dụng trước đây như thế nào và cách xây dựng một mô hình tư duy làm việc với Compose.
- Quản lý trạng thái: Tìm hiểu về cách thiết lập và sử dụng trạng thái trong ứng dụng Compose.
- Vòng đời của thành phần kết hợp: Tìm hiểu về vòng đời của một thành phần kết hợp và cách Compose quyết định xem có cần vẽ lại thành phần kết hợp hay không.
- Đối tượng sửa đổi: Tìm hiểu cách sử dụng đối tượng sửa đổi để làm nổi bật hoặc trang trí cho thành phần kết hợp.
- Hiệu ứng lề trong Compose: Tìm hiểu những cách tốt nhất để quản lý các hiệu ứng lề.
- Các giai đoạn trong Jetpack Compose: Tìm hiểu về các bước mà Compose thực hiện để hiển thị giao diện người dùng và cách sử dụng thông tin đó để viết mã hiệu quả
- Phân lớp kiến trúc: Tìm hiểu về các lớp kiến trúc tạo nên Jetpack Compose và các nguyên tắc cốt lõi định hình nên thiết kế của Jetpack Compose.
- Hiệu suất: Tìm hiểu cách tránh những lỗi lập trình phổ biến có thể làm giảm hiệu suất của ứng dụng.
- Ngữ nghĩa trong Compose: Tìm hiểu về cây Ngữ nghĩa, có nhiệm vụ sắp xếp giao diện người dùng của bạn theo cách mà các dịch vụ hỗ trợ tiếp cận và khung thử nghiệm có thể sử dụng.
- Dữ liệu trong phạm vi cục bộ với CompositionLocal: Tìm hiểu cách sử dụng
CompositionLocal
để truyền dữ liệu thông qua Bản sáng tác.
Môi trường phát triển
Thiết kế
- Bố cục: Tìm hiểu về các thành phần bố cục gốc của Compose và cách thiết kế thành phần của riêng bạn.
- Kiến thức cơ bản về bố cục: Tìm hiểu về các khối dựng để có một giao diện người dùng ứng dụng đơn giản.
- Thành phần và bố cục Material: Tìm hiểu về các thành phần và bố cục Material trong Compose.
- Bố cục tuỳ chỉnh: Tìm hiểu cách kiểm soát bố cục của ứng dụng và cách thiết kế bố cục tuỳ chỉnh của riêng bạn.
- Hỗ trợ nhiều kích thước màn hình: Tìm hiểu cách sử dụng Compose để tạo bố cục thích ứng với nhiều kích thước màn hình, hướng và hệ số hình dạng.
- Đường căn chỉnh: Tìm hiểu cách tạo đường căn chỉnh tuỳ chỉnh để căn chỉnh và định vị chính xác các thành phần trên giao diện người dùng.
- Đo lường hàm nội tại: Vì Compose chỉ cho phép bạn đo lường các thành phần trên giao diện người dùng một lần cho mỗi lần truyền, nên trang này giải thích cách truy vấn thông tin về các thành phần con cháu trước khi đo lường chúng.
- ConstraintLayout: Tìm hiểu cách sử dụng
ConstraintLayout
trong giao diện người dùng Compose.
- Hệ thống thiết kế: Tìm hiểu cách triển khai hệ thống thiết kế và mang lại giao diện nhất quán cho ứng dụng.
- Danh sách và lưới: Tìm hiểu về một số lựa chọn của Compose để quản lý và hiển thị danh sách cũng như lưới dữ liệu.
- Văn bản: Tìm hiểu về các lựa chọn chính trong Compose dùng để hiển thị và chỉnh sửa văn bản.
- Đồ hoạ: Tìm hiểu về các tính năng của Compose để xây dựng và làm việc với đồ hoạ tuỳ chỉnh.
- Ảnh động: Tìm hiểu về các lựa chọn khác nhau của Compose để tạo ảnh động cho các thành phần trên giao diện người dùng.
- Cử chỉ: Tìm hiểu cách tạo giao diện người dùng trên Compose giúp phát hiện và tương tác với các cử chỉ của người dùng.
- Xử lý các hoạt động tương tác của người dùng: Tìm hiểu cách Compose chiết tách các đầu vào cấp thấp thành các hoạt động tương tác cấp cao hơn để bạn có thể tuỳ chỉnh cách các thành phần phản hồi thao tác của người dùng.
Sử dụng Compose
- Di chuyển các ứng dụng hiện có dựa trên Khung hiển thị: Tìm hiểu cách di chuyển ứng dụng hiện có dựa trên Khung hiển thị sang Compose.
- Chiến lược di chuyển: Tìm hiểu chiến lược để từng bước đưa Compose vào cơ sở mã một cách an toàn.
- API có khả năng tương tác: Tìm hiểu về các API của Compose để giúp bạn kết hợp Compose với giao diện người dùng dựa trên Khung hiển thị.
- Những điểm khác cần cân nhắc: Tìm hiểu những điểm khác cần cân nhắc như sắp xếp theo chủ đề, cấu trúc và kiểm thử trong khi di chuyển ứng dụng dựa trên Khung hiển thị sang Compose.
- Compose và các thư viện khác: Tìm hiểu cách sử dụng các thư viện dựa trên khung hiển thị trong nội dung Compose.
- Cấu trúc Compose: Tìm hiểu cách triển khai mẫu luồng một chiều trong Compose, cách triển khai sự kiện và chủ thể trạng thái, cũng như cách làm việc với
ViewModel
trong Compose.
- Điều hướng: Tìm hiểu cách sử dụng
NavController
để tích hợp thành phần Điều hướng với giao diện người dùng trên Compose.
- Tài nguyên: Tìm hiểu cách làm việc với các tài nguyên của ứng dụng trong mã Compose.
- Hỗ trợ tiếp cận: Tìm hiểu cách giúp giao diện người dùng trên Compose phù hợp với người dùng có các yêu cầu khác nhau về hỗ trợ tiếp cận.
- Kiểm thử: Tìm hiểu về cách kiểm thử mã Compose.
Tài nguyên khác
Đề xuất cho bạn
Nội dung và mã mẫu trên trang này phải tuân thủ các giấy phép như mô tả trong phần Giấy phép nội dung. Java và OpenJDK là nhãn hiệu hoặc nhãn hiệu đã đăng ký của Oracle và/hoặc đơn vị liên kết của Oracle.
Cập nhật lần gần đây nhất: 2025-08-21 UTC.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2025-08-21 UTC."],[],[],null,["Jetpack Compose is the modern toolkit for building native Android UI. Here's\nwhere you'll find the latest information about using Compose.\n\n- [Overview](/develop/ui/compose): See all the resources available to Compose developers.\n- [Tutorial](/develop/ui/compose/tutorial): Get started with Compose, by using it to build a simple UI.\n- [Quick Guides](/quick-guides): **New!** Try out our fast and focused guides, designed to get you to your goal as quickly as possible.\n\nFoundation\n\n- [Thinking in Compose](/develop/ui/compose/mental-model): Learn how Compose's declarative approach is different from the view-based approach you may have used in the past, and how to build a mental model of working with Compose.\n- [Managing state](/develop/ui/compose/state): Learn about setting and using state in your Compose app.\n- [Lifecycle of composables](/develop/ui/compose/lifecycle): Learn about the lifecycle of a composable, and how Compose decides if it needs to be redrawn.\n- [Modifiers](/develop/ui/compose/modifiers): Learn how to use modifiers to augment or decorate your composables.\n- [Side-effects in Compose](/develop/ui/compose/side-effects): Learn the best ways to manage side-effects.\n- [Jetpack Compose Phases](/develop/ui/compose/phases): Learn about the steps Compose goes through to render your UI, and how to use that information to write efficient code\n- [Architectural layering](/develop/ui/compose/layering): Learn about the architectural layers that make up Jetpack Compose, and the core principles that informed its design.\n- [Performance](/develop/ui/compose/performance): Learn how to avoid the common programming pitfalls that can hurt your app's performance.\n- [Semantics in Compose](/develop/ui/compose/semantics): Learn about the Semantics tree, which organizes your UI in a way that can be used by accessibility services and the testing framework.\n- [Locally scoped data with CompositionLocal](/develop/ui/compose/compositionlocal): Learn how to use `CompositionLocal` to pass data through the Composition.\n\nDevelopment environment\n\n- [Android Studio with Compose](/develop/ui/compose/setup): Set up your development environment to use Compose.\n- [Tooling for Compose](/develop/ui/compose/tooling): Learn about Android Studio's new features to support Compose.\n- [Kotlin for Compose](/develop/ui/compose/kotlin): Learn how certain Kotlin-specific idioms work with Compose.\n- [Compare Compose and View metrics](/develop/ui/compose/migrate/compare-metrics): Learn how migrating to Compose can affect your app's APK size and runtime performance.\n- [Bill of Materials](/develop/ui/compose/bom): Manage all your Compose dependencies by specifying only the BOM's version.\n\nDesign\n\n- [Layouts](/develop/ui/compose/layouts): Learn about Compose's native layout components, and how to design your own.\n - [Layout basics](/develop/ui/compose/layouts/basics): Learn about the building blocks for a straightforward app UI.\n - [Material Components and layouts](/develop/ui/compose/components): Learn about Material components and layouts in Compose.\n - [Custom layouts](/develop/ui/compose/layouts/custom): Learn how to take control of your app's layout, and how to design a custom layout of your own.\n - [Support different display sizes](/develop/ui/compose/layouts/adaptive/support-different-display-sizes): Learn how to use Compose to build layouts that adapt to different display sizes, orientations, and form factors.\n - [Alignment lines](/develop/ui/compose/layouts/alignment-lines): Learn how to create custom alignment lines to precisely align and position your UI elements.\n - [Intrinsic measurements](/develop/ui/compose/layouts/intrinsic-measurements): Since Compose only allows you to measure UI elements once per pass, this page explains how to query for information about child elements before measuring them.\n - [ConstraintLayout](/develop/ui/compose/layouts/constraintlayout): Learn how to use `ConstraintLayout` in your Compose UI.\n- [Design Systems](/develop/ui/compose/designsystems): Learn how to implement a design system and give your app a consistent look and feel.\n - [Material Design 3](/develop/ui/compose/designsystems/material3): Learn how to implement Material You with Compose's implementation of [Material Design 3](https://m3.material.io/).\n - [Migrating from Material 2 to Material 3](/develop/ui/compose/designsystems/material2-material3): Learn how to migrate your app from Material Design 2 to Material Design 3 in Compose.\n - [Material Design 2](/develop/ui/compose/designsystems/material): Learn how to customize Compose's implementation of [Material Design 2](https://material.io/) to fit your product's brand.\n - [Custom design systems](/develop/ui/compose/designsystems/custom): Learn how to implement a custom design system in Compose, and how to adapt existing Material Design composables to handle this.\n - [Anatomy of a theme](/develop/ui/compose/designsystems/anatomy): Learn about the lower-level constructs and APIs used by `MaterialTheme` and custom design systems.\n- [Lists and grids](/develop/ui/compose/lists): Learn about some of Compose's options for managing and displaying lists and grids of data.\n- [Text](/develop/ui/compose/text): Learn about Compose's main options for displaying and editing text.\n- [Graphics](/develop/ui/compose/graphics): Learn about Compose's features for building and working with custom graphics.\n- [Animation](/develop/ui/compose/animation/introduction): Learn about Compose's different options for animating your UI elements.\n- [Gestures](/develop/ui/compose/touch-input/pointer-input): Learn how to build a Compose UI that detects and interacts with user gestures.\n- [Handling user interactions](/develop/ui/compose/touch-input/user-interactions/handling-interactions): Learn how Compose abstracts low-level input into higher-level interactions, so you can customize how your components respond to user actions.\n\nAdopting Compose\n\n- [Migrate existing View-based apps](/develop/ui/compose/migrate): Learn how to migrate your existing View-based app to Compose.\n - [Migration strategy](/develop/ui/compose/migrate/strategy): Learn the strategy to safely and incrementally introduce Compose into your codebase.\n - [Interoperability APIs](/develop/ui/compose/migrate/interoperability-apis): Learn about Compose's APIs to help you combine Compose with View-based UI.\n - [Other considerations](/develop/ui/compose/migrate/other-considerations): Learn about other considerations like theming, architecture, and testing while migrating your View-based app to Compose.\n- [Compose and other libraries](/develop/ui/compose/libraries): Learn how to use view-based libraries in your Compose content.\n- [Compose architecture](/develop/ui/compose/architecture): Learn how to implement the unidirectional flow pattern in Compose, how to implement events and state holders, and how to work with `ViewModel` in Compose.\n- [Navigation](/develop/ui/compose/navigation): Learn how to use `NavController` to integrate the Navigation component with your Compose UI.\n - [Navigation for responsive UIs](/guide/topics/large-screens/navigation-for-responsive-uis): Learn how to design your app's navigation so it adapts to different screen sizes, orientations, and form factors.\n- [Resources](/develop/ui/compose/resources): Learn how to work with your app's resources in your Compose code.\n- [Accessibility](/develop/ui/compose/accessibility): Learn how to make your Compose UI suitable for users with different accessibility requirements.\n- [Testing](/develop/ui/compose/testing): Learn about testing your Compose code.\n - [Testing cheat sheet](/develop/ui/compose/testing-cheatsheet): A quick reference of useful Compose testing APIs.\n\nAdditional resources\n\n- [Get setup](/develop/ui/compose/setup)\n- [Curated learning pathway](/courses/pathways/compose)\n- [Compose API guidelines](https://android.googlesource.com/platform/frameworks/support/+/androidx-main/compose/docs/compose-api-guidelines.md)\n- [API reference](/reference/kotlin/androidx/compose)\n- [Codelabs](https://goo.gle/compose-codelabs)\n- [Sample apps](https://github.com/android/compose-samples)\n- [Videos](https://www.youtube.com/user/androiddevelopers/search?query=%23jetpackcompose)\n\nRecommended for you\n\n- Note: link text is displayed when JavaScript is off\n- [Locally scoped data with CompositionLocal](/develop/ui/compose/compositionlocal)\n- [Other considerations](/develop/ui/compose/migrate/other-considerations)\n- [Anatomy of a theme in Compose](/develop/ui/compose/designsystems/anatomy)"]]