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, vốn thường được thực hiện thông qua đối tượng sửa đổi. Mô hình 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 kiểu 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ế cho đố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 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á 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à mang tính 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: Style API cho phép tạo ảnh động tích hợp sẵn 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 việc kết hợp lại xảy ra với phương pháp animateColorAsState hiện tại.
  • Hợp lý hoá 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, 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 thành phần kết hợp lại hơn, giúp cải thiện hiệu suất so với đối tượng 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 Thành phần.
  • Bộ API chuẩn hoá hơn: Bộ thuộc tính kiểu cách 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

Ý tưởng Mô tả
Style Một giao diện xác định hình thức của một phần tử trên giao diện người dùng, với một bộ tiêu chuẩn các thuộc tính có thể tạo kiểu. Giao diện này tương tự như kiểu CSS và có thể tuỳ chỉnh trên thiết 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ẽ dẫn đến một giá trị cuối cùng duy nhất.
StyleScope Phạm vi 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 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 tổng quan 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 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" }
Tiếp
Kiến thức cơ bản về kiểu