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 thành 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à vị trí của 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 công cụ 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 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 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 thành phần kết hợp sẽ tạo ra một chuỗi đối tượng sửa đổi. Thời gian 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 tạo chuỗi đối tượng sửa đổi clip và 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 đố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 sửa đổi 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 đối tượng sửa đổi bao bọc một nút bố cục duy nhất. Chiến lược phát hành đĩa đơn 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í con cái họ.

Hình 2. Cấu trúc cây giống như trong Hình 1, nhưng các thành phần kết hợp trong cây giao diện người dùng được hiển thị 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 để giải thích về tạo chuỗi đối tượng sửa đổi và cách nó ảnh hưởng đến kích thước của các thành phần kết hợp.

Các hạn chế trong giai đoạn bố cục

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

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

Constraints giúp tìm kích thước phù hợp cho các nút trong 2 nút đầu tiên các bước của thuật toán. Các điều kiện 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 được đo của nút phải nằm trong phạm vi kích thước này.

Các loại quy tắc ràng buộc

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 bị ràng buộc: Nút không bị ràng buộc vào 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. Quy tắc ràng buộc không giới hạn.

• Chính xác: Nút phải tuân theo một 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 này tuân theo sự kết hợp của các loại quy tắc ràng buộc ở trên. 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 điều kiện ràng buộc giới hạn và không giới hạn cũng như chiều rộng chính xác và chiều cao.

Phần tiếp theo mô tả cách truyền những điều kiện ràng buộc này từ mẹ đến con.

Cách truyền các quy tắc ràng buộc từ phần tử mẹ sang phần tử 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 bố cục pha, các điều kiện ràng buộc được truyền từ phần tử mẹ sang phần tử 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ó sẽ cung cấp các điều kiện ràng buộc này cho mỗi nút để trẻ biết được trẻ được phép lớn hay nhỏ. Sau đó, khi quyết định kích thước của chính nó, nó cũng tuân thủ những ràng buộc được truyền vào bởi bố mẹ của chính nó.

Ở cấp độ cao, thuật toán 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 đo lường các nút con và chuyển tiếp các quy tắc ràng buộc tương tự đến nút 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 hoạt động đo lường, thì đối tượng 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 điều kiện ràng buộc được truyền xuống đối tượng sửa đổi chuỗi giữ nguyên, trừ phi đạt được công cụ 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 kích thước cho phù hợp.
3. Khi đạt đến một nút không có nút con nào (gọi là "nút lá"), nút này sẽ quyết định kích thước của mình dựa trên các điều kiện ràng buộc đã truyền vào và trả về kích thước đã phân giải này cho nút mẹ.
4. Phần tử mẹ điều chỉnh các hạn chế dựa trên số đo của phần tử con này, và gọi thành phần con tiếp theo cùng với các điều kiện ràng buộc đã điều chỉnh này.
5. Sau khi tất cả các phần tử con của nút mẹ được đo lường, nút mẹ sẽ quyết định dựa trên kích thước riêng và thông báo kích thước đó đến cấp độ gốc của chính nó.
6. Bằng cách này, toàn bộ cây được duyệt theo chiều sâu trước. Cuối cùng, tất cả các nút đã 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 quy tắc ràng buộc và thứ tự đố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 quy tắc ràng buộc kích thướ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 đ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 hiển thị trong một vùng chứa 300dp của 200dp. Các điều kiện ràng buộc bị ràng buộc, cho phép chiều rộng nằm trong khoảng từ 100dp đến 300dp và chiều cao trong khoảng từ 100dp đến 200dp:

Hình 7. Các điều kiện ràng buộc ràng buộc trong cây giao diện người dùng và cách thể hiện của nó 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 để khớp với giá trị được truyền vào. 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 giới hạn ràng buộc đã truyền gần nhất có thể trong khi vẫn tuân thủ các giới hạn ràng buộc đã truyền:

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

Xin lưu ý rằng việc liên kết nhiều đối tượng sửa đổi size 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, đố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 để 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 ghi đè các quy tắc ràng buộc sắp tới. Đố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 dưới dạng giới hạn chính xác.

Khi kích thước được chuyển trở lại cây, nút con sẽ được căn giữa trong dung lượng còn trống:

Hình 11. Đối tượng sửa đổi requiredSize ghi đè các quy tắc ràng buộc sắp tới 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 điều kiện ràng buộc. Bằng đối tượng sửa đổi width, bạn có thể thiết lập chiều rộng cố định nhưng chưa 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 để chiều rộng chưa xác định:

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

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

Đối tượng sửa đổi sizeIn cho phép bạn đặt chính xác các điều kiện ràng buộc tối thiểu và tối đa 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 với minWidth, maxWidth, minHeight và maxHeight được đặt.

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:

• Đối tượng sửa đổi fillMaxSize 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 chiều rộng và 200dp 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 nó vẫn cần để tuân thủ các ràng buộc tối thiểu sắp tới. Vì vậy, đối tượng sửa đổi size sẽ cũng xuất ra các giới hạn ràng buộc chính xác của 300 theo 200, một cách hiệu quả bỏ qua giá trị được cung cấp trong đối tượng sửa đổi size.
• Image tuân theo các giới hạn 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 theo chiều rộng và 200dp theo chiều cao.
• Công cụ sửa đổi wrapContentSize sẽ đặt lại các điều kiện ràng buộc tối thiểu. Vì vậy, trong khi fillMaxSize dẫn đến các quy tắc ràng buộc đã được khắc phục, wrapContentSize đặt lại phương thức này về lại theo các điều kiện ràng buộc ràng buộc. Giờ đây, nút sau có thể chiếm lại 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 quy tắ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 theo 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. Phải có con và đặt giá trị đó vào giữa giới hạn tối thiểu hiện có được chuyển đến cuộc trò chuyện. Do đó, kích thước mà thành phần này giao tiếp với thành phần mẹ sẽ bằng với giới hạn tối thiểu đã được truyền vào.

Chỉ cần kết hợp 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à đặt mã đó vào giữa phần tử mẹ.

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

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

• Đố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 quy tắc ràng buộc tối đa.
  • Đối tượng sửa đổi size đặt mọi đ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 100 bằng cách 100dp.
  • Đối tượng sửa đổi padding sẽ thêm 10dp trên tất 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.
  • Bây giờ, trong giai đoạn vẽ, đối tượng sửa đổi clip sẽ hoạt động trên canvas của 120 bằng 120dp. Do đó, Google 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 đối tượng đó vào 10dp trên tất cả kích thước, do đó, kích thước canvas sẽ giảm 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 kết quả không phải là kết quả tròn.