ZStackとbackgroundの使い分け / Comparing ZStack and background

株式会社アルク
社内勉強会#3資料(公開用)

テーマ
好きなViewやmodifierの紹介

参考
・https://developer.apple.com/documentation/swiftui/adding-a-background-to-your-view
・https://developer.apple.com/documentation/swiftui/zstack
・https://developer.apple.com/documentation/swiftui/view/background(_:ignoressafeareaedges:)
・https://developer.apple.com/documentation/swiftui/view/background(alignment:content:)
・https://zenn.dev/samekard_dev/articles/5737c837b8c4a4

Transcript

1. ;4UBDLͱCBDLHSPVOEΛ
   ࢖͍෼͚͍ͨ ࣾ಺ษڧձ ؠӬ
   ྋ
2. ࣗݾ঺հ w ؠӬ
   ྋ
   w ΞϓϦ։ൃͷઐ໳ֶߍ
   w ೥ؒ4XJGU6*ॻ͍ͯ·ͨ͠
   w "QQMF 7JTJPO 1SP
   ങ͍·ͨ͠
   w ࣸਅ͸7JTJPO͕ੜ੒ͨ͠إͰ͢
3. 7JFXΛॏͶΔ࣌ɺԿΛ࢖͍·͔͢ʁ w ;4UBDL
   w CBDLHSPVOE
   w PWFSMBZ
   w TBGF"SFB*OTFU 􀐟
4. 7JFXΛॏͶΔ࣌ɺԿΛ࢖͍·͔͢ʁ w ;4UBDL
   w CBDLHSPVOE
   w PWFSMBZ
   w TBGF"SFB*OTFU 􀐟
5. υΩϡϝϯτΛಡΉ :PV
   DBO
   BEE
   B
   WJFX
   BT
   B
   CBDLHSPVOE
   XJUI
   UIF CBDLHSPVOE @BMJHONFOU WJFX
   NPEJ fi FS
   5P
   BEE
   B
   CBDLHSPVOE
   VOEFS
   NVMUJQMF
   WJFXT
   PS
   UP
   IBWF
   B
   CBDLHSPVOE
   MBSHFS
   UIBO
   BO
   FYJTUJOH
   WJFX
   ZPV
   DBO
   MBZFS
   UIF
   WJFXT
   CZ
   QMBDJOH
   UIFN
   XJUIJO
   B ;4UBDL
   BOE
   QMBDF
   UIF
   WJFX
   ZPV
   XBOU
   UP
   CF
   JO
   UIF
   CBDLHSPVOE
   BU
   UIF
   CPUUPN
   PG
   UIF
   WJFX
   TUBDL
   :PV
   DBO
   TQFDJGZ
   UIBU
   B
   CBDLHSPVOE
   WJFX
   TIPVME
   JHOPSF
   UIF
   TBGF
   BSFB
   JOTFUT
   UP
   FYUFOE
   UIF
   CBDLHSPVOE
   UP
   TPNF
   PS
   BMM
   FEHFT IUUQTEFWFMPQFSBQQMFDPNEPDVNFOUBUJPOTXJGUVJBEEJOHBCBDLHSPVOEUPZPVSWJFX
6. υΩϡϝϯτΛಡΉ 7JFXͱҟͳΔେ͖͞ͷഎܠΛ௥Ճ͍ͨ͠৔߹
   ‣ ;4UBDL
   7JFXͱಉ͡େ͖͞ͷഎܠΛ௥Ճ͍ͨ͠৔߹
   ‣ CBDLHSPVOE
7. 7JFXͱҟͳΔେ͖͞ͷഎܠ Text("Text") .frame(maxWidth: .infinity, maxHeight: .infinity) .background( Color.orange ) 􀁠
8. 7JFXͱҟͳΔେ͖͞ͷഎܠ ZStack { Color.orange .ignoresSafeArea() Text("Text") } 􀁢
9. 7JFXͱಉ͡େ͖͞ͷഎܠ ZStack { Color.orange Text("Text") } .fixedSize(horizontal: true, vertical: true) 􀁠
10. 7JFXͱಉ͡େ͖͞ͷഎܠ Text("Text") .background { Color.orange } 􀁢
11. CBDLHSPVOEͷछྨ ͜͜·ͰͷεϥΠυͰछྨͷCBDLHSPVOE͕ग़͖ͯ·ͨ͠
    .background { Color.orange } .background( Color.orange )
12. CBDLHSPVOE
    \^ @inlinable public func background<V>(alignment: Alignment = .center, @ViewBuilder content: () -> V) -> some View where V : View VStack { Spacer() Text("Text") .padding() .frame(maxWidth: .infinity) .background { Color.orange } }
13. CBDLHSPVOE @inlinable public func background<S>(_ style: S, ignoresSafeAreaEdges edges: Edge.Set = .all) -> some View where S : ShapeStyle VStack { Spacer() Text("Text") .padding() .frame(maxWidth: .infinity) .background( Color.orange ) }
14. CBDLHSPVOE Text("Text") .padding() .background(Color.orange) .clipShape(RoundedRectangle(co rnerRadius: 16))
15. CBDLHSPVOE Text("Text") .padding() .background( Color.orange, in: RoundedRectangle(cornerRadius: 16) )
16. ·ͱΊ ;4UBDLͱCBDLHSPVOEΛ࢖͍෼͚Δ͜ͱͰ
    w ϨΠΞ΢τ่Εͷ๷ࢭ
    w Մಡੑͷ޲্
17. ࢀߟ w IUUQTEFWFMPQFSBQQMFDPNEPDVNFOUBUJPOTXJGUVJBEEJOHB CBDLHSPVOEUPZPVSWJFX
    
    w IUUQTEFWFMPQFSBQQMFDPNEPDVNFOUBUJPOTXJGUVJ[TUBDL
    w IUUQTEFWFMPQFSBQQMFDPNEPDVNFOUBUJPOTXJGUVJWJFX CBDLHSPVOE @JHOPSFTTBGFBSFBFEHFT
    w IUUQTEFWFMPQFSBQQMFDPNEPDVNFOUBUJPOTXJGUVJWJFX CBDLHSPVOE BMJHONFOUDPOUFOU
    w IUUQT[FOOEFWTBNFLBSE@EFWBSUJDMFTDCDB