Style API là một mô hình mới để tuỳ chỉnh hoặc "tạo kiểu" cho các phần tử và thành phần trong Jetpack Compose. Trước đây, việc này được thực hiện thông qua công cụ sửa đổi. Mô hình này được thiết kế để mở ra khả năng tuỳ chỉnh sâu hơn và dễ dàng hơn.
Styles API cải thiện tính linh hoạt trên các hệ số hình dạng, mang lại hiệu suất tốt hơn và giúp bạn dễ dàng tạo hệ thống thiết kế tuỳ chỉnh hơn. Ngay cả khi bạn không cần các thành phần tuỳ chỉnh, Styles API vẫn mang lại nhiều lợi ích cho hệ thống thiết kế của bạn.
Một điểm khác biệt quan trọng là Kiểu không thay thế công cụ sửa đổi, nhưng chúng đóng vai trò thay thế các tham số tạo kiểu, chẳng hạn như khoảng đệm và màu sắc. Bạn nên chuyển sang sử dụng Kiểu thay vì tham số để tăng tính linh hoạt và hiệu suất.
Lợi ích của Kiểu
- Đơn giản hoá việc định kiểu dựa trên trạng thái: API này cung cấp một cách ngắn gọn và khai báo hơn để xác định các kiểu thay đổi dựa trên các trạng thái khác nhau (ví dụ: di chuột qua, lấy tiêu điểm, nhấn), giúp giảm đáng kể mã nguyên mẫu so với hệ thống modifier.
- Cải thiện hiệu ứng chuyển đổi trạng thái động: Style API cho phép tạo hiệu ứng động tích hợp cho các thuộc tính kiểu giữa các trạng thái với các đặc điểm hiệu suất lý tưởng, tránh việc kết hợp lại xảy ra với phương pháp
animateColorAsStatehiện tại. - Hợp lý hoá các API thành phần: Bằng cách giới thiệu một tham số Kiểu duy nhất để tuỳ chỉnh, các API thành phần được đơn giản hoá đáng kể và mang lại tính linh hoạt cao hơn.
- Giảm số lần kết hợp lại, giúp cải thiện hiệu suất so với công cụ sửa đổi: Kiểu chạy trong các giai đoạn Vẽ và Bố cục của Compose, bỏ qua giai đoạn Kết hợp.
- Bộ API được tiêu chuẩn hoá hơn: Một bộ thuộc tính tạo kiểu tiêu chuẩn giúp mọi thành phần đều có thể tạo kiểu.
Các khái niệm chính
| Khái niệm | Mô tả |
|---|---|
Style |
Một giao diện xác định giao diện của một phần tử trên giao diện người dùng, với một tập hợp các thuộc tính có thể tạo kiểu tiêu chuẩn. Giao diện này tương tự như kiểu CSS và có thể được tuỳ chỉnh cục bộ hoặc thông qua một giao diện. Các kiểu ghi đè lẫn nhau; việc đặt một thuộc tính hai lần (ví dụ: background()) sẽ tạo ra một giá trị cuối cùng duy nhất. |
StyleScope |
Phạm vi của trình nhận cho hàm applyStyle() trong một Kiểu. Phạm vi này cung cấp các hàm để xác định thuộc tính hình ảnh (khoảng đệm, nền, đường viền, v.v.) và truy cập vào StyleState hiện tại. |
StyleState |
Cung cấp trạng thái (ví dụ: isEnabled, isPressed, isChecked, trạng thái tuỳ chỉnh) mà bạn có thể sử dụng trong một Kiểu để xác định kiểu có điều kiện. |
Bắt đầu: Thêm phần phụ thuộc
Để sử dụng các API trong dự án của riêng bạn, hãy đảm bảo bạn đang sử dụng bản phát hành alpha mới nhất của nền tảng Jetpack Compose. Trong tệp settings.gradle.kts, hãy thêm kho lưu trữ maven ảnh chụp nhanh vào danh sách kho lưu trữ cần sử dụng.
Trong libs.versions.toml hoặc trực tiếp trong tệp app/build.gradle.kts, hãy đặt phiên bản của Compose thành 1.12.0-alpha03:
compose = "1.12.0-alpha03"
androidx-compose-runtime = { group = "androidx.compose.runtime", name = "runtime", version.ref = "compose" }
androidx-compose-ui = { group = "androidx.compose.ui", name = "ui", version.ref = "compose" }
androidx-compose-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics", version.ref = "compose" }
androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling", version.ref = "compose" }
androidx-compose-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview", version.ref = "compose" }
androidx-compose-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest", version.ref = "compose" }
androidx-compose-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4", version.ref = "compose" }
androidx-compose-foundation = { group = "androidx.compose.foundation", name = "foundation", version.ref = "compose" }