Các hạn chế và thứ tự của đối tượng sửa đổi

Trong Compose, bạn có thể liên kết nhiều đối tượng sửa đổi với nhau để thay đổi giao diện của một thành phần kết hợp. Các chuỗi đối tượng sửa đổi này có thể ảnh hưởng đến các quy tắc ràng buộc được truyền đến các thành phần kết hợp, xác định giới hạn chiều rộng và chiều cao.

Trang này mô tả cách các đối tượng sửa đổi theo chuỗi ảnh hưởng đến các quy tắc ràng buộc, từ đó ảnh hưởng đến việc đo lường và đặt các thành phần kết hợp.

Đối tượng sửa đổi trong cây giao diện người dùng

Để hiểu cách các đối tượng sửa đổi ảnh hưởng lẫn nhau, bạn nên hình dung cách chúng xuất hiện trong cây giao diện người dùng, được tạo trong giai đoạn kết hợp. Để biết thêm thông tin, hãy xem phần Cấu trúc.

Trong cây giao diện người dùng, bạn có thể hình dung đối tượng sửa đổi dưới dạng các nút trình bao bọc cho các nút bố cục:

Hình 1. Đối tượng sửa đổi bao bọc các nút bố cục trong cây giao diện người dùng.

Việc thêm nhiều đối tượng sửa đổi vào một composable sẽ tạo ra một chuỗi đối tượng sửa đổi. Khi bạn liên kết nhiều đối tượng sửa đổi, mỗi nút đối tượng sửa đổi sẽ gói phần còn lại của chuỗi và nút bố cục bên trong. Ví dụ: khi bạn liên kết một đối tượng sửa đổi clip và một đối tượng sửa đổi size, nút đối tượng sửa đổi clip sẽ gói nút đối tượng sửa đổi size, sau đó gói nút bố cục Image.

Trong giai đoạn bố cục, thuật toán duyệt cây vẫn giữ nguyên, nhưng mỗi nút đối tượng sửa đổi cũng được truy cập. Bằng cách này, đối tượng sửa đổi có thể thay đổi các yêu cầu về kích thước và vị trí của đối tượng sửa đổi hoặc nút bố cục mà đối tượng đó gói.

Như trong Hình 2, việc triển khai các thành phần kết hợp Image và Text bao gồm một chuỗi đối tượng sửa đổi gói một nút bố cục duy nhất.

Cách triển khai Row và Column là các nút bố cục mô tả cách bố trí các thành phần con.

Hình 2. Cấu trúc cây giống như trong Hình 1, nhưng với các thành phần kết hợp trong cây giao diện người dùng được hình ảnh hoá dưới dạng chuỗi đối tượng sửa đổi.

Tóm tắt:

• Đối tượng sửa đổi gói một đối tượng sửa đổi hoặc nút bố cục.
• Các nút bố cục có thể bố trí nhiều nút con.

Các phần sau đây mô tả cách sử dụng mô hình tư duy này để suy luận về chuỗi đối tượng sửa đổi và cách chuỗi này ảnh hưởng đến kích thước của các thành phần kết hợp.

Các quy tắc ràng buộc trong giai đoạn bố cục

Giai đoạn bố cục tuân theo thuật toán gồm ba bước để tìm chiều rộng, chiều cao và toạ độ x, y của mỗi nút bố cục:

1. Đo lường phần tử con: Một nút đo lường các phần tử con của nó (nếu có).
2. Quyết định kích thước riêng: Dựa trên các phép đo đó, một nút sẽ quyết định kích thước của riêng mình.
3. Đặt vị trí cho thành phần con: Mỗi nút con được đặt tương ứng với vị trí của nút đó.

Constraints giúp tìm kích thước phù hợp cho các nút trong hai bước đầu tiên của thuật toán. Các quy tắc ràng buộc xác định giới hạn tối thiểu và tối đa cho chiều rộng và chiều cao của một nút. Khi nút quyết định kích thước, kích thước đo được của nút phải nằm trong phạm vi kích thước này.

Các loại giới hạn

Một quy tắc ràng buộc có thể là một trong những quy tắc sau:

• Có giới hạn: Nút có chiều rộng và chiều cao tối đa và tối thiểu.

Hình 3. Các quy tắc ràng buộc có giới hạn.

• Không giới hạn: Nút không bị ràng buộc với bất kỳ kích thước nào. Giới hạn chiều rộng và chiều cao tối đa được đặt thành vô cực.

Hình 4. Các quy tắc ràng buộc không giới hạn.

• Chính xác: Nút được yêu cầu tuân theo yêu cầu về kích thước chính xác. Giới hạn tối thiểu và tối đa được đặt thành cùng một giá trị.

Hình 5. Các quy tắc ràng buộc chính xác.

• Kết hợp: Nút tuân theo sự kết hợp của các loại ràng buộc trước đó. Ví dụ: một quy tắc ràng buộc có thể giới hạn chiều rộng trong khi cho phép chiều cao tối đa không giới hạn hoặc đặt chiều rộng chính xác nhưng cung cấp chiều cao có giới hạn.

Hình 6. Kết hợp các quy tắc ràng buộc có giới hạn và không giới hạn cũng như chiều rộng và chiều cao chính xác.

Phần tiếp theo mô tả cách các quy tắc ràng buộc này được truyền từ thành phần mẹ sang thành phần con.

Cách truyền các quy tắc ràng buộc từ thành phần mẹ sang thành phần con

Trong bước đầu tiên của thuật toán được mô tả trong phần Quy tắc ràng buộc trong giai đoạn bố cục, các quy tắc ràng buộc được truyền từ thành phần mẹ đến thành phần con trong cây giao diện người dùng.

Khi một nút mẹ đo lường các nút con, nút mẹ sẽ cung cấp các quy tắc ràng buộc này cho từng nút con để cho biết kích thước tối đa hoặc tối thiểu mà nút con được phép có. Sau đó, khi quyết định kích thước riêng, phần tử này cũng tuân thủ các quy tắc ràng buộc do phần tử mẹ truyền vào.

Nhìn chung, thuật toán này hoạt động như sau:

1. Để quyết định kích thước mà nút gốc thực sự muốn chiếm, nút gốc trong cây giao diện người dùng sẽ đo lường các thành phần con và chuyển tiếp cùng một quy tắc ràng buộc cho thành phần con đầu tiên.
2. Nếu thành phần con là một đối tượng sửa đổi không ảnh hưởng đến việc đo lường, thì thành phần này sẽ chuyển tiếp các quy tắc ràng buộc đến đối tượng sửa đổi tiếp theo. Các quy tắc ràng buộc được truyền xuống chuỗi đối tượng sửa đổi như hiện tại, trừ phi đạt đến một đối tượng sửa đổi có tác động đến việc đo lường. Sau đó, các quy tắc ràng buộc sẽ được đổi kích thước cho phù hợp.
3. Khi đạt đến một nút không có bất kỳ nút con cháu nào (gọi là "nút lá"), nút này sẽ quyết định kích thước dựa trên các giới hạn được truyền vào và trả về kích thước đã phân giải này cho nút mẹ.
4. Thành phần mẹ điều chỉnh các quy tắc ràng buộc dựa trên số đo của thành phần con này và gọi thành phần con tiếp theo bằng các quy tắc ràng buộc đã điều chỉnh này.
5. Sau khi đo lường tất cả thành phần con của một thành phần mẹ, nút mẹ sẽ quyết định kích thước của chính nó và thông báo kích thước đó cho nút mẹ của nó.
6. Bằng cách này, toàn bộ cây sẽ được duyệt qua theo chiều sâu trước. Cuối cùng, tất cả các nút đều đã quyết định kích thước và bước đo lường đã hoàn tất.

Để biết ví dụ chi tiết, hãy xem video Các hạn chế và thứ tự của đối tượng sửa đổi.

Đối tượng sửa đổi ảnh hưởng đến các quy tắc ràng buộc

Trong phần trước, bạn đã tìm hiểu rằng một số đối tượng sửa đổi có thể ảnh hưởng đến kích thước ràng buộc. Các phần sau đây mô tả các đối tượng sửa đổi cụ thể ảnh hưởng đến các quy tắc ràng buộc.

Đối tượng sửa đổi size

Công cụ sửa đổi size khai báo kích thước ưu tiên của nội dung.

Ví dụ: cây giao diện người dùng sau đây sẽ được kết xuất trong vùng chứa 300dp x 200dp. Các quy tắc ràng buộc được giới hạn, cho phép chiều rộng từ 100dp đến 300dp và chiều cao từ 100dp đến 200dp:

Hình 7. Các quy tắc ràng buộc có giới hạn trong cây giao diện người dùng và cách biểu thị của cây đó trong một vùng chứa.

Đối tượng sửa đổi size điều chỉnh các quy tắc ràng buộc sắp tới cho phù hợp với giá trị được truyền đến đối tượng đó. Trong ví dụ này, giá trị là 150dp:

Hình 8. Đối tượng sửa đổi size điều chỉnh các quy tắc ràng buộc thành 150dp.

Nếu chiều rộng và chiều cao nhỏ hơn giới hạn ràng buộc nhỏ nhất hoặc lớn hơn giới hạn ràng buộc lớn nhất, thì đối tượng sửa đổi sẽ khớp với các ràng buộc được truyền gần nhất có thể trong khi vẫn tuân thủ các ràng buộc được truyền vào:

Hình 9. Đối tượng sửa đổi size tuân thủ chặt chẽ nhất có thể quy tắc ràng buộc đã truyền.

Xin lưu ý rằng việc liên kết nhiều đối tượng sửa đổi size sẽ không hoạt động. Đối tượng sửa đổi size đầu tiên đặt cả quy tắc ràng buộc tối thiểu và tối đa thành một giá trị cố định. Ngay cả khi đối tượng sửa đổi kích thước thứ hai yêu cầu kích thước nhỏ hơn hoặc lớn hơn, thì đối tượng này vẫn cần tuân thủ các giới hạn chính xác được truyền vào, vì vậy, đối tượng này sẽ không ghi đè các giá trị đó:

Hình 10. Một chuỗi gồm hai đối tượng sửa đổi size, trong đó giá trị thứ hai được truyền vào (50dp) không ghi đè giá trị đầu tiên (100dp).

Đối tượng sửa đổi requiredSize

Sử dụng đối tượng sửa đổi requiredSize thay vì size nếu bạn cần nút của mình ghi đè các quy tắc ràng buộc sắp tới. Đối tượng sửa đổi requiredSize thay thế các quy tắc ràng buộc sắp tới và truyền kích thước mà bạn chỉ định dưới dạng giới hạn chính xác.

Khi kích thước được chuyển ngược lên cây, nút con sẽ được căn giữa trong không gian có sẵn:

Hình 11. Đối tượng sửa đổi requiredSize ghi đè các quy tắc ràng buộc đến từ đối tượng sửa đổi size.

Đối tượng sửa đổi width và height

Đối tượng sửa đổi size điều chỉnh cả chiều rộng và chiều cao của các quy tắc ràng buộc. Với đối tượng sửa đổi width, bạn có thể đặt chiều rộng cố định nhưng không đặt chiều cao. Tương tự, với đối tượng sửa đổi height, bạn có thể đặt chiều cao cố định nhưng không xác định chiều rộng:

Hình 12. Đối tượng sửa đổi width và đối tượng sửa đổi height lần lượt đặt chiều rộng và chiều cao cố định.

Đối tượng sửa đổi sizeIn

Đối tượng sửa đổi sizeIn cho phép bạn đặt các quy tắc ràng buộc tối thiểu và tối đa chính xác cho chiều rộng và chiều cao. Sử dụng đối tượng sửa đổi sizeIn nếu bạn cần kiểm soát chi tiết các quy tắc ràng buộc.

Hình 13. Đối tượng sửa đổi sizeIn có đặt minWidth, maxWidth, minHeight và maxHeight.

Ví dụ

Phần này trình bày và giải thích kết quả của một số đoạn mã có đối tượng sửa đổi theo chuỗi.

Image(
    painterResource(R.drawable.hero),
    contentDescription = null,
    Modifier
        .fillMaxSize()
        .size(50.dp)
)
ConstraintsModifiersSnippets.kt

Đoạn mã này tạo ra kết quả sau:

Hình 14. Image lấp đầy kích thước tối đa do chuỗi đối tượng sửa đổi.

• Đối tượng sửa đổi fillMaxSize thay đổi các quy tắc ràng buộc để đặt cả chiều rộng và chiều cao tối thiểu thành giá trị tối đa — chiều rộng 300dp và chiều cao 200dp.
• Mặc dù đối tượng sửa đổi size muốn sử dụng kích thước 50dp, nhưng đối tượng này vẫn cần tuân thủ các quy tắc ràng buộc tối thiểu sắp tới. Vì vậy, đối tượng sửa đổi size cũng sẽ xuất ra các giới hạn ràng buộc chính xác của 300 theo 200, bỏ qua giá trị được cung cấp trong đối tượng sửa đổi size một cách hiệu quả.
• Image tuân theo các giới hạn này và báo cáo kích thước 300 x 200, được truyền lên toàn bộ cây.

Image(
    painterResource(R.drawable.hero),
    contentDescription = null,
    Modifier
        .fillMaxSize()
        .wrapContentSize()
        .size(50.dp)
)
ConstraintsModifiersSnippets.kt

Đoạn mã này tạo ra kết quả sau:

Hình 15. Image được căn giữa và có kích thước là 50dp.

• Đối tượng sửa đổi fillMaxSize điều chỉnh các quy tắc ràng buộc để đặt cả chiều rộng và chiều cao tối thiểu thành giá trị tối đa — 300dp theo chiều rộng và 200dp theo chiều cao.
• Đối tượng sửa đổi wrapContentSize đặt lại các giới hạn tối thiểu. Vì vậy, trong khi fillMaxSize dẫn đến các quy tắc ràng buộc cố định, thì wrapContentSize đặt lại về các quy tắc ràng buộc có giới hạn. Nút sau đây hiện có thể chiếm toàn bộ không gian một lần nữa hoặc nhỏ hơn toàn bộ không gian.
• Đối tượng sửa đổi size đặt các quy tắc ràng buộc cho giới hạn tối thiểu và tối đa của 50.
• Image phân giải thành kích thước 50 x 50 và đối tượng sửa đổi size sẽ chuyển tiếp kích thước đó.
• Đối tượng sửa đổi wrapContentSize có một thuộc tính đặc biệt. Hàm này lấy thành phần con và đặt thành phần con đó vào giữa các giới hạn tối thiểu có sẵn được truyền đến hàm. Do đó, kích thước mà thành phần này truyền đạt đến thành phần mẹ sẽ bằng với giới hạn tối thiểu được truyền vào thành phần này.

Bằng cách kết hợp chỉ ba đối tượng sửa đổi, bạn có thể xác định kích thước cho thành phần kết hợp và căn giữa thành phần đó trong thành phần mẹ.

Image(
    painterResource(R.drawable.hero),
    contentDescription = null,
    Modifier
        .clip(CircleShape)
        .padding(10.dp)
        .size(100.dp)
)
ConstraintsModifiersSnippets.kt

Đoạn mã này tạo ra kết quả sau:

Hình 16. Hình dạng bị cắt không chính xác do thứ tự của đối tượng sửa đổi.

• Đối tượng sửa đổi clip không thay đổi các quy tắc ràng buộc.
• Đối tượng sửa đổi padding làm giảm các ràng buộc tối đa.
• Đối tượng sửa đổi size đặt tất cả các quy tắc ràng buộc thành 100dp.
• Image tuân thủ các quy tắc ràng buộc đó và báo cáo kích thước 100dp x 100dp.
• Đối tượng sửa đổi padding thêm 10dp vào tất cả các cạnh của kích thước được báo cáo bởi Image, vì vậy bố cục có khoảng đệm báo cáo chiều rộng và chiều cao là 120dp.
• Bây giờ, trong giai đoạn vẽ, đối tượng sửa đổi clip sẽ hoạt động trên một canvas có kích thước 120dp x 120dp. Thao tác này sẽ tạo một mặt nạ hình tròn có kích thước đó.
• Sau đó, đối tượng sửa đổi padding sẽ lồng nội dung của nó vào 10dp ở tất cả các bên, giúp giảm kích thước canvas cho Image xuống 100dp x 100dp.
• Image được vẽ trong canvas nhỏ hơn đó. Hình ảnh được cắt dựa trên vòng tròn ban đầu của 120dp, nên kết quả đầu ra không phải là hình tròn.