Những việc nên làm và không nên làm với Kiểu

Trang này mô tả các phương pháp hay nhất để làm việc với các kiểu giúp đạt được tính nhất quán trong cơ sở mã của bạn, cũng như các nguyên tắc mà chúng tôi đã tuân theo trong khi thiết kế các API.

Việc nên làm

Hãy áp dụng các phương pháp hay nhất sau đây:

Nên: Sử dụng Kiểu cho hình ảnh và công cụ sửa đổi cho hành vi

Sử dụng Styles API cho cấu hình trực quan (nền, khoảng đệm, đường viền) và dành riêng các đối tượng sửa đổi cho những hành vi như logic nhấp, phát hiện cử chỉ hoặc khả năng hỗ trợ tiếp cận.

Nên: Hiển thị các thông số Kiểu trong hệ thống thiết kế

Đối với các thành phần hệ thống thiết kế tuỳ chỉnh của riêng bạn, bạn nên hiển thị một đối tượng Style sau tham số đối tượng sửa đổi.

@Composable
fun GradientButton(
    modifier: Modifier = Modifier,
    // ✅ DO: for design system components, expose a style modifier to consumers to be able to customize the components
    style: Style = Style
) {
    // Consume the style
}
DosDonts.kt

Nên: Thay thế các tham số dựa trên hình ảnh bằng một Kiểu

Hãy cân nhắc việc thay thế các tham số trên thành phần kết hợp bằng một tham số Style duy nhất. Ví dụ:

// Before
@Composable
fun OldButton(background: Color, fontColor: Color) {
}

// After
// ✅ DO: Replace visual-based parameters with a style that includes same properties
@Composable
fun NewButton(style: Style = Style) {
}
DosDonts.kt

Nên: Ưu tiên các kiểu cho ảnh động

Sử dụng khối animate tích hợp sẵn để tạo kiểu dựa trên trạng thái bằng ảnh động nhằm tăng hiệu suất so với các đối tượng sửa đổi.

Nên: Tận dụng tính năng "Lần ghi cuối cùng sẽ thắng"

Tận dụng việc các thuộc tính style sẽ ghi đè thay vì xếp chồng. Sử dụng thuộc tính này để ghi đè đường viền hoặc nền mặc định của thành phần mà không cần nhiều tham số.

Những điều không nên làm

Bạn không nên sử dụng các mẫu sau:

Không nên: Sử dụng Kiểu cho logic tương tác

Đừng cố gắng xử lý onClick hoặc tính năng phát hiện cử chỉ trong một kiểu. Kiểu bị giới hạn ở các cấu hình trực quan dựa trên trạng thái, vì vậy, kiểu không được xử lý logic nghiệp vụ; thay vào đó, kiểu chỉ được có một hình ảnh khác dựa trên trạng thái.

Không nên: Cung cấp kiểu mặc định dưới dạng tham số mặc định

Bạn phải luôn khai báo các tham số kiểu bằng cách sử dụng style: Style = Style:

@Composable
fun BadButton(
    modifier: Modifier = Modifier,
    // ❌ DON'T set a default style here as a parameter
    style: Style = Style { background(Color.Red) }
) {
}
DosDonts.kt

Để thêm một tham số "mặc định", hãy hợp nhất kiểu tham số đến với kiểu mặc định đã xác định:

@Composable
fun GoodButton(
    modifier: Modifier = Modifier,
    // ✅ Do: always pass it as a Style, do not pass other defaults
    style: Style = Style
) {
    // ...
    val defaultStyle = Style { background(Color.Red) }
    // ✅ Do Combine defaults inside with incoming parameter
    Box(modifier = modifier.styleable(styleState, defaultStyle, style)) {
      // your logic
    }
}
DosDonts.kt

Không: Cung cấp các tham số kiểu cho các thành phần kết hợp dựa trên bố cục

Mặc dù bạn có thể cung cấp một kiểu cho bất kỳ thành phần kết hợp nào, nhưng các thành phần kết hợp dựa trên bố cục hoặc thành phần kết hợp cấp màn hình sẽ không chấp nhận kiểu – người dùng không biết rõ kiểu sẽ làm gì ở cấp độ này. Kiểu được thiết kế cho các thành phần, không nhất thiết là bố cục.