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

Trong Compose, bạn có thể xâu chuỗi 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 điều kiện 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 được liên kết ảnh hưởng đến các ràng buộc và do đó, ả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ây này được tạo trong giai đoạn kết hợp. Để biết thêm thông tin, hãy xem phần Thành phần.

Trong cây giao diện người dùng, bạn có thể hình dung các đố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:

Việc thêm nhiều đối tượng sửa đổi vào một thành phần kết hợp 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ẽ bao bọc phần còn lại của chuỗi và nút bố cục trong đó. Ví dụ: khi bạn liên kết một clip và một đối tượng sửa đổi size, nút đối tượng sửa đổi clip sẽ bao bọc nút đối tượng sửa đổi size, sau đó bao bọc 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 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 đó bao bọc.

Như minh hoạ 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 các đối tượng sửa đổi bao bọc một nút bố cục duy nhất. Việc triển khai Row và Column chỉ đơn giản là các nút bố cục mô tả cách bố trí các thành phần con.

Tóm tắt:

• Đối tượng sửa đổi bao bọc một đối tượng sửa đổi hoặc nút bố cục duy nhất.
• 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ề việc tạo 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 ràng buộc trong giai đoạn bố cục

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

1. Đo lường các 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 những phép đo đó, một nút sẽ quyết định kích thước riêng của nó.
3. Đặt các nút 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 2 bước đầu tiên của thuật toán. Các điều kiện ràng buộc xác định ranh giới 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 hạn chế

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

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

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

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

• Kết hợp: Nút tuân theo sự kết hợp của các loại ràng buộc nêu trên. Ví dụ: một 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.

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

Cách các điều kiện ràng buộc được truyền 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 Các 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ẹ xuống thành phần con trong cây giao diện người dùng.

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

Nhìn chung, thuật toán này hoạt động theo cách sau:

1. Để quyết định kích thước mà nó 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 nút con cháu của nó và chuyển tiếp các ràng buộc tương tự đến nút con cháu đầ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 hoạt động đo lường, thì đối tượng sửa đổi đó sẽ chuyển các ràng buộc đến đối tượng sửa đổi tiếp theo. Cá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 ảnh hưởng đến hoạt động đo lường. Sau đó, các điều kiện ràng buộc sẽ được điều chỉnh kích thước cho phù hợp.
3. Sau khi đạt đến một nút không có nút con nào (được gọi là "nút lá"), nút đó sẽ quyết định kích thước dựa trên các điều kiện ràng buộc đã được truyền vào và trả kích thước đã phân giải này về 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 các phép đ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ả các phần tử con của một phần tử mẹ, nút mẹ sẽ quyết định kích thước của riêng nó và truyền thông tin đó đến phần tử mẹ của chính nó.
6. Bằng cách này, toàn bộ cây sẽ được duyệt theo chiều sâu. Cuối cùng, tất cả các nút đều đã quyết định kích thước của mình và bước đo lường đã hoàn tất.

Để xem 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.

Các đối tượng sửa đổi ảnh hưởng đến cá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ả những đối tượng sửa đổi cụ thể ảnh hưởng đến các điều kiện 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 một vùng chứa 300dp bằng 200dp. Các ràng buộc được giới hạn, cho phép chiều rộng trong khoảng từ 100dp đến 300dp và chiều cao trong khoảng từ 100dp đến 200dp:

Đối tượng sửa đổi size điều chỉnh các ràng buộc đến để khớp với giá trị được truyền đến đối tượng sửa đổi đó. Trong ví dụ này, giá trị là 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 đã truyền gần nhất có thể trong khi vẫn tuân thủ các ràng buộc đã truyền trong:

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 bộ 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ì bộ sửa đổi này vẫn cần tuân thủ các ranh giới chính xác được truyền vào, vì vậy, bộ sửa đổi này sẽ không ghi đè các giá trị đó:

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

Hãy 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 hạn chế đến. Đối tượng sửa đổi requiredSize sẽ thay thế các quy tắc ràng buộc sắp diễn ra và truyền kích thước mà bạn chỉ định làm ranh giới chính xác.

Khi kích thước được truyền ngược lên cây, nút con sẽ được đặt ở giữa khoảng trống có sẵn:

Đố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 điều kiện 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 quyết định 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 quyết định chiều rộng:

Đố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 chặt chẽ các hạn chế.

Ví dụ

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

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:

• Đối tượng sửa đổi fillMaxSize sẽ thay đổi các điều kiện 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 về chiều rộng và 200dp về chiều cao.
• Mặc dù đối tượng sửa đổi size muốn sử dụng kích thước 50dp, nhưng vẫn cần tuân thủ các ràng buộc tối thiểu đến. Vì vậy, đối tượng sửa đổi size cũng sẽ xuất ra ranh giới 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 ranh giới này và báo cáo kích thước 300 theo 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:

• Đối tượng sửa đổi fillMaxSize điều chỉnh các điều kiện 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 về chiều rộng và 200dp về chiều cao.
• Công cụ sửa đổi wrapContentSize sẽ đặt lại các giới hạn tối thiểu. Vì vậy, trong khi fillMaxSize dẫn đến các điều kiện ràng buộc cố định, thì wrapContentSize sẽ đặt lại điều kiện ràng buộc đó thành điều kiện ràng buộc có giới hạn. Giờ đây, nút sau có thể chiếm toàn bộ không gian hoặc nhỏ hơn toàn bộ không gian.
• Đối tượng sửa đổi size đặt các ràng buộc thành 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 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. Thành phần này lấy thành phần con và đặt thành phần đó vào giữa các ranh giới tối thiểu có sẵn đã được truyền cho thành phần này. Do đó, kích thước mà thành phần này truyền đạt cho thành phần mẹ sẽ bằng với ranh giới tối thiểu được truyền vào thành phần đó.

Bằng cách kết hợp chỉ 3 đố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 phần tử gốc.

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:

• Đối tượng sửa đổi clip không thay đổi các ràng buộc.
  • Đối tượng sửa đổi padding sẽ giảm các ràng buộc tối đa.
  • Đối tượng sửa đổi size đặt tất cả các điều kiện 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 là 100 x 100dp.
  • Đối tượng sửa đổi padding thêm 10dp vào tất cả các kích thước, do đó, đối tượng này sẽ tăng chiều rộng và chiều cao được báo cáo thêm 20dp.
  • Giờ đây, 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 120 x 120dp. Vì vậy, 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ẽ chèn nội dung của nó theo 10dp trên tất cả các kích thước, do đó, đối tượng này sẽ giảm kích thước canvas xuống 100 theo 100dp.
  • Image được vẽ trong canvas đó. Hình ảnh được cắt dựa trên vòng tròn ban đầu của 120dp, nên đầu ra là một kết quả không tròn.