Kiểu trong Compose

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 thường được thực hiện thông qua các đối tượng sửa đổi. Công cụ này được thiết kế để giúp bạn 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 nhiều 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. Ngay cả khi 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ế cho các đối tượng sửa đổi, nhưng chúng đóng vai trò thay thế cho 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 Styles thay vì các 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 tạo kiểu dựa trên trạng thái: API này cung cấp một cách thức ngắn gọn và khai báo hơn để xác định các kiểu thay đổi dựa trên nhiều trạng thái (ví dụ: di chuột, 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 đối tượng sửa đổi.
  • Cải thiện hiệu ứng chuyển đổi trạng thái động: Style API cho phép tạo sẵn hiệu ứng động cho các thuộc tính kiểu giữa các trạng thái với đặc điểm hiệu suất lý tưởng, tránh các thành phần kết hợp lại xảy ra với phương pháp animateColorAsState hiện tại.
  • Đơn giản hoá các API thành phần: Bằng cách giới thiệu một tham số Style 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.
  • Ít lần kết hợp lại hơn, dẫn đến hiệu suất tốt hơn so với đối tượng sửa đổi: Các kiểu chạy trong giai đoạn Vẽ và Bố cục của Compose, bỏ qua giai đoạn Thành phần.
  • Bộ API được chuẩn hoá hơn: Một bộ thuộc tính kiểu chuẩn giúp mọi thành phần có thể tạo kiểu.

Các khái niệm chính

Ý tưởng 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 bộ thuộc tính có thể tạo kiểu tiêu chuẩn. Thành phầ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 sẽ ghi đè lẫn nhau; việc đặt một thuộc tính hai lần (ví dụ: background()) sẽ cho ra một giá trị cuối cùng duy nhất.
StyleScope Phạm vi đối tượng nhận cho hàm applyStyle() trong một Kiểu. Thành phần này cung cấp các hàm để xác định thuộc tính trực quan (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 này trong dự án của riêng bạn, hãy nhớ 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 của ảnh chụp nhanh vào danh sách các kho lưu trữ cần sử dụng.

Trong libs.versions.toml hoặc ngay trong tệp app/build.gradle.kts, hãy đặt phiên bản Compose thành 1.11.0-alpha06:

compose = "1.11.0-alpha06"

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" }