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 giới hạn được truyền đến các thành phần kết hợp giú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, từ đó đo lường và đặt 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ác đối tượng sửa đổi ảnh hưởng lẫn nhau như thế nào, bạn nên trực quan hoá cách các đối tượng sửa đổi 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ể trực quan hoá đối tượng sửa đổi ở dạng nút trình bao bọc cho 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ẽ 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 sửa đổi clip
sẽ gói nút đối tượng sửa đổi size
, sau đó sẽ gói nút bố cục Image
.
Trong giai đoạn bố cục, thuật toán di chuyển trên cây vẫn giữ nguyên, nhưng mỗi nút của đố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à nó bao bọc.
Như minh hoạ trong Hình 2, quá trình 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. 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 nút con.
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 duy nhất.
- 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ề việc tạo chuỗi đối tượng sửa đổi và cách chuỗi đối tượng này ả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 một thuật toán 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:
- Đ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ó.
- Quyết định kích thước riêng: Dựa trên những thông tin đo lường đó, một nút sẽ quyết định kích thước riêng của mình.
- Đặt nút con: Mỗi nút con được đặt tương ứng với vị trí của một 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 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 nút. Khi nút quyết định kích thước, kích thước đo được của nó 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:
- Bị giới hạn: Nút có chiều rộng và chiều cao tối đa cũng như tối thiểu.
- Không bị ràng buộc: Nút không bị ràng buộc ở 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ô hạn.
- Chính xác: Nút được yêu cầu 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ị.
- Kết hợp: Nút 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 vẫn cho phép chiều cao tối đa không bị giới hạn hoặc đặt chiều rộng chính xác nhưng vẫn cung cấp chiều cao bị giới hạn.
Phần tiếp theo mô tả cách truyền các quy tắc ràng buộc này từ phần tử mẹ sang phần tử 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 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 chuyể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út này sẽ cung cấp các điều kiện ràng buộc này cho mỗi nút con để cho biết kích thước lớn hoặc nhỏ của chúng. Sau đó, khi quyết định kích thước của mã, mô-đun cũng tuân thủ các quy tắc ràng buộc mà phần tử mẹ của nó truyền vào.
Ở cấp độ tổng quát, thuật toán hoạt động theo cách sau:
- Để quyết định kích thướ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 phần tử con và chuyển tiếp các quy tắc ràng buộc tương tự đến phần tử con đầu tiên.
- 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ì các quy tắc ràng buộc sẽ được chuyển tiếp đến đối tượng sửa đổi tiếp theo. Các quy tắc ràng buộc được chuyển xuống chuỗi đối tượng sửa đổi nguyên trạng, trừ phi bạn đạt đến một đối tượng sửa đổi ảnh hưởng đến hoạt động đo lường. Sau đó, các giới hạn sẽ được đổi kích thước cho phù hợp.
- Sau khi đạt đến một nút mà không có bất kỳ nút con nào (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ả về kích thước đã phân giải này cho nút gốc.
- Thành phần mẹ điều chỉnh các quy tắc ràng buộc dựa trên các 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 điều kiện ràng buộc đã được điều chỉnh này.
- Sau khi đo lường tất cả các phần tử con của nút mẹ, nút mẹ sẽ quyết định kích thước riêng của nó và thông báo điều đó cho nút mẹ của chính nó.
- Bằng cách này, toàn bộ cây sẽ được di chuyển theo chiều sâu. 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 về Các quy tắc ràng buộc 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ể có ảnh hưởng đến các quy tắc ràng buộc.
Đố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 vùng chứa 300dp
của 200dp
. Các quy tắc ràng buộc bị giới hạn, cho phép chiều rộng từ 100dp
đến 300dp
và chiều cao từ 100dp
đến 200dp
:
Đối tượng sửa đổi size
điều chỉnh các điều kiện ràng buộc sắp tới cho phù hợp với giá trị được truyền vào.
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 giới hạn ràng buộc đã truyền một cách chặt chẽ nhất có thể trong khi vẫn tuân thủ các quy tắc ràng buộc được truyền vào:
Xin lưu ý rằng bạn không thể tạo chuỗi nhiều đối tượng sửa đổi size
. Đối tượng sửa đổi size
đầu tiên đặt cả các điều kiện 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 số đó vẫn cần tuân thủ các giới hạn chính xác được truyền vào, nên sẽ không ghi đè các giá trị đó:
Đố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
thay thế các giới hạn 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 không gian 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 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 chưa 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 điều kiện 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.
Ví dụ
Phần này cho thấy và giải thích kết quả của một số đoạn mã bằng đố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 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
cho 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ước50dp
, 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 đổisize
cũng sẽ tạo ra các giới hạn ràng buộc chính xác của300
bằng200
, bỏ qua hiệu quả giá trị đã 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
, kích thước này được truyền lên đến cây.
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) )
Đ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 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
chiều rộng và200dp
về 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, mặc dùfillMaxSize
dẫn đến các điều kiện ràng buộc cố định, nhưngwrapContentSize
sẽ đặt lại giá trị này về các quy tắc ràng buộc bị ràng buộc. Nút sau đây hiện 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 điều kiện ràng buộc thành giới hạn tối thiểu và tối đa là50
. Image
phân giải thành kích thước50
x50
và đối tượng sửa đổisize
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ương thức này sẽ lấy con và đặt dữ liệu này vào giữa các giới hạn tối thiểu có sẵn đã truyền tới. Do đó, kích thước mà lớp này thông báo cho thành phần mẹ bằng với giới hạn tối thiểu đã được truyền vào đó.
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 này vào 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 tạo 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
giảm bớt 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 có kích thước100
x100dp
.- Đối tượng sửa đổi
padding
thêm10dp
trên mọi kích thước, vì vậy, đối tượng này sẽ tăng chiều rộng và chiều cao được báo cáo thêm20dp
. - Hiện đang trong giai đoạn vẽ, đối tượng sửa đổi
clip
hoạt động trên canvas của120
của120dp
. Do đó, thao tác này sẽ tạo một mặt nạ vòng tròn có kích thước đó. - Sau đó, đối tượng sửa đổi
padding
sẽ lồng nội dung của nó bằng10dp
trên mọi kích thước để giảm kích thước canvas xuống100
đi100dp
. Image
được vẽ trong canvas đó. Hình ảnh được cắt dựa trên vòng tròn ban đầu của120dp
, vì vậy kết quả đầu ra là một kết quả không phải là hình tròn.
- Đối tượng sửa đổi