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 đối tượng sửa đổi theo chuỗi ảnh hưởng đến các quy tắc ràng buộc và do đó, đ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 đối tượng sửa đổi ảnh hưởng lẫn nhau, bạn nên trực quan hoá 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 mục Bản sáng tác.
Trong cây giao diện người dùng, bạn có thể trực quan hoá các đối tượng sửa đổi dưới dạng các nút trình bao bọc cho bố cục nút:
![Mã cho các thành phần kết hợp và đối tượng sửa đổi cũng như cách trình bày trực quan của các thành phần này dưới dạng cây giao diện người dùng.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/modifier-wrapping.png?authuser=5&hl=vi)
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 liên kết clip
và
Đối tượng sửa đổi size
, nút đối tượng sửa đổi clip
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 đi qua cây vẫn giữ nguyên, nhưng mỗi nút đối tượng sửa đổi cũng sẽ được truy cập. Bằng cách này, đối tượng sửa đổi có thể thay đổi kích thước các yêu cầu 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. 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ọ.
![Cấu trúc cây trước đây, nhưng hiện tại mỗi nút chỉ là một bố cục đơn giản, với nhiều nút đối tượng sửa đổi bao quanh nó.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/composables-modifiers.png?authuser=5&hl=vi)
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.
- 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:
- Đ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ó.
- 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.
- Đặ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. Ràng buộc xác định giới hạn tối thiểu và tối đa cho một
chiều rộng và chiều cao của nút. Khi nút quyết định kích thước của nó, 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 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.
![Các hạn chế ràng buộc có kích thước khác nhau trong một vùng chứa.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/bounded-constraints.png?authuser=5&hl=vi)
- 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. Chiều rộng tối đa và giới hạn chiều cao được thiết lập thành vô cực.
![Các điều kiện ràng buộc không giới hạn có chiều rộng và chiều cao được đặt thành vô cùng. Các quy tắc ràng buộc mở rộng ra ngoài vùng chứa.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/unbounded-constraints.png?authuser=5&hl=vi)
- 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á trị tối thiểu và giới hạn tối đa được đặt thành cùng một giá trị.
![Các quy tắc ràng buộc chính xác tuân theo yêu cầu về kích thước chính xác trong vùng chứa.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/exact-constraints.png?authuser=5&hl=vi)
- 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 điều kiện ràng buộc có thể ràng buộc chiều rộng trong khi cho phép một 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 giới hạn.
![Hai vùng chứa thể hiện sự kết hợp giữa điều kiện ràng buộc bị ràng buộc và không giới hạn cũng như chiều rộng và chiều cao chính xác.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/combination-constraints.png?authuser=5&hl=vi)
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 trẻ.
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 thành phần 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:
- Để quyết định kích thước mà 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 phần tử con và chuyển tiếp các ràng buộc tương tự đến phần tử con đầu tiên.
- Nếu phần tử con là một đối tượng sửa đổi không ảnh hưởng đến hoạt động đo lường, thì phần tử con sẽ chuyển tiếp các quy tắc ràng buộc đối với đố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 nguyên trạng, trừ phi đạt được công cụ sửa đổi ảnh hưởng đến hoạt động đo lường. Chiến lược phát hành đĩa đơn sau đó được thay đổi kích thước tương ứng.
- Sau khi đạt đến một nút không có nút con nào (được gọi là "lá nút"), nó quyết định kích thước của nó dựa trên các điều kiện ràng buộc đã được truyền vào và sẽ trả về kích thước đã phân giải này về kích thước gốc.
- 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.
- 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ó.
- Bằng cách này, toàn bộ cây được di chuyển theo chiều sâu. Cuối cùng, tất cả các nút đã quyết định về kích thước của chúng và bước đo lường đã hoàn tất.
Để biết ví dụ chuyên sâu, hãy xem Các quy tắc ràng buộc và thứ tự đối tượng sửa đổi video.
Đố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ể có tác động đến hạn chế.
Đối tượng sửa đổi size
Đối tượng 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
:
![Một phần của cây giao diện người dùng có đối tượng sửa đổi kích thước gói một nút bố cục và
biểu diễn các giới hạn ràng buộc do đối tượng sửa đổi kích thước thiết lập trong một vùng chứa.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/size-modifier.png?authuser=5&hl=vi)
Đối tượng sửa đổi size
điều chỉnh các điều kiện ràng buộc đến cho phù hợp với giá trị được truyền vào.
Trong ví dụ này, giá trị là 150dp
:
![Giống như Hình 7, ngoại trừ việc đối tượng sửa đổi kích thước điều chỉnh các điều kiện ràng buộc đến cho phù hợp với giá trị được truyền vào.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/size-modifier-2.png?authuser=5&hl=vi)
size
điều chỉnh các điều kiện 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, đối tượng sửa đổi sẽ khớp với giá trị các hạn chế nhất có thể trong khi vẫn tuân thủ các hạn chế được truyền trong:
![Hai cây giao diện người dùng và các cách biểu diễn tương ứng trong vùng chứa. Đầu tiên,
đối tượng sửa đổi kích thước chấp nhận các quy tắc ràng buộc bao gồm; thứ hai, công cụ sửa đổi kích thước sẽ thích ứng với
các quy tắc ràng buộc quá lớn càng chặt chẽ càng tốt, dẫn đến các hạn chế lấp đầy vùng chứa.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/size-modifier-3.png?authuser=5&hl=vi)
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. size
đầu tiên
đối tượng sửa đổi đặt cả giới hạn 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, nhưng nó 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ị đó:
![Một chuỗi gồm hai đối tượng sửa đổi kích thướ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,
đó là kết quả của giá trị đầu tiên được truyền vào chứ không phải giá trị thứ hai.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/size-modifier-4.png?authuser=5&hl=vi)
size
, trong đó giá trị thứ hai truyền
trong (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
để ghi đè các giới hạn sắp tới. Đối tượng sửa đổi requiredSize
thay thế
các điều kiện ràng buộc sắp tới và chuyể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:
![Kích thước và đối tượng sửa đổi requiredSize được xâu chuỗi trong cây giao diện người dùng và đối tượng sửa đổi tương ứng
trong một vùng chứa. Các điều kiện ràng buộc của đối tượng sửa đổi requiredSize sẽ ghi đè đối tượng sửa đổi kích thước
hạn chế.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/requiredsize-modifier.png?authuser=5&hl=vi)
requiredSize
ghi đè các điều kiện 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 đ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 để nguyên
chưa xác định chiều rộng:
![Hai cây giao diện người dùng, một cây có đối tượng sửa đổi chiều rộng cùng với biểu diễn vùng chứa và cây còn lại
với đối tượng sửa đổi chiều cao và cách biểu diễn.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/width-height-modifier.png?authuser=5&hl=vi)
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. Dùng đối tượng sửa đổi sizeIn
nếu bạn cần kiểm soát chi tiết
về các ràng buộc.
![Cây giao diện người dùng có đối tượng sửa đổi sizeIn với chiều rộng và chiều cao tối thiểu và tối đa được thiết lập,
và cách trình bày giá trị đó trong một vùng chứa.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/sizein-modifier.png?authuser=5&hl=vi)
sizeIn
có minWidth
, maxWidth
, minHeight
và
Đã đặt maxHeight
.Ví dụ
Phần này trình bày và giải thích kết quả từ một số đoạn mã với đối tượng sửa đổi theo chuỗi.
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .fillMaxSize() .size(50.dp) )
Đoạn mã này cho 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 — chiều rộng300dp
và200dp
theo chiều cao. - Mặc dù đối tượng sửa đổi
size
muốn sử dụng kích thước50dp
, 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 đổisize
sẽ cũng xuất ra các giới hạn ràng buộc chính xác của300
theo200
, một cách hiệu quả bỏ qua giá trị được cung cấp trong đối tượng sửa đổisize
. Image
tuân theo các giới hạn này và báo cáo kích thước300
x200
, tức là được truyền lên đến tận cây.
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) )
Đoạn mã này cho 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ả giá trị tối thiểu chiều rộng và chiều cao thành giá trị tối đa —300dp
chiều rộng và200dp
inch chiều cao. - Đối tượng sửa đổi
wrapContentSize
đặt lại các điều kiện ràng buộc tối thiểu. Vì vậy, trong khifillMaxSize
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. Nút sau đây hiện có thể chiếm toàn bộ dung lượng 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 điều kiện ràng buộc thành giới hạn tối thiểu và tối đa của50
. Image
phân giải thành kích thước50
x50
và đối tượng sửa đổisize
chuyển tiếp nội dung đó.- Đố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à nó giao tiếp với phần tử mẹ 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) )
Đ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
hạ thấp các giới hạn tối đa. - Đối tượng sửa đổi
size
đặt mọi điều kiện ràng buộc thành100dp
. Image
tuân thủ các quy tắc ràng buộc đó và báo cáo kích thước100
bằng cách100dp
.- Đối tượng sửa đổi
padding
thêm10dp
trên mọi kích thước, do đó làm tăng báo cáo chiều rộng và chiều cao theo20dp
. - Hiện đang trong giai đoạn vẽ, đối tượng sửa đổi
clip
hoạt động trên canvas120
bằng cách120dp
. 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ẽ lồng nội dung của đối tượng này với10dp
trên tất cả các kích thước, để giảm kích thước canvas xuống100
x100dp
. Image
sẽ được vẽ trong canvas đó. Hình ảnh được cắt dựa trên vòng tròn ban đầu của120dp
, nên kết quả không phải là kết quả tròn.
- Đối tượng sửa đổi