A Vocabulary of Jetpack Compose Terms

 

Jetpack Compose là bộ công cụ mới để xây dựng giao diện người dùng trong Android.

Mặc dù có rất nhiều mẫu và hướng dẫn có sẵn để tìm hiểu các chi tiết thực tế của

Jetpack Compose, nhưng các thuật ngữ thường được sử dụng mà không cần giải thích.

Bài viết này nhằm mục đích làm rõ những thuật ngữ này cho người đọc không quen với

ý nghĩa của chúng.

1. Architecture

• Luồng dữ liệu một chiều

Một mẫu mà dữ liệu chỉ chảy theo một hướng. Hãy tưởng tượng rằng chúng ta có một

màn hình được tạo thành từ các thành phần, và các thành phần này được tạo thành từ

các thành phần nhỏ hơn, v.v. Dữ liệu chảy xuống từ các thành phần mẹ đến các thành

phần con của chúng và các sự kiện đi lên từ các thành phần con đến các thành phần mẹ

của chúng, các thành phần này chịu trách nhiệm thay đổi trạng thái của các thành phần

con để phản ứng với các sự kiện này.

Ví dụ:

Một mẫu trong đó dữ liệu chỉ chảy theo một hướng. Hãy tưởng tượng rằng chúng ta có một màn hình được tạo thành từ các thành phần và các thành phần này được tạo thành từ các thành phần nhỏ hơn, v.v .Dữ liệu chảy xuống từ các thành phần cha đến các thành phần con của chúng và các sự kiện chảy lên từ các thành phần con đến các thành phần chính của chúng, chịu trách nhiệm thay đổi trạng thái của các thành phần con để đáp ứng với các sự kiện này.

Nếu người dùng nhập giá trị “frodobaggins” và nhấn nút “Lưu”, trạng thái bên trong của thành phần tên người dùng vẫn chưa thay đổi. Thay vào đó, sự kiện lưu người dùng được gửi đến màn hình, và màn hình lưu dữ liệu vào cơ sở dữ liệu và gửi lại trạng thái mới cho các thành phần con.

• Giao diện người dùng bắt buộc

Một phong cách phát triển giao diện người dùng trong đó nhà phát triển chỉ định cách thay đổi giao diện người dùng để đáp ứng các sự kiện. Hệ thống xem Android là một ví dụ của phong cách này. Trong khi các dạng xem thường được mô tả bằng XML, cấu trúc phân cấp cây giao diện người dùng được thay đổi để đáp ứng với các sự kiện. Ví dụ: để đặt văn bản trên TextView, findViewById được sử dụng để tìm chế độ xem và sau đó setText để thay đổi văn bản.

• Giao diện người dùng khai báo

Một phong cách phát triển giao diện người dùng trong đó nhà phát triển mô tả giao diện người dùng trông như thế nào dựa trên trạng thái hiện tại. Giao diện người dùng không bị thay đổi theo các sự kiện, mà là toàn bộ giao diện người dùng được tạo lại khi trạng thái thay đổi và chỉ những thay đổi cần thiết mới được áp dụng. Jetpack Compose là một ví dụ cho phong cách này.

2. Basics

• Composable functions

Khối xây dựng của việc tạo giao diện người dùng trong Jetpack Compose. Để tạo một hàm có thể tổng hợp, hãy chú thích một hàm Kotlin bằng @Composable. Hàm không bị giới hạn về mặt tham số nhưng không được có kiểu trả về rõ ràng (ngoài Đơn vị).

Ví dụ: Dưới đây là một ví dụ về một chức năng có thể kết hợp sẽ hiển thị một màn hình với các chi tiết phim.

@Composable

fun NetflixClone(movie: Movie){

...

}

• Modifiers

Làm thay đổi kích thước, bố cục, hành vi và hình thức của một tập hợp. Để tạo một công cụ sửa đổi, hãy sử dụng một trong các phương pháp gốc của Công cụ sửa đổi. Các bổ ngữ có thể được xâu chuỗi, nhưng lưu ý rằng thứ tự của các bổ ngữ rất quan trọng. Nếu một tác phẩm tổng hợp cụ thể không có đối số rõ ràng như bạn muốn, thì đó có thể là một công cụ sửa đổi.

Dưới đây là ví dụ về một văn bản có thể kết hợp hiển thị tên của một bộ phim sử thi ️🧝‍♀️ với một chút đệm dọc và ngang.

Text(text = "The Fellowship of the Ring", style = MaterialTheme.typography.h1,

modifier = Modifier.padding(horizontal = 16.dp, vertical = 4.dp

• Recomposition

Tự động gọi lại một chức năng có thể tổng hợp với dữ liệu mới để các thành phần giao diện người dùng được phát ra được vẽ lại bằng dữ liệu mới. Jetpack Compose sử dụng tính năng sắp xếp lại thông minh để chỉ vẽ lại những gì cần thay đổi.

3. Layout & design

• LazyRow / LazyColumn

Các tập hợp chỉ soạn và sắp xếp các tập hợp con hiển thị trong chế độ xem. Điều này đặc biệt dành cho các trường hợp sử dụng trong đó có nhiều tệp tổng hợp con trong bố cục, để giao diện người dùng luôn hoạt động hiệu quả. LazyRow đặt các thành phần theo chiều ngang, trong khi LazyColumn đặt các thành phần theo chiều dọc.

• Content composable lambda

Lambda lấy một tham số nội dung với kiểu @Composable () -> Unit

• Slot APIs

Sử dụng một số lambdas có thể tổng hợp nội dung để đặt các thành phần kết quả vào các vị trí xác định trước cụ thể trong giao diện người dùng. Scaffold, được định nghĩa bên dưới, là một ví dụ về một tập hợp có thể sử dụng các API vị trí.

• Scaffold

Đơn giản hóa việc tạo giao diện người dùng Material Design bằng cách cung cấp cấu trúc để bố trí trong các bảng tổng hợp tùy chỉnh của bạn. Ví dụ: Scaffold cung cấp các vị trí cho thanh trên cùng, thanh dưới cùng, nút tác vụ nổi, ngăn kéo và nội dung màn hình của bạn.

4. State

• State

Một giá trị thay đổi theo thời gian. Ví dụ, một biến đơn giản là trạng thái. Họ các hàm stateOf tạo ra các chủ sở hữu giá trị trong đó phạm vi Compose sẽ đăng ký các thay đổi của giá trị.

• State hoisting

Mẫu trong đó trạng thái của tệp sáng tác con được di chuyển (hoặc được kéo lên) về chế độ có thể tổng hợp mẹ của nó. Điều này có nghĩa là chỉ thành phần chính có thể thay đổi trạng thái và thành phần con do đó không có trạng thái.

• Stable

Các thành phần chỉ chấp nhận đầu vào ổn định có thể được bỏ qua một cách an toàn trong quá trình tái cấu trúc. Nguyên thủy, đối tượng chuỗi và giao diện vốn đã ổn định và các đối tượng được đánh dấu rõ ràng bằng chú thích @Stable có thể được ổn định.

• Key composable

Xác định các tổng hợp nội dung bằng khóa của một hoặc nhiều giá trị. Các phím không nhất thiết phải là duy nhất trên toàn cầu, chỉ trong số các phím có thể tổng hợp tại trang web gọi cụ thể.

• Remember

Một hàm có thể kết hợp lưu trữ trạng thái trong bộ nhớ trong quá trình thành phần ban đầu và trả về giá trị trong quá trình sắp xếp lại.

5. Advanced topics

• Side-effect

Thay đổi trạng thái của ứng dụng xảy ra bên ngoài phạm vi của chức năng có thể kết hợp.

• Effect

Một chức năng có thể tổng hợp không tạo ra các thành phần giao diện người dùng nhưng gây ra các tác dụng phụ để chạy khi quá trình sáng tác hoàn tất. Một ví dụ về hiệu ứng trong Jetpack Compose là LaunchedEffect, khởi chạy một quy trình nhận biết vòng đời có thể tổng hợp bên ngoài chương trình tổng hợp.

References:

Bắt đầu với Jetpack Compose (tài liệu chính thức)

State documentation (tài liệu chính thức)