상호작용 핸들러는 구성요소가 상호작용할 수 있는 위치(탭, 두 번 탭 등)를 지정하는 방법을 제공합니다. 상호작용 핸들러는 설계 내 모든 레이어에 추가할 수 있습니다.
핸들러 추가
상호작용 핸들러는 모든 레이어에 추가할 수 있습니다. 이를 통해 디자이너는 상호작용하는 구성요소의 부분을 지정할 수 있습니다.
hero-item 변형(프레임)을 선택하고 매개변수 옆에 있는 +를 클릭한 후 tap-handler를 선택하여 상호작용 핸들러를 추가합니다. 이를 통해 개발자는 사용자가 카드를 탭하는 것에 반응하는 코드를 작성할 수 있습니다.
audio-item 변형에서 메뉴 아이콘 레이어를 사용하여 이전 단계를 반복합니다. 이렇게 하면 사용자가 메뉴 아이콘을 탭할 때 개발자가 메뉴를 표시할 수 있습니다.
메뉴를 탭했을 때 핸들러를 선택하면
audio-item 변형에 적용됩니다. 왜냐하면 다른 변형에는
메뉴 아이콘을 탭합니다. 하지만 NewsCard 탭함은
있습니다. 즉, 코드 내에서 실행할 한 개의 핸들러를
세 가지 변형 중 하나를 탭하면 코드 중복을 제거하고
매개변수입니다. 작동 방식은 다음 업데이트
구성요소 섹션에 나와 있습니다.
// 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 = {}
) {
...
앱에 통합
이제 상호작용에 핸들러를 추가해 보겠습니다.
app/java/com/example/hellonews/ui/home/HomeScreen.kt에서 175번 줄 근처의 PostListArticleStories까지 아래로 스크롤합니다.
...
@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(...)
...
postTop의 경우 onNewsCardTapped의 핸들러를 추가합니다. createOnTapped 앱이
매개변수를 제목 및 본문으로 갖는 대화상자입니다.
HomeScreen.kt의 260행 근처에서 PostListAudioStories까지 아래로 스크롤합니다.
...
@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(...)
...
각 게시물의 onNewsCardTapped 핸들러를 추가합니다. 오디오 변형
메뉴가 있는 경우 createOnTapped를 onMenuTapped에 할당합니다.
를 클릭하여 프로젝트를 빌드합니다. 업데이트된 UI 패키지를 사용하여 업데이트된 버전의 구성 가능한 코드가 생성됩니다.
