Conditional Contents in SwiftUI

SwiftUIでの条件分岐使うTips

Transcript

1. Conditional Content in SwiftUI Potatotips #64 2019/8/27 Yasuharu Yanamura
2. ࣗݾ঺հ • Yasuharu Yanamura/༄ଜ ߁੖ • ɹ@yanamura_ɹɹ@yanamura • ίωώτגࣜձࣾ • ϚϚϦiOSΞϓϦ։ൃ
3. 2020/2 potatotips #69 ίωώτͰ։࠵༧ఆʂ
4. + if / switch
5. ৚݅ͰViewΛग़͠෼͚͍ͨ ͱ͍͏ͱ͖͕ͨ·ʹ͋Δ
6. • ͜͏ॻ͘ͱɾɾɾ var body: some View { if imageName.isEmpty { return Text("no image") } else { return Image(imageName) } } ৚݅෼ذͰViewΛग़͠෼͚
7. • ίϯύΠϧΤϥʔʂ var body: some View { if imageName.isEmpty { return Text("no image") } else { return Image(imageName) } } ! Function declares an opaque return type, but the return statements in its body do not have matching underlying types ৚݅෼ذͰViewΛग़͠෼͚
8. var body: some View { if imageName.isEmpty { return Text("no image") } else { return Image(imageName) } } ! Function declares an opaque return type, but the return statements in its body do not have matching underlying types 0QBRVF
   3FTVMU
   5ZQF
   ͳͷͰͭͷܕΛฦ͞ ͳ͍ͱ͇
9. var body: some View { if imageName.isEmpty { return Text("no image") } else { return Text(imageName) } } ಉ͡ܕΛฦ͢ͳΒ0,
10. ղܾํ๏
11. ৚݅෼ذΛ࢖͏ํ๏ 1 • Group / HStack / VStack / ZStack var body: some View { Group { if imageName.isEmpty { Text("no image") } else { Image(imageName) } } }
12. ৚݅෼ذΛ࢖͏ํ๏ 2 • @ViewBuilder @ViewBuilder var body: some View { if imageName.isEmpty { Text("no image") } else { Image(imageName) } }
13. ৚݅෼ذΛ࢖͏ํ๏ 3 • ViewBuilder.buildEither() var body: some View { imageName.isEmpty ? ViewBuilder.buildEither(first: Text("no image")) : ViewBuilder.buildEither(second: Image(imageName)) }
14. ͲΕΛ࢖ͬͯ΋ViewBuilderͷԸܙ
15. ͳͥViewBuilderΛ࢖͏ͱ ղܾ͢Δͷ͔
16. ViewBuilderͷ࢓૊Έ • ViewBuilder͸function builderͰ࣮૷ • function builder͸ίϯύΠϧ࣌ʹifจͷchainͩͬͨΒ buildEither(first:), buildEither(second:)Λ͔ͭ͏
17. ͭ·Γ @ViewBuilder var body: some View { if imageName.isEmpty { Text("Hello") } else { Image(imageName) } } var body: some View { imageName.isEmpty ? ViewBuilder.buildEither(first: Text("no image")) : ViewBuilder.buildEither(second: Image(imageName)) }
18. ViewBuilderͷbuildEither • _ConditionalContent<TrueContent,FalseContent>Λฦ͢ extension ViewBuilder { public static func buildEither<TrueContent, FalseContent>(first: TrueContent) -> _ConditionalContent<TrueContent, FalseContent> where TrueContent : View, FalseContent : View public static func buildEither<TrueContent, FalseContent>(second: FalseContent) -> _ConditionalContent<TrueContent, FalseContent> where TrueContent : View, FalseContent : View }
19. ֬ೝͯ͠ΈΔ @ViewBuilder var body: some View { if imageName.isEmpty { Text("Hello") } else { Image(imageName) } } _ConditionalContent<Text, Image> • ໭Γ஋
20. ͳͥViewBuilderΛ࢖͏ͱ ղܾ͢Δͷ͔ ↓ ViewBuilder͕৚݅෼ذΛ _ConditionalContent<,>ʹͯ͠Δ
21. ͔͠͠
22. ݱ࣌఺Ͱ͸NGͳέʔε • ❌ switch / if case / if let ... var body: some View { Group { switch foo { case a: Text("a") case b: Text("b") case c: Text("c") } } } ※@ViewBuilderΛ࢖͏ͱίϯύΠϧ͸௨Δ͕ಈ͔ͳ͍
23. ݱ࣌఺Ͱ͸NGͳέʔε • ❌ switch / if case / if let ... var body: some View { Group { switch foo { case a: Text("a") case b: Text("b") case c: Text("c") } } } var body: some View { Group { if foo == .a { Text("a") } else if foo == .b { Text("b") } else if foo == .c { Text("c") } } } • ⭕ if / else if /else
24. Ͳ͏ͯ͠΋if / else Ҏ֎͕࢖͍͍ͨ • AnyViewʹ͢Ε͹ͳΜͱ͔ͳΔ!? var body: some View { switch foo { case .a: return AnyView(Text("a")) case .b: return AnyView(Text("b")) case .c: return AnyView(Text("c")) } }
25. ·ͱΊ • ViewBuilderͷྗͰView಺Ͱ৚݅෼ذ͕࢖͑Δ • ͨͩ͠if / else ͷΈ • ࠷ѱAnyViewΛ࢖͑͹if elseҎ֎΋ɾɾ
26. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
27. Appendix
28. ifͷΈ
29. ViewBuilderͷ࢓૊Έ • function builder͸ίϯύΠϧ࣌ʹifจ୯ମ(chainͳ͠)ͩͬͨΒ buildIf()Λ͔ͭ͏
30. ͭ·Γ @ViewBuilder var body: some View { if !imageName.isEmpty { Image(imageName) } } var body: some View { ViewBuilder.buildIf( !imageName.isEmpty ? Image(imageName) : nil ) }
31. ViewBuilderͷbuildIf • Content?Λฦ͢ extension ViewBuilder { public static func buildIf<Content>(_ content: Content?) -> Content? where Content : View }
32. ৚݅෼ذͳ͠
33. ViewBuilderͷ࢓૊Έ • buildBlock()Λ͔ͭ͏
34. ͭ·Γ @ViewBuilder var body: some View { Text("Hello") Image(imageName) } var body: some View { ViewBuilder.buildBlock( Text("Hello"), Image(imageName) ) }
35. ViewBuilderͷbuildBlock • Ҿ਺(ཁૉ)ͷ਺͕ෳ਺ͷ৔߹TupleView<(,...,)>Λฦ͢ extension ViewBuilder { public static func buildBlock<C0, C1>(_ c0: C0, _ c1: C1) -> TupleView<(C0, C1)> where C0 : View, C1 : View public static func buildBlock<C0, C1, C2, C3, C4, C5, C6, C7, C8, C9>(_ c0: C0, _ c1: C1, _ c2: C2, _ c3: C3, _ c4: C4, _ c5: C5, _ c6: C6, _ c7: C7, _ c8: C8, _ c9: C9) -> TupleView<(C0, C1, C2, C3, C4, C5, C6, C7, C8, C9)> where C0 : View, C1 : View, C2 : View, C3 : View, C4 : View, C5 : View, C6 : View, C7 : View, C8 : View, C9 : View } <<ུ>>
36. ֬ೝͯ͠ΈΔ @ViewBuilder var body: some View { Text("Hello") Image(systemName: "circle") } TupleView<(Text, Image)> • ໭Γ஋