Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Conditional Contents in SwiftUI

Conditional Contents in SwiftUI

SwiftUIでの条件分岐使うTips

Yasuharu Yanamura

August 27, 2019
Tweet

More Decks by Yasuharu Yanamura

Other Decks in Technology

Transcript

  1. • ͜͏ॻ͘ͱɾɾɾ var body: some View { if imageName.isEmpty {

    return Text("no image") } else { return Image(imageName) } } ৚݅෼ذͰViewΛग़͠෼͚
  2. • ίϯύΠϧΤϥʔʂ 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Λग़͠෼͚
  3. 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 0QBRVF3FTVMU5ZQF ͳͷͰͭͷܕΛฦ͞ ͳ͍ͱ͇
  4. var body: some View { if imageName.isEmpty { return Text("no

    image") } else { return Text(imageName) } } ಉ͡ܕΛฦ͢ͳΒ0,
  5. ৚݅෼ذΛ࢖͏ํ๏ 1 • Group / HStack / VStack / ZStack

    var body: some View { Group { if imageName.isEmpty { Text("no image") } else { Image(imageName) } } }
  6. ৚݅෼ذΛ࢖͏ํ๏ 2 • @ViewBuilder @ViewBuilder var body: some View {

    if imageName.isEmpty { Text("no image") } else { Image(imageName) } }
  7. ৚݅෼ذΛ࢖͏ํ๏ 3 • ViewBuilder.buildEither() var body: some View { imageName.isEmpty

    ? ViewBuilder.buildEither(first: Text("no image")) : ViewBuilder.buildEither(second: Image(imageName)) }
  8. ͭ·Γ @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)) }
  9. 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 }
  10. ֬ೝͯ͠ΈΔ @ViewBuilder var body: some View { if imageName.isEmpty {

    Text("Hello") } else { Image(imageName) } } _ConditionalContent<Text, Image> • ໭Γ஋
  11. ݱ࣌఺Ͱ͸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Λ࢖͏ͱίϯύΠϧ͸௨Δ͕ಈ͔ͳ͍
  12. ݱ࣌఺Ͱ͸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
  13. Ͳ͏ͯ͠΋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")) } }
  14. ͭ·Γ @ViewBuilder var body: some View { if !imageName.isEmpty {

    Image(imageName) } } var body: some View { ViewBuilder.buildIf( !imageName.isEmpty ? Image(imageName) : nil ) }
  15. ͭ·Γ @ViewBuilder var body: some View { Text("Hello") Image(imageName) }

    var body: some View { ViewBuilder.buildBlock( Text("Hello"), Image(imageName) ) }
  16. 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 } <<ུ>>