Trong phần này, chúng ta sẽ tìm hiểu cách dùng trình xử lý tương tác để thêm lượt tương tác vào thiết kế của mình.
Trình xử lý tương tác cung cấp cho bạn một biện pháp để chỉ định vị trí có thể tương tác (nhấn, nhấn đúp, v.v.) trên một thành phần. Bạn có thể thêm trình xử lý tương tác vào mọi lớp bên trong một thiết kế.
Thêm trình xử lý
Bạn có thể thêm trình xử lý tương tác vào bất cứ lớp nào. Điều này cho phép nhà thiết kế chỉ định những phần nào của thành phần là có thể tương tác.
Chọn biến thể hero-item (khung), nhấp vào dấu + bên cạnh Tham số (Parameter) rồi chọn
tap-handler
để thêm trình xử lý tương tác. Bước này cho phép nhà phát triển viết mã phản ứng với thao tác nhấn vào thẻ của người dùng.Lặp lại bước trước đó bằng lớp biểu tượng menu trong biến thể audio-item. Bước này cho phép nhà phát triển hiển thị trình đơn khi người dùng nhấn vào biểu tượng trình đơn.
Nếu chọn trình xử lý trên Trình đơn được nhấn, bạn sẽ thấy trình xử lý này chỉ áp dụng cho biến thể audio-item vì các biến thể khác không có biểu tượng trình đơn. Tuy nhiên, tính năng trên NewsCard được nhấn sẽ áp dụng cho cả 3 biến thể. Điều này có nghĩa là bạn có thể cung cấp một trình xử lý (trong mã) để chạy khi bất kỳ biến thể nào trong số 3 biến thể được nhấn, điều này giúp loại bỏ việc trùng lặp mã và tham số. Chúng ta sẽ xem cách hoạt động chi tiết hơn trong phần sau đây Cập nhật thành phần trong Android Studio.
Lưu phiên bản đã đặt tên
Bây giờ, hãy đánh dấu phiên bản này là đã sẵn sàng để nhập vào mã.
Mở trình bổ trợ Figma Relay, nếu chưa mở.
Nhấp vào Chia sẻ với nhà phát triển ở góc dưới bên phải của hộp thoại.
Trên màn hình Chia sẻ với nhà phát triển, hãy nhập tên và nội dung mô tả cho phiên bản.
Tiêu đề ví dụ: Lượt tương tác được thêm
Mô tả ví dụ: Đã thêm 2 trình xử lý tương tác vào thẻ
Nhấp vào Lưu.
Nhấn CMD-L trên MAC, CTRL-L trên Windows để sao chép đường liên kết thành phần vào bảng nhớ tạm.
Cập nhật thành phần trong Android Studio
Hãy cập nhật thành phần NewsCard:
Trong Android Studio, hãy đảm bảo cửa sổ Dự án đang ở chế độ xem Android. Sau đó, hãy nhấp chuột phải vào
app/ui-packages/news_card/
và ở gần cuối trình đơn theo bối cảnh, hãy nhấp vào Update UI Package (Cập nhật gói giao diện người dùng).Nhấp vào để tạo dự án. Thao tác này sẽ lấy Gói giao diện người dùng đã cập nhật và tạo phiên bản mã đã cập nhật của thành phần kết hợp.
Hãy xem
app/java/com/example/hellonews/newscard/NewsCard.kt
và thấy rằng các trình xử lý tương tác được thêm dưới dạng tham số vào NewsCard (onNewsCardTapped
,onMenuTapped
).// Design to select for NewsCard enum class View { HeroItem, ArticleItem, AudioItem } /** * Displays a summary of a news article. * * This composable was generated from the UI package 'news_card'. * Generated code; do not edit directly */ @Composable fun NewsCard( modifier: Modifier = Modifier, view: View = View.HeroItem, thumbnail: Painter = EmptyPainter(), headline: String = "", author: String = "", date: String = "", onNewsCardTapped: () -> Unit = {}, onMenuTapped: () -> Unit = {} ) { ...
Tích hợp vào ứng dụng
Bây giờ, hãy thêm một số trình xử lý vào hoạt động tương tác của chúng ta.
Trong
app/java/com/example/hellonews/ui/home/HomeScreen.kt
, hãy cuộn xuốngPostListArticleStories
, ở khoảng dòng 175.... @Composable fun HomeScreen(...) @Composable private fun PostList(...) @Composable private fun PostListArticleStoriesSection(...) @Composable private fun SearchArticlesSection(...) @Composable private fun PostListArticleStories( postTop: Post, posts: List<Post>, createOnTapped: (String, String) -> () -> Unit ) {...} @Composable private fun AudioStoriesTitle(...) @Composable private fun PostListAudioStories(...) @Composable fun Dialog(...) ...
Đối với
postTop
, hãy thêm các trình xử lý choonNewsCardTapped
.createOnTapped
mở ra một hộp thoại có các tham số của hộp thoại đó là tiêu đề và nội dung.@Composable private fun PostListArticleStories( postTop: Post, posts: List<Post>, createOnTapped: (String, String) -> () -> Unit ) { ... Column( horizontalAlignment = Alignment.Start, modifier = ... ) { Spacer(modifier = Modifier.size(12.dp)) NewsCard( thumbnail = painterResource(postTop.imageId), headline = postTop.title, author = postTop.metadata.author.name, date = postTop.metadata.date, onNewsCardTapped = createOnTapped("Card Tapped", postTop.title), view = View.HeroItem ) Spacer(modifier = Modifier.size(12.dp)) ... } }
Đối với mỗi bài đăng, hãy thêm các trình xử lý cho
onNewsCardTapped
.@Composable private fun PostListArticleStories( postTop: Post, posts: List<Post>, createOnTapped: (String, String) -> () -> Unit ) { ... Column( horizontalAlignment = Alignment.Start, modifier = ... ) { ... posts.forEach { post -> NewsCard( thumbnail = painterResource(post.imageId), headline = post.title, author = post.metadata.author.name, date = post.metadata.date, onNewsCardTapped = createOnTapped("Card Tapped", post.title), view = View.ArticleItem ) Spacer(modifier = Modifier.size(12.dp)) } } }
Vẫn trong
HomeScreen.kt
, hãy cuộn xuốngPostListAudioStories
, ở khoảng dòng 260.... @Composable fun HomeScreen(...) @Composable private fun PostList(...) @Composable private fun PostListArticleStoriesSection(...) @Composable private fun SearchArticlesSection(...) @Composable private fun PostListArticleStories(...) @Composable private fun AudioStoriesTitle(...) @Composable private fun PostListAudioStories( posts: List<Post>, createOnTapped: (String, String) -> () -> Unit ) {...} @Composable fun Dialog(...) ...
Đối với mỗi bài đăng, hãy thêm các trình xử lý cho
onNewsCardTapped
. Vì biến thể Âm thanh có trình đơn, hãy chỉ địnhcreateOnTapped
choonMenuTapped
.@Composable private fun PostListAudioStories( posts: List<Post>, createOnTapped: (String, String) -> () -> Unit ) { Column( horizontalAlignment = ..., modifier = ... ) { posts.forEach { post -> NewsCard( thumbnail = painterResource(post.imageId), headline = post.title, author = post.metadata.author.name, date = post.metadata.date, onNewsCardTapped = createOnTapped("Card Tapped", post.title), onMenuTapped = createOnTapped("Menu Tapped", post.title), view = View.AudioItem ) Spacer(modifier = Modifier.size(12.dp)) } } }
Nhấp vào biểu tượng ▶ để tạo bản dựng ứng dụng và chạy bản dựng đó trong trình mô phỏng.
Thật tuyệt! Bạn đã tìm hiểu xong các tính năng nâng cao của Relay.
Bạn có thể tìm hiểu thêm về cách làm việc với Relay trong phần Relay Workflow (Quy trình công việc của Relay). Chúng tôi cũng rất mong nhận được ý kiến đóng góp của bạn nếu bạn có ý kiến phản hồi.
Đề xuất cho bạn
- Lưu ý: văn bản có đường liên kết sẽ hiện khi JavaScript tắt
- Tham số nội dung
- Xử lý các biến thể thiết kế