Trang này được dịch bởi Cloud Translation API.

Thêm trình xử lý hoạt động tương tác vào thiết kế

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.

Ứng dụng NewsApp có tính năng tương tác nhấn

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.

Lưu ý: Thao tác này sẽ dẫn đến các cảnh báo bản dựng trong HomeScreen.kt vì không sử dụng các tham số mới trong NewsCard. Điều này là đúng như dự kiến.

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ống PostListArticleStories, ở 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ý cho onNewsCardTapped. 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ống PostListAudioStories, ở 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ỉ định createOnTapped cho onMenuTapped.

@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ế