Jetpack Compose: Container Layout

 

Khi thư viện Jetpack Compose đang được phát triển - tôi muốn xem nhanh các tùy chọn

bố cục mà chúng tôi có cho đến nay. Bắt đầu với Container Layout.

Cập nhật: Kể từ khi soạn phiên bản 0.1.0-dev08, Container Layout đã không được

dùng nữa để ưu tiên sử dụng Box - Bạn vẫn có thể đọc thông tin chi tiết về Container,

vì nó tương tự như Box - với sự khác biệt là Container chỉ có thể chứa một con.

Chúng ta đã quen thuộc với ViewGroups trong thế giới xml, ví dụ như LinearLayout,

FrameLayout, ConstraintLayout, v.v. Có các tùy chọn bố cục tương tự trong

Jetpack Compose.

Container layout là một trong những bố cục đó và có lẽ là bố cục đơn giản nhất.
Đó chỉ là container layout cho một phần tử con, tức là nó có thể chỉ có một chế
độ xem con bên trong nó.

Ưu điểm của việc sử dụng Container là bạn có thể thiết lập các thuộc tính
khác nhau trên chính container để điều chỉnh vị trí và kích thước của đứa

trẻ bên trong.

Đây là một số tùy chọn chúng tôi nhận được:

Alignment: how to position the child if the [Container] is larger than the child

Padding: the padding to be applied to the child

Width: the width to be used for the Container

Height: the height to be used for the Container

Expanded: expands the container to parent's height/width

Constraints: additional Constraints to be enforced when measuring the Container

Chúng ta hãy xem xét từng thuộc tính một.

Lưu ý: Tôi đang sử dụng Jetpack Compose phiên bản

0.1.0-dev06 tại thời điểm viết bài này.

Alignment

Có 9 cách alignment khác nhau mà chúng tôi có thể đặt cho chế

độ xem trẻ em. Bộ alignment mặc định là Center.

Nếu chúng ta có Hộp màu xanh lam 80dp x 80dp làm chế độ

xem con và container layout có kích thước xấp xỉ 220dp x 220dp,

thì việc đặt các alignment khác nhau sẽ trông giống như sau:

Padding

Một tùy chọn đơn giản để thiết lập padding.

Chúng tôi cũng có thể đặt các padding riêng lẻ cho trái, trên, phải và dưới.

Height and Width

Chúng ta có thể đặt height và width của Container một cách rõ ràng.

Điều này có thể được thực hiện theo hai cách:

1. Sử dụng thuộc tính height và width

2. Sử dụng công cụ sửa đổi LayoutHeight và LayoutWidth

Cả hai đều có tác dụng như nhau.

Lưu ý rằng hộp màu xanh lam (chế độ xem con) nằm ở giữa vì đó là alignment

mặc định được đặt trên Container.

Expanded

Thuộc tính này nếu được đặt thành true, sẽ mở rộng Container để khớp với

height và width của chế độ xem gốc, trừ khi được chỉ định rõ ràng. Theo mặc

định, nó được đặt thành false.

Constraints

Thuộc tính Constraints được sử dụng để đặt chiều height/width

rộng tối thiểu và tối đa trên container.

Nếu chúng ta làm điều này, container sẽ có height/width tối thiểu

khi không được mở rộng.

Khi được mở rộng - nó có height/width tối đa. Vì maxWidth

được đặt thành vô cùng (tức là match_parent), nên nó lấy

toàn bộ chiều rộng của cha nhưng đặt chiều cao thành 260dp.

Có cả phần mở rộng trợ giúp để thiết lập các ràng buộc.

Modifier

Đó là thuộc tính chung cho tất cả các bố cục / thành phần - không

thực sự hữu ích trong trường hợp Container vì nó có các thuộc

tính bổ trợ rõ ràng (height, width, padding, v.v.). Nhưng nếu bạn

muốn, bạn có thể sử dụng công cụ sửa đổi để đặt thông số bố cục.

Cú pháp của việc thiết lập các công cụ sửa đổi là:

Bạn có thể đặt bao nhiêu công cụ sửa đổi tùy thích.

Tuyên bố từ chối trách nhiệm: Vì Jetpack Compose đang trong

giai đoạn phát triển - bất kỳ API nào trong số này đều có thể

thay đổi bất kỳ lúc nào. Vì vậy, là nguồn của sự thật, vui lòng

luôn tham khảo tài liệu chính thức.

Cảm ơn bạn đã đọc - Tôi sẽ sớm trình bày phần còn lại của

layout, vì vậy hãy chú ý theo dõi. Chúc bạn viết mã vui vẻ!