Complex UI in Jetpack Compose

Jetpack Compose cung cấp nhiều công cụ để tạo giao diện người dùng. Với Jetpack Compose, bạn có thể dễ dàng tạo MVP cho dự án của mình và xem nó trông như thế nào. Ví dụ, để tạo danh sách trong Android theo cách thông thường, chúng ta nên sử dụng RecyclerView. Và tất nhiên, chúng ta cần tạo một bộ điều hợp và ngăn chứa chế độ xem để quản lý các mục trong RecyclerView. Trong Jetpack Compose, chúng ta có thể làm điều đó một cách dễ dàng.

@Composable

fun NewsList() {

LazyColumn {

items(rows) { item ->

Text(

modifier = Modifier

.height(80.dp),

text = item

)

}

}

}

Và đó là tất cả. Không cần bộ điều hợp, giá đỡ màn hình, v.v.

LazyColumn được sử dụng khi bạn muốn tạo một danh sách dọc. Để tạo chiều ngang, chúng tôi chỉ cần thay thế LazyColumn bằng LazyRow và danh sách của chúng tôi trở thành chiều ngang.

@Composable

fun NewsList() {

LazyRow {

items(rows) { item ->

Text(

modifier = Modifier

.height(80.dp),

text = item

)

}

}

}

Nếu bạn muốn lấy chỉ mục của mục, hãy thay thế các mục thành itemsIndexed và bạn sẽ truy cập vào chỉ mục của mục hiện tại

itemsIndexed(rows) { index, item ->

Text(

modifier = Modifier

.height(80.dp),

text = item

)

}

Điều gì sẽ xảy ra nếu chúng ta muốn tạo một danh sách lồng nhau. Điều đó chứa cả các mục dọc và ngang. Tất nhiên, cho mục đích này, chúng ta có thể sử dụng LazyVerticalGrid.

LazyVerticalGrid(cells = GridCells.Fixed(10)) {

itemsIndexed(rows) { row, item->

Text(

modifier = Modifier

.height(80.dp),

text = item

)

}

}

Nhưng có một vài vấn đề với giải pháp. Đầu tiên, LazyVerticalGrid vẫn được chú thích là ExperimentalFoundationApi. Cái thứ hai là nó cho phép lưới của bạn chỉ cuộn theo chiều dọc. Và điều thứ ba là nó luôn phù hợp với chiều rộng màn hình. Vì vậy, ví dụ: nếu bạn muốn có 8 cột, LazyVerticalGrid cố gắng đưa tất cả chúng vào màn hình. Đây là một ví dụ về công việc của nó.

Tôi nghĩ bạn sẽ đồng ý với tôi rằng nó trông hơi kỳ lạ, thay vì lắp tất cả các mục vào màn hình, tôi muốn có thể cuộn lưới của mình theo chiều ngang để xem tất cả các mục. Để thực hiện điều này sẽ sử dụng các thành phần mà chúng ta đã sử dụng trước LazyRow và LazyColumn. Sự kết hợp của hai thành phần này cho phép chúng tôi tạo ra một lưới có thể cuộn phức tạp với nỗ lực tối thiểu. Hãy bắt đầu!

Đầu tiên, chúng ta cần tạo LazyColumn để làm cho các mục của chúng ta có thể cuộn theo chiều dọc. Nhưng lúc này mục LazyColumn của chúng ta sẽ là LazyRow. Tôi đã thêm một số sửa đổi vào thành phần Văn bản để làm cho lưới đẹp hơn một chút.

LazyColumn {

itemsIndexed(rows) { index, row ->

LazyRow {

itemsIndexed(columns) { index, column ->

Text(

modifier = Modifier

.padding(8.dp)

.background(Color.Red)

.width(100.dp)

.height(100.dp),

textAlign = TextAlign.Center,

color = Color.White,

text = "Row $row Column = $column"

)

}

}

}

}

hàng - trong một mảng các chuỗi có kích thước là 10

cột - trong một mảng các chuỗi có kích thước là 10

Vì vậy, chúng ta sẽ có một lưới với 10 hàng và các cột có cùng kích thước

Và chúng tôi chạy mã của mình, chúng tôi sẽ thấy một cái gì đó như thế này:

Sử dụng giải pháp này, chúng tôi đạt được một số lợi ích:

1. Nhiều cơ hội tùy chỉnh hơn. Khả năng thay đổi mọi mục trong lưới hoặc chỉ thay đổi các mục trên cột hoặc hàng cụ thể.

2. Kiểm soát hoàn toàn lưới điện của chúng ta.

3. Cuộn vô hạn theo cả hai hướng.

Phần kết luận

Jetpack Compose cung cấp nhiều công cụ để tạo giao diện người dùng phức tạp. Hôm nay chúng ta đã học các cách tạo lưới trong Jetpack Compose. Nếu bạn muốn tạo một lưới đơn giản mà không có các tính năng như cuộn ngang hoặc cuộn vô hạn, bạn nên sử dụng LazyVerticalGrid. Nếu không, tôi khuyên bạn nên sử dụng kết hợp LazyRow và LazyColumn cho những mục đích này.

Cảm ơn vì đã đọc và hẹn gặp lại!