Jetpack Compose: 効果的なComposable関数のAPI設計

Transcript

1. +FUQBDL
   $PNQPTF
   ޮՌతͳ$PNQPTBCMFؔ਺ͷ"1*ઃܭ 
   ,PUMJO
   'FTU
   
   !IBSV
2. ࣗݾ঺հ !IBSV
3. ࠓճ࿩͢͜ͱ Ҿ਺ΛͲͷΑ͏ʹఆٛ͢΂͖͔ @Composable fun Button( onClick: () -> Unit, modifier: Modifier = Modifier, content: @Composable RowScope.() -> Unit, ) { / / ... }
4. ಠࣗͷ"QQ#BSΛ࡞Δͱ͖ɺͲͪΒͰ࣮૷͠·͔͢ʁ @Composable fun AppBar( title: @Composable () -> Unit, ) ͜͜Ͱ࣭໰ @Composable fun AppBar( title: String, )
5. ಠࣗͷ"QQ#BSΛ࡞Δͱ͖ɺͲͪΒͰ࣮૷͠·͔͢ʁ ͜͜Ͱ࣭໰ ͲͪΒ͕γϯϓϧͰ͔͢ʁ @Composable fun AppBar( title: @Composable () -> Unit, ) @Composable fun AppBar( title: String, )
6. ίϯϙʔωϯτ͸࢖͍ճ͞ΕΔ
   ࢖͍ճ͞ΕΔ෼͚ͩ༻్΋૿͍͑ͯ͘
   ଟ༷ͳ༻్ʹରԠͰ͖ͳ͍ͱ͍͚ͳ͍ ͳͥॊೈͳ"1*͕ඞཁ͔ CheckButton TextButton IconButton OutlinedButton PrimaryButton Button
7. ίϯϙʔωϯτ͸࢖͍ճ͞ΕΔ
   ࢖͍ճ͞ΕΔ෼͚ͩ༻్΋૿͍͑ͯ͘
   ଟ༷ͳ༻్ʹରԠͰ͖ͳ͍ͱ͍͚ͳ͍ ͳͥॊೈͳ"1*͕ඞཁ͔ ٯʹݴ͑͹ɺ࢖͍ճ͞ͳ͍ίϯϙʔωϯτ͸ॊೈʹ͢Δඞཁੑ͕ബ͍ Button CheckButton TextButton IconButton OutlinedButton PrimaryButton
8. ࡞Δ΋ͷʹΑΔҧ͍ BOESPJEYDPNQPTF ϥΠϒϥϦ ΞϓϦ Button Text Column Calendar VehicleRentalCalendar ґଘ͞Ε΍͢͞ɾ࠶ར༻͞Ε΍͢͞ HotelBookingCalendar 高 低
9. ࡞Δ΋ͷʹΑΔҧ͍ BOESPJEYDPNQPTF ϥΠϒϥϦ ΞϓϦ Button Text Column Calendar VehicleRentalCalendar HotelBookingCalendar ґଘ͞Ε΍͢͞ɾ࠶ར༻͞Ε΍͢͞ 高 低
10. ࡞Δ΋ͷʹΑΔҧ͍ BOESPJEYDPNQPTF ϥΠϒϥϦ ΞϓϦ Button Text Column Calendar HotelBookingCalendar VehicleRentalCalendar 高 低 ͬͪ͜ ґଘ͞Ε΍͢͞ɾ࠶ར༻͞Ε΍͢͞
11. $PNQPTFͰ͸ɺখ͞ͳίϯϙʔωϯτΛ૊Έ߹Θͤͯ6*Λ࡞͍ͬͯ͘ ΞϓϦʹ͓͚Δ෼ྨ Ϙλϯ Χʔυ ը໘ ͋Δछͷ֊૚ߏ଄
12. $PNQPTFͰ͸ɺখ͞ͳίϯϙʔωϯτΛ૊Έ߹Θͤͯ6*Λ࡞͍ͬͯ͘ ΞϓϦʹ͓͚Δ෼ྨ Ϙλϯ Χʔυ ը໘ ͋Δछͷ֊૚ߏ଄ 高 低 ґଘ͞Ε΍͢͞ɾ࠶ར༻͞Ε΍͢͞
13. ؔ਺ͷprivate/internalͰίϯϙʔωϯτͷར༻Ͱ͖ΔൣғΛ੍ݶ͢Ε͹ʮ࢖ΘΕํʯ͕γεςϜతʹఆ·Δ
    ൣғΛݶఆ͢Δʹ͸ʁ
    ϞδϡʔϧԽΛݕ౼͢Δ
    ίϯϙʔωϯτͷґଘΛ੍ޚ͢Δ :feature:A :feature:B :feature:C :core:ui
14. γϯϓϧͳ"1*Ͱ࡞Δʹ͸ɺͦ΋ͦ΋γϯϓϧʹͰ͖ΔύλʔϯɺͰ͖ͳ͍ύλʔϯΛݟ෼͚Δඞཁ͕͋Γ
    ˔
    ίϯϙʔωϯτͷ֊૚Λҙࣝ͢Δ
    ˔
    ϞδϡʔϧΛ෼͚ͯՄࢹੑΛ੍ޚ͢Δ ͭ·Γʁ
15. ॊೈͳ"1*Λ࡞Δ
16. ঢ়ଶΛҾ਺ͱͯ͠౉͢͜ͱͰɺίϯϙʔωϯτ͕εςʔτϨεʹͳΓɺίϯϙʔωϯτͷ֎ଆͰঢ়ଶΛ੍ޚɾڞ༗͢ Δ͜ͱ͕ग़དྷΔ TUBUF
    IPJTUJOH @Composable fun ParentComponent() { Accordion() } @Composable fun Accordion() { var expanded by remember { mutableStateOf(false) } Column { Text( text = "Click to expand", modifier = Modifier.clickable { expanded = !expanded }, ) AnimatedVisibility(visible = expanded) { Text("Expanded content") } } }
17. ঢ়ଶΛҾ਺ͱͯ͠౉͢͜ͱͰɺίϯϙʔωϯτ͕εςʔτϨεʹͳΓɺίϯϙʔωϯτͷ֎ଆͰঢ়ଶΛ੍ޚɾڞ༗͢ Δ͜ͱ͕ग़དྷΔ TUBUF
    IPJTUJOH @Composable fun ParentComponent() { Accordion() } @Composable fun Accordion() { var expanded by remember { mutableStateOf(false) } Column { Text( text = "Click to expand", modifier = Modifier.clickable { expanded = !expanded }, ) AnimatedVisibility(visible = expanded) { Text("Expanded content") } } }
18. ঢ়ଶΛҾ਺ͱͯ͠౉͢͜ͱͰɺίϯϙʔωϯτ͕εςʔτϨεʹͳΓɺίϯϙʔωϯτͷ֎ଆͰঢ়ଶΛ੍ޚɾڞ༗͢ Δ͜ͱ͕ग़དྷΔ TUBUF
    IPJTUJOH @Composable fun ParentComponent() { var expanded by remember { mutableStateOf(false) } Accordion( expanded = expanded, onExpandedChange = { expanded = !expanded } ) } @Composable fun Accordion( expanded: Boolean, onExpandedChange: () - > Unit, ) { Column { Text( text = "Click to expand", modifier = Modifier.clickable { onExpandedChange() }, ) AnimatedVisibility(visible = expanded) { Text("Expanded content") } } }
19. ˔
    ਌ͷίϯϙʔωϯτ͕ঢ়ଶΛ੍ޚ͢Δ৔߹ʢͦͷ͏੍ͪޚͨ͘͠ͳΔͩΖ͏ɺͱ૝ఆ͞ΕΔ৔߹ʣ
    ˔
    ଞͷίϯϙʔωϯτͱঢ়ଶΛڞ༗͢Δ৔߹ʢͦͷ͏ͪڞ༗ͨ͘͠ͳΔͩΖ͏ɺͱ૝ఆ͞ΕΔ৔߹ʣ ͍ͭTUBUF
    IPJTUJOH͢΂͖͔
20. ˔
    ਌ͷίϯϙʔωϯτ͕ঢ়ଶΛ੍ޚ͢Δ৔߹ʢͦͷ͏੍ͪޚͨ͘͠ͳΔͩΖ͏ɺͱ૝ఆ͞ΕΔ৔߹ʣ
    ˔
    ଞͷίϯϙʔωϯτͱঢ়ଶΛڞ༗͢Δ৔߹ʢͦͷ͏ͪڞ༗ͨ͘͠ͳΔͩΖ͏ɺͱ૝ఆ͞ΕΔ৔߹ʣ ͍ͭTUBUF
    IPJTUJOH͢΂͖͔ ྫɿΞίʔσΟΦϯΛ։͍ͨΒଞͷΞίʔσΟΦϯΛด͡Δ
21. ˔
    ਌ͷίϯϙʔωϯτ͕ঢ়ଶΛ੍ޚ͢Δ৔߹ʢͦͷ͏੍ͪޚͨ͘͠ͳΔͩΖ͏ɺͱ૝ఆ͞ΕΔ৔߹ʣ
    ˔
    ଞͷίϯϙʔωϯτͱঢ়ଶΛڞ༗͢Δ৔߹ʢͦͷ͏ͪڞ༗ͨ͘͠ͳΔͩΖ͏ɺͱ૝ఆ͞ΕΔ৔߹ʣ ͍ͭTUBUF
    IPJTUJOH͢΂͖͔ ParentComponent onExpandedChange() ྫɿΞίʔσΟΦϯΛ։͍ͨΒଞͷΞίʔσΟΦϯΛด͡Δ Accordion Accordion Accordion
22. ˔
    ਌ͷίϯϙʔωϯτ͕ঢ়ଶΛ੍ޚ͢Δ৔߹ʢͦͷ͏੍ͪޚͨ͘͠ͳΔͩΖ͏ɺͱ૝ఆ͞ΕΔ৔߹ʣ
    ˔
    ଞͷίϯϙʔωϯτͱঢ়ଶΛڞ༗͢Δ৔߹ʢͦͷ͏ͪڞ༗ͨ͘͠ͳΔͩΖ͏ɺͱ૝ఆ͞ΕΔ৔߹ʣ ͍ͭTUBUF
    IPJTUJOH͢΂͖͔ ParentComponent onExpandedChange() expanded = true ྫɿΞίʔσΟΦϯΛ։͍ͨΒଞͷΞίʔσΟΦϯΛด͡Δ Accordion Accordion Accordion
23. ˔
    ਌ͷίϯϙʔωϯτ͕ঢ়ଶΛ੍ޚ͢Δ৔߹ʢͦͷ͏੍ͪޚͨ͘͠ͳΔͩΖ͏ɺͱ૝ఆ͞ΕΔ৔߹ʣ
    ˔
    ଞͷίϯϙʔωϯτͱঢ়ଶΛڞ༗͢Δ৔߹ʢͦͷ͏ͪڞ༗ͨ͘͠ͳΔͩΖ͏ɺͱ૝ఆ͞ΕΔ৔߹ʣ ͍ͭTUBUF
    IPJTUJOH͢΂͖͔ ParentComponent onExpandedChange() expanded = false expanded = false ྫɿΞίʔσΟΦϯΛ։͍ͨΒଞͷΞίʔσΟΦϯΛด͡Δ Accordion Accordion Accordion
24. TUBUF
    IPJTUJOHΛ͢Δͱঢ়ଶ؅ཧΛ਌ʹ೚ͤΔ͜ͱʹͳΔ
    Ή΍ΈʹTUBUF
    IPJTUJOH͢Δͱɺࠓ౓͸਌ͷঢ়ଶ؅ཧ͕๲Ε্͕Γɺෳࡶʹͳͬͯ͠·͏
    ࢠͷίϯϙʔωϯτ಺Ͱঢ়ଶΛด͡Δ͜ͱ͕Ͱ͖ΔͷͰ͋Ε͹ɺ
    ࢠͷதͰঢ়ଶΛ؅ཧ͠׬݁ͨ͠΄͏͕ɺ෼ׂ౷࣏ʹͳͬͯ؅ཧ͠΍͘͢ͳΔ TUBUF
    IPJTUJOHΛ͠ͳ͍ɺͱ͍͏બ୒ࢶ ParentComponent Accordion Checkbox FilterChip TextField expanded checked text selected
25. ϓϨϏϡʔʢ΋͘͠͸ςετʣΛॻ͘ͱɺTUBUF
    IPJTUJOH͕ඞཁʹͳΔ͜ͱ͕͋Δ
    ˔
    ʮςελϒϧͳίʔυʹमਖ਼ͨ͠Βίʔυ͕៉ྷʹͳͬͨʯʹࣅͨݱ৅
    ˔
    جຊతʹ͸ίʔυΛݟ௚ͨ͢Ίͷྑ͍ஹީ͕ͩɺίϯϙʔωϯτ಺ʹঢ়ଶΛด͡ࠐΊ͍ͨ৔߹ʹ͸໘౗ʹͳΔ @Preview @Composable private fun PreviewExpanded() { Accordion(expanded = true, onExpandedChange = {}) } @Preview @Composable private fun PreviewCollapsed() { Accordion(expanded = false, onExpandedChange = {}) } ϓϨϏϡʔ͸TUBUF
    IPJTUJOHΛଅਐ͢Δ
26. εςʔτϑϧͳ"1*Λެ։͠ɺεςʔτϨεͳ"1*ΛQSJWBUFʹ͢Ε͹ɺϓϨϏϡʔͭͭ͠ɺ"1*Λγϯϓϧʹอͭ͜ͱ ͕Ͱ͖Δ
    ΦʔόʔϩʔυʹΑΔTUBUF
    IPJTUJOHͷӅṭ @Composable fun Accordion() { var expanded by remember { mutableStateOf(false) } Accordion(expanded = expanded, onExpandedChange = { expanded = !expanded }) } @Composable private fun Accordion( expanded: Boolean, onExpandedChange: () - > Unit, ) { Column { Text( text = "Click to expand", modifier = Modifier.clickable { onExpandedChange() }, ) AnimatedVisibility(visible = expanded) { Text("Expanded content") } } }
27. εςʔτϑϧͳ"1*Λެ։͠ɺεςʔτϨεͳ"1*ΛQSJWBUFʹ͢Ε͹ɺϓϨϏϡʔͭͭ͠ɺ"1*Λγϯϓϧʹอͭ͜ͱ ͕Ͱ͖Δ
    ΦʔόʔϩʔυʹΑΔTUBUF
    IPJTUJOHͷӅṭ @Composable fun Accordion() { var expanded by remember { mutableStateOf(false) } Accordion(expanded = expanded, onExpandedChange = { expanded = !expanded }) } @Composable private fun Accordion( expanded: Boolean, onExpandedChange: () - > Unit, ) { Column { Text( text = "Click to expand", modifier = Modifier.clickable { onExpandedChange() }, ) AnimatedVisibility(visible = expanded) { Text("Expanded content") } } }
28. εςʔτϑϧͳ"1*Λެ։͠ɺεςʔτϨεͳ"1*ΛQSJWBUFʹ͢Ε͹ɺϓϨϏϡʔͭͭ͠ɺ"1*Λγϯϓϧʹอͭ͜ͱ ͕Ͱ͖Δ
    ΦʔόʔϩʔυʹΑΔTUBUF
    IPJTUJOHͷӅṭ @Composable fun Accordion() { var expanded by remember { mutableStateOf(false) } Accordion(expanded = expanded, onExpandedChange = { expanded = !expanded }) } @Composable private fun Accordion( expanded: Boolean, onExpandedChange: () - > Unit, ) { Column { Text( text = "Click to expand", modifier = Modifier.clickable { onExpandedChange() }, ) AnimatedVisibility(visible = expanded) { Text("Expanded content") } } }
29. DPNQPTBCMFͳϥϜμΛҾ਺ʹ͢Δ͜ͱͰɺࢠཁૉΛॊೈʹઃఆ͢Δ͜ͱ͕Ͱ͖Δ @Composable fun AppBar( title: @Composable () -> Unit, navigationIcon: @Composable () - > Unit, ) TMPU
    "1* navigation ΞΠίϯ΍ςΩετͳͲɺத਎Λࣗ༝ʹઃఆͰ͖Δ ྫɿ"QQ#BS title AppBar( title = { Text( . .. ) }, navigationIcon = { IconButton( .. . ) }, )
30. ڞ௨6*ͳͲɺͲ͏ར༻͞ΕΔ͔༧ଌ͕͖ͭͮΒ͍΋ͷ
    ͍ͭTMPU
    "1*Λ࢖͏΂͖͔ ྫɿ-JTU*UFN Ұݟ͢ΔͱΞΠίϯͱλΠτϧͷೋͭͰߏ੒͞Ε͍ͯΔΑ͏ʹݟ͑Δ
31. ڞ௨6*ͳͲɺͲ͏ར༻͞ΕΔ͔༧ଌ͕͖ͭͮΒ͍΋ͷ
    ͍ͭTMPU
    "1*Λ࢖͏΂͖͔ ྫɿ-JTU*UFN Ұݟ͢ΔͱΞΠίϯͱλΠτϧͷೋͭͰߏ੒͞Ε͍ͯΔΑ͏ʹݟ͑Δ ิ଍ͷςΩετΛग़͍ͨ͠
32. ڞ௨6*ͳͲɺͲ͏ར༻͞ΕΔ͔༧ଌ͕͖ͭͮΒ͍΋ͷ
    ͍ͭTMPU
    "1*Λ࢖͏΂͖͔ ྫɿ-JTU*UFN Ұݟ͢ΔͱΞΠίϯͱλΠτϧͷೋͭͰߏ੒͞Ε͍ͯΔΑ͏ʹݟ͑Δ ΞΠίϯΛඇදࣔʹ͍ͨ͠ ิ଍ͷςΩετΛग़͍ͨ͠
33. ॊೈʹͳΔҰํɺهड़͸গ͠৑௕ʹͳΔ TMPU
    "1*Λ࢖Θͳ͍ɺͱ͍͏બ୒ࢶ Button( content = { Text("Save") }, onClick = { /* . .. */ }), ) Button( content = "Save", onClick = { /* . .. */ }), )
34. ॊೈʹͳΔҰํɺهड़͸গ͠৑௕ʹͳΔ Button( content = { Text("Save") }, onClick = { /* . .. */ }), ) TMPU
    "1*Λ࢖Θͳ͍ɺͱ͍͏બ୒ࢶ Button( content = "Save", onClick = { /* . .. */ }), ) هड़ͷ؆ܿ͞Λ༏ઌ͢Δબ୒ࢶ΋͋Δ SaveProfileButton( content = { Text("Save") }, onClick = { /* . .. */ }), ) SaveProfileButton( content = "Save", onClick = { /* . .. */ }), ) ༻్͕ݶఆతͳίϯϙʔωϯτʹ͸༗ޮ ඞཁʹͳ͔ͬͯΒTMPU
    "1*Խͯ͠΋ྑ͍
35. TMPU
    "1*ʹϨγʔόʔΛࢦఆ͢Δ͜ͱͰίϯϙʔωϯτͷϓϦηοτΛ༻ҙ͢Δ͜ͱ͕Ͱ͖Δ %4-ͰͷTMPU
    "1* @Composable fun AppBar( title: @Composable () -> Unit, navigationIcon: @Composable() -> Unit, ) ྫɿ"QQ#BS
36. TMPU
    "1*ʹϨγʔόʔΛࢦఆ͢Δ͜ͱͰίϯϙʔωϯτͷϓϦηοτΛ༻ҙ͢Δ͜ͱ͕Ͱ͖Δ %4-ͰͷTMPU
    "1* @Composable fun AppBar( title: @Composable () -> Unit, navigationIcon: @Composable AppBarIconScope.() -> Unit, ) ྫɿ"QQ#BS
37. TMPU
    "1*ʹϨγʔόʔΛࢦఆ͢Δ͜ͱͰίϯϙʔωϯτͷϓϦηοτΛ༻ҙ͢Δ͜ͱ͕Ͱ͖Δ %4-ͰͷTMPU
    "1* @Composable fun AppBar( title: @Composable () -> Unit, navigationIcon: @Composable AppBarIconScope.() -> Unit, ) @Stable class AppBarIconScope { @Composable fun BackButton(back: () - > Unit, modifier: Modifier = Modifier) { IconButton(onClick = back, modifier = modifier) { Icon( painter = painterResource(id = R.drawable.ic_back), contentDescription = null, ) } } } ྫɿ"QQ#BS
38. TMPU
    "1*ʹϨγʔόʔΛࢦఆ͢Δ͜ͱͰίϯϙʔωϯτͷϓϦηοτΛ༻ҙ͢Δ͜ͱ͕Ͱ͖Δ %4-ͰͷTMPU
    "1* @Composable fun AppBar( title: @Composable () -> Unit, navigationIcon: @Composable AppBarIconScope.() -> Unit, ) @Stable class AppBarIconScope { @Composable fun BackButton(back: () - > Unit, modifier: Modifier = Modifier) { IconButton(onClick = back, modifier = modifier) { Icon( painter = painterResource(id = R.drawable.ic_back), contentDescription = null, ) } } } ྫɿ"QQ#BS AppBar( title = { Text("Title") }, navigationIcon = { BackButton(back = { /* .. . * / }) }, ) navigationIcon = {...} ͷதͰ͚ͩ
    BackButton͕࢖͑Δ
39. ˔
    ࢖͍ํΛ֮͑Δඞཁ͕͋Δ %4-ͰͷTMPU
    "1*ͷ஫ҙ఺ @Composable fun AppBar( title: @Composable () -> Unit, navigationIcon: @Composable AppBarIconScope.() -> Unit, ) @Stable class AppBarIconScope { @Composable fun BackButton(back: () - > Unit, modifier: Modifier = Modifier) { IconButton(onClick = back, modifier = modifier) { Icon( painter = painterResource(id = R.drawable.ic_back), contentDescription = null, ) } } } AppBar( title = { Text("Title") }, navigationIcon = { BackButton(back = { /* .. . * / }) }, )
40. ˔
    ࢖͍ํΛ֮͑Δඞཁ͕͋Δ %4-ͰͷTMPU
    "1*ͷ஫ҙ఺ @Composable fun AppBar( title: @Composable () -> Unit, navigationIcon: @Composable AppBarIconScope.() -> Unit, ) @Stable class AppBarIconScope { @Composable fun BackButton(back: () - > Unit, modifier: Modifier = Modifier) { IconButton(onClick = back, modifier = modifier) { Icon( painter = painterResource(id = R.drawable.ic_back), contentDescription = null, ) } } } AppBar( title = { Text("Title") }, navigationIcon = { BackButton(back = { /* .. . * / }) }, )
41. ˔
    ࢖͍ํΛ֮͑Δඞཁ͕͋Δ
    ˔
    ࢖͍ํΛڧ੍͢Δ͜ͱ͸Ͱ͖ͳ͍ %4-ͰͷTMPU
    "1*ͷ஫ҙ఺ @Composable fun AppBar( title: @Composable () -> Unit, navigationIcon: @Composable AppBarIconScope.() -> Unit, ) @Stable class AppBarIconScope { @Composable fun BackButton(back: () - > Unit, modifier: Modifier = Modifier) { IconButton(onClick = back, modifier = modifier) { Icon( painter = painterResource(id = R.drawable.ic_back), contentDescription = null, ) } } } AppBar( title = { Text("Title") }, navigationIcon = { BackButton(back = { /* .. . * / }) }, )
42. ˔
    ࢖͍ํΛ֮͑Δඞཁ͕͋Δ
    ˔
    ࢖͍ํΛڧ੍͢Δ͜ͱ͸Ͱ͖ͳ͍ %4-ͰͷTMPU
    "1*ͷ஫ҙ఺ @Composable fun AppBar( title: @Composable () -> Unit, navigationIcon: @Composable AppBarIconScope.() -> Unit, ) @Stable class AppBarIconScope { @Composable fun BackButton(back: () - > Unit, modifier: Modifier = Modifier) { IconButton(onClick = back, modifier = modifier) { Icon( painter = painterResource(id = R.drawable.ic_back), contentDescription = null, ) } } } AppBar( title = { Text("Title") }, navigationIcon = { BackButton(back = { /* .. . * / }) }, ) AppBar( title = { Text("Title") }, navigationIcon = { IconButton( /* . .. */ ) { Icon( /* ... * / ) } }, )
43. %4-ͰͷTMPU
    "1*ͷ஫ҙ఺ @Composable fun AppBar( title: @Composable () -> Unit, navigationIcon: @Composable AppBarIconScope.() -> Unit, ) @Stable class AppBarIconScope { @Composable fun BackButton(back: () - > Unit, modifier: Modifier = Modifier) { IconButton(onClick = back, modifier = modifier) { Icon( painter = painterResource(id = R.drawable.ic_back), contentDescription = null, ) } } } AppBar( title = { Text("Title") }, navigationIcon = { BackButton(back = { /* .. . * / }) }, ) AppBar( title = { Text("Title") }, navigationIcon = { IconButton( /* . .. */ ) { Icon( /* ... * / ) } }, ) ˔
    ࢖͍ํΛ֮͑Δඞཁ͕͋Δ
    ˔
    ࢖͍ํΛڧ੍͢Δ͜ͱ͸Ͱ͖ͳ͍ "QQ#BSͷྫͷΑ͏ʹɺ࢖༻ස౓͕ߴ͘ɺ༻్ʹҰఆͷ܏޲͕͋ΔʢΠϨΪϡϥʔ΋ͨ·ʹ͋Δʣ৔߹ʹ͸༗ޮ
44. Ҿ਺ʹσϑΥϧτ஋Λઃఆ͢Δ͜ͱͰɺίϯϙʔωϯτͷॊೈੑΛอͪͭͭɺ؆ܿʹهड़͢Δ͜ͱ͕Ͱ͖Δ σϑΥϧτҾ਺ @Composable fun Button( onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = ButtonDefaults.shape, colors: ButtonColors = ButtonDefaults.buttonColors(), elevation: ButtonElevation? = ButtonDefaults.buttonElevation(), ) @Composable fun SomeComponent() { Button(onClick = {}) { .. . } }
45. Ҿ਺ʹσϑΥϧτ஋Λઃఆ͢Δ͜ͱͰɺίϯϙʔωϯτͷॊೈੑΛอͪͭͭɺ؆ܿʹهड़͢Δ͜ͱ͕Ͱ͖Δ σϑΥϧτҾ਺ σϑΥϧτ஋͕େྔʹ͋Δ৔߹͸ɺ
    ͦΕΒΛ·ͱΊͨΦϒδΣΫτΛ࡞Δ͜ͱ΋༗ޮ $PNQPOFOU%FGBVMUT @Composable fun Button( onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = ButtonDefaults.shape, colors: ButtonColors = ButtonDefaults.buttonColors(), elevation: ButtonElevation? = ButtonDefaults.buttonElevation(), ) @Composable fun SomeComponent() { Button(onClick = {}) { .. . } } object ButtonDefaults { val shape: Shape @Composable get() = ... @Composable fun buttonColors( ... ): ButtonColors = ... @Composable fun buttonElevation( .. . ): ButtonElevation = ... }
46. Ұݟศརʹݟ͑ΔσϑΥϧτҾ਺͕ͩɺ҉໧తʹ஋Λઃఆ͢Δ͜ͱʹͳΔ
    ͜ͷ҉໧తͳ஋ͷଘࡏʹؾ͔ͮͳ͍͜ͱͰ໰୊ʹͳΔ৔߹͕͋Δ ҆қʹσϑΥϧτҾ਺Λઃఆ͠ͳ͍
47. Ұݟศརʹݟ͑ΔσϑΥϧτҾ਺͕ͩɺ҉໧తʹ஋Λઃఆ͢Δ͜ͱʹͳΔ
    ͜ͷ҉໧తͳ஋ͷଘࡏʹؾ͔ͮͳ͍͜ͱͰ໰୊ʹͳΔ৔߹͕͋Δ ҆қʹσϑΥϧτҾ਺Λઃఆ͠ͳ͍ @Composable fun CenteredText() { Column { Text( text = "தԝἧ͍͑ͨ͠จࣈྻ", modifier = Modifier .align(Alignment.CenterHorizontally) .padding(32.dp) ) } } ྫɿ5FYUͷதԝἧ͑
48. Ұݟศརʹݟ͑ΔσϑΥϧτҾ਺͕ͩɺ҉໧తʹ஋Λઃఆ͢Δ͜ͱʹͳΔ
    ͜ͷ҉໧తͳ஋ͷଘࡏʹؾ͔ͮͳ͍͜ͱͰ໰୊ʹͳΔ৔߹͕͋Δ ҆қʹσϑΥϧτҾ਺Λઃఆ͠ͳ͍ @Composable fun CenteredText() { Column { Text( text = "தԝἧ͍͑ͨ͠จࣈྻ", modifier = Modifier .align(Alignment.CenterHorizontally) .padding(32.dp) ) } } ྫɿ5FYUͷதԝἧ͑ Ϥγʂ
49. Ұݟศརʹݟ͑ΔσϑΥϧτҾ਺͕ͩɺ҉໧తʹ஋Λઃఆ͢Δ͜ͱʹͳΔ
    ͜ͷ҉໧తͳ஋ͷଘࡏʹؾ͔ͮͳ͍͜ͱͰ໰୊ʹͳΔ৔߹͕͋Δ ҆қʹσϑΥϧτҾ਺Λઃఆ͠ͳ͍ @Composable fun CenteredText() { Column { Text( text = "தԝἧ͍͑ͨ͠จࣈྻ", modifier = Modifier .align(Alignment.CenterHorizontally) .padding(32.dp) ) } } ྫɿ5FYUͷதԝἧ͑ ʂʁ
50. Ұݟศརʹݟ͑ΔσϑΥϧτҾ਺͕ͩɺ҉໧తʹ஋Λઃఆ͢Δ͜ͱʹͳΔ
    ͜ͷ҉໧తͳ஋ͷଘࡏʹؾ͔ͮͳ͍͜ͱͰ໰୊ʹͳΔ৔߹͕͋Δ ҆қʹσϑΥϧτҾ਺Λઃఆ͠ͳ͍ @Composable fun CenteredText() { Column { Text( text = "தԝἧ͍͑ͨ͠จࣈྻ", textAlign = TextAlign.Center, modifier = Modifier .align(Alignment.CenterHorizontally) .padding(32.dp) ) } } ྫɿ5FYUͷதԝἧ͑ UFYU"MJHOͷࢦఆ͕ඞཁͩͬͨ
51. Ұݟศརʹݟ͑ΔσϑΥϧτҾ਺͕ͩɺ҉໧తʹ஋Λઃఆ͢Δ͜ͱʹͳΔ
    ͜ͷ҉໧తͳ஋ͷଘࡏʹؾ͔ͮͳ͍͜ͱͰ໰୊ʹͳΔ৔߹͕͋Δ ҆қʹσϑΥϧτҾ਺Λઃఆ͠ͳ͍ @Composable fun CenteredText() { Column { Text( text = "தԝἧ͍͑ͨ͠จࣈྻ", textAlign = TextAlign.Center, modifier = Modifier .align(Alignment.CenterHorizontally) .padding(32.dp) ) } } ྫɿ5FYUͷதԝἧ͑ ʮσϑΥϧτҾ਺ʹ͠ͳ͚Ε͹ؾ෇͍ͨͷʹɾɾɾɾʯ
52. Ұݟศརʹݟ͑ΔσϑΥϧτҾ਺͕ͩɺ҉໧తʹ஋Λઃఆ͢Δ͜ͱʹͳΔ
    ͜ͷ҉໧తͳ஋ͷଘࡏʹؾ͔ͮͳ͍͜ͱͰ໰୊ʹͳΔ৔߹͕͋Δ ҆қʹσϑΥϧτҾ਺Λઃఆ͠ͳ͍ @Composable fun CenteredText() { Column { Text( text = "தԝἧ͍͑ͨ͠จࣈྻ", textAlign = TextAlign.Center, modifier = Modifier .align(Alignment.CenterHorizontally) .padding(32.dp) ) } } ྫɿ5FYUͷதԝἧ͑ ஋Λ౎౓ߟ͑Δ͜ͱ͕༗ӹͳ৔߹ɺσϑΥϧτҾ਺Λઃఆ͠ͳ͍ ʮσϑΥϧτҾ਺ʹ͠ͳ͚Ε͹ؾ෇͍ͨͷʹɾɾɾɾʯ
53. ݩʑίϯϙʔωϯτʹؔ࿈ͨ͠Ϋϥε͕ଘࡏ͍ͯͨ͠ΓɺҾ਺͕૿͑ͯ͘ΔͱҰͭͷΫϥεͰҾ਺Λ·ͱΊͨ͘ͳΔ σʔλΫϥεͰҾ਺Λ·ͱΊΔ΂͖͔ @Composable fun HouseHeader( name: String, address: String, ) ϑϥοτʹॻ͘ @Composable fun HouseHeader( house: House, ) ΫϥεͰ·ͱΊΔ data class House( val name: String, val address: String, )
54. ݩʑίϯϙʔωϯτʹؔ࿈ͨ͠Ϋϥε͕ଘࡏ͍ͯͨ͠ΓɺҾ਺͕૿͑ͯ͘ΔͱҰͭͷΫϥεͰҾ਺Λ·ͱΊͨ͘ͳΔ
    ͕ɺجຊతʹ͸ϑϥοτʹॻ͍ͨ΄͏͕ྑ͍ σʔλΫϥεͰҾ਺Λ·ͱΊΔ΂͖͔ @Composable fun HouseHeader( name: String, address: String, ) ϑϥοτʹॻ͘ 👍 @Composable fun HouseHeader( house: House, ) ΫϥεͰ·ͱΊΔ data class House( val name: String, val address: String, )
55. Ϋϥεʹ·ͱΊͨ৔߹ɺఆٛΛݟͳ͍ͱίϯϙʔωϯτʹඞཁͳ஋͕Θ͔ΒͣɺϫϯΫογϣϯڬΉ͜ͱʹͳΔ data class House( val name: String, val address: String, ) σʔλΫϥεͰҾ਺Λ·ͱΊΔ΂͖͔ɿՄಡੑ )PVTFͷఆٛΛݟΔ·ͰΘ͔Βͳ͍ Ұ໨ͰԿ͕ඞཁ͔Θ͔Δ @Composable fun HouseHeader( name: String, address: String, ) @Composable fun HouseHeader( house: House, ) 👀
56. ίϯϙʔωϯτ಺Ͱࢀর͠ͳ͍ϑΟʔϧυ͕Ϋϥεʹؚ·ΕΔ৔߹ɺແҙຯʹ࠶ίϯϙʔζ͕૸ͬͯ͠·͏ σʔλΫϥεͰҾ਺Λ·ͱΊΔ΂͖͔ɿύϑΥʔϚϯε name,address͕มΘͬͨ ͱ͖͚ͩ࠶ίϯϙʔζ @Composable fun HouseHeader( name: String, address: String, )
57. ίϯϙʔωϯτ಺Ͱࢀর͠ͳ͍ϑΟʔϧυ͕Ϋϥεʹؚ·ΕΔ৔߹ɺແҙຯʹ࠶ίϯϙʔζ͕૸ͬͯ͠·͏ σʔλΫϥεͰҾ਺Λ·ͱΊΔ΂͖͔ɿύϑΥʔϚϯε name,address͕มΘͬͨ ͱ͖͚ͩ࠶ίϯϙʔζ data class House( val name: String, val address: String, ) @Composable fun HouseHeader( house: House, ) @Composable fun HouseHeader( name: String, address: String, )
58. ίϯϙʔωϯτ಺Ͱࢀর͠ͳ͍ϑΟʔϧυ͕Ϋϥεʹؚ·ΕΔ৔߹ɺແҙຯʹ࠶ίϯϙʔζ͕૸ͬͯ͠·͏ σʔλΫϥεͰҾ਺Λ·ͱΊΔ΂͖͔ɿύϑΥʔϚϯε name,address͕มΘͬͨ ͱ͖͚ͩ࠶ίϯϙʔζ data class House( val name: String, val address: String, val imageUrl: String, ) @Composable fun HouseHeader( house: House, ) @Composable fun HouseHeader( name: String, address: String, )
59. ίϯϙʔωϯτ಺Ͱࢀর͠ͳ͍ϑΟʔϧυ͕Ϋϥεʹؚ·ΕΔ৔߹ɺແҙຯʹ࠶ίϯϙʔζ͕૸ͬͯ͠·͏ σʔλΫϥεͰҾ਺Λ·ͱΊΔ΂͖͔ɿύϑΥʔϚϯε name,address͕มΘͬͨ ͱ͖͚ͩ࠶ίϯϙʔζ data class House( val name: String, val address: String, val imageUrl: String, ) @Composable fun HouseHeader( house: House, ) @Composable fun HouseHeader( name: String, address: String, ) imageUrl͕มΘͬͨͱ͖ɺ ແҙຯʹ࠶ίϯϙʔζ
60. ΫϥεͷϓϩύςΟ͕૿͑ͨࡍɺͦͷϓϩύςΟͱ͸ແؔ܎ͳίϯϙʔωϯτͷϓϨϏϡʔ͕ΤϥʔʹͳΔ ϓϨϏϡʔ͕ո͍͠ઃܭΛᖰΓग़͢ @Composable fun HouseHeader( house: House, ) data class House( val name: String, val address: String, val imageUrl: String, )
61. ΫϥεͷϓϩύςΟ͕૿͑ͨࡍɺͦͷϓϩύςΟͱ͸ແؔ܎ͳίϯϙʔωϯτͷϓϨϏϡʔ͕ΤϥʔʹͳΔ ϓϨϏϡʔ͕ո͍͠ઃܭΛᖰΓग़͢ @Preview @Composable fun PreviewHouseHeader() { HouseHeader( House( name = "House", address = "Address", ) ) } @Composable fun HouseHeader( house: House, ) data class House( val name: String, val address: String, val imageUrl: String, )
62. @Preview @Composable fun PreviewHouseHeader() { HouseHeader( House( name = "House", address = "Address", ) ) } ΫϥεͷϓϩύςΟ͕૿͑ͨࡍɺͦͷϓϩύςΟͱ͸ແؔ܎ͳίϯϙʔωϯτͷϓϨϏϡʔ͕ΤϥʔʹͳΔ ϓϨϏϡʔ͕ո͍͠ઃܭΛᖰΓग़͢ ͜͜ʹimageUrl͕ͳ͍ͷͰϏϧυΤϥʔ @Composable fun HouseHeader( house: House, ) data class House( val name: String, val address: String, val imageUrl: String, )
63. ίϯϙʔωϯτ͕Կॏʹ΋ωετ͢Δͱ͖ɺόέπϦϨʔͷΑ͏ʹ
    ஋Λதܧ͢ΔͨΊʹίϯϙʔωϯτͷҾ਺͕૿͑ͯ͠·͏ 1SPQFSUZ
    ESJMMJOH BookingScreen ScheduleSection Schedule CheckinRow checkinDateTime checkinDateTime checkinDateTime ͜ͷลͰ͸checkinDateTime͸
    ௚઀࢖͏Θ͚Ͱ͸ͳ͍
64. લड़ͷ௨Γɺجຊతʹ͸ඞཁͳϓϩύςΟΛϑϥοτʹྻڍͨ͠΄͏͕͍͍
    ʢ1SPQFSUZ
    ESJMMJOHͰߏΘͳ͍ʣ
    ΫϥεΛ࡞Δ͜ͱͰҙຯͷ͋ΔάϧʔϓԽ͕Ͱ͖ΔͷͰ͋Ε͹ɺΫϥεʹू໿͢Δͷ΋͋Γ 1SPQFSUZ
    ESJMMJOH͢΂͖͔
65. લड़ͷ௨Γɺجຊతʹ͸ඞཁͳϓϩύςΟΛϑϥοτʹྻڍͨ͠΄͏͕͍͍
    ʢ1SPQFSUZ
    ESJMMJOHͰߏΘͳ͍ʣ
    ΫϥεΛ࡞Δ͜ͱͰҙຯͷ͋ΔάϧʔϓԽ͕Ͱ͖ΔͷͰ͋Ε͹ɺΫϥεʹू໿͢Δͷ΋͋Γ 1SPQFSUZ
    ESJMMJOH͢΂͖͔ @Composable fun BookingOverview( mealSectionTitle: String, mealSectionSubtitle: String, scheduleSectionTitle: String, scheduleSectionSubtitle: String, meals: List<Meal>, schedule: Schedule, ) @Composable fun BookingOverview( mealSectionUiState: MealSectionUiState, scheduleSectionUiState: ScheduleSectionUiState, ) Ұ໨ͰΘ͔Δ͜ͱͰͷՄಡੑɹʻɹҙຯతʹ·ͱ·͍ͬͯΔ͜ͱͰͷՄಡੑ
66. ·ͱΊ ຊจ ຊจ γϯϓϧʹͰ͖ΔύλʔϯɺͰ͖ͳ͍ύλʔϯΛݟ෼͚Δ
    ˔
    Ͳ͏࢖ΘΕΔίϯϙʔωϯτͳͷ͔
    ˔
    ϞδϡʔϧΛ෼͚ͯՄࢹੑΛ੍ޚ͢Δ ॊೈͳ"1*Λ࡞Δ
    ˔
    TUBUF
    IPJTUJOH͢΂͖͔
    ˔
    TMPU
    "1*Λ࢖͏͢΂͖͔
    ˔
    %4-ͰͷTMPU
    "1*ͷ׆༻
    ˔
    σϑΥϧτҾ਺ͷ׆༻ͱةݥੑ
    ˔
    Ҿ਺ΛΫϥεͰ·ͱΊΔ΂͖͔