モーダルの遷移を理解する

by Yuki Yasoshima

Slide 1

Slide 1 text

ϞʔμϧͷભҠΛཧղ͢Δ :VLJ:BTPTIJNB !ZBTP@TBO

Slide 2

Slide 2 text

͸͡Ίʹ w ͕࣌ؒ୹͍ͷͰɺओʹ4XJGU6*ʹߜͬͯ࿩͠·͢ w ಛʹݴٴ͍ͯ͠ͳ͚Ε͹ɺJ04J1BE04ͷγϛϡϨʔλͰಈ࡞֬ೝͨ͠ ڍಈΛ΋ͱʹ͍ͯ͠·͢

Slide 3

Slide 3 text

࿩͢͜ͱ w Ϟʔμϧʹ͍ͭͯ w Ϟʔμϧͷ໰୊఺ w Ϟʔμϧͷ໰୊Λղܾ͢Δ

Slide 4

Slide 4 text

͜ͷτʔΫͰ࢖͏༻ޠ

Slide 5

Slide 5 text

Ϟʔμϧ w ͜ͷτʔΫͰ͸J04ͷը໘શମͷ্ʹ෴ͬͯผͷը໘Λલ໘ʹදࣔ͢ΔػೳΛ ද͢ w 4IFFU΍"MFSUͳͲͷ͜ͱ w ࣙॻతͳҙຯ͸ؾʹ͠ͳ͍

Slide 6

Slide 6 text

σʔλιʔε w !4UBUF΍0CTFSWBCMF0CKFDU΍ɺ͞Βʹͦͷઌʹ͋Δ7JFXΛදࣔ͢ΔͨΊͷ σʔλ w ͜ͷτʔΫͰ͸ɺ7JFXͱσʔλιʔε͘Β͍ͷϨΠϠʔ෼͚Ͱ࿩͢

Slide 7

Slide 7 text

Ϟʔμϧʹ͍ͭͯ

Slide 8

Slide 8 text

Ϟʔμϧͷछྨ w 4IFFU w 'VMM4DSFFO$PWFS w "MFSU w 1PQPWFS w $PO fi SNBUJPO%JBMPHʢ"DUJPO4IFFUʣ w .FOV1JDLFS

Slide 9

Slide 9 text

Ϟʔμϧͷ֊૚ w Ϟʔμϧʹ͸֊૚͕͋Δ w 4IFFUɾ'VMM4DSFFO$PWFSɾ1PQPWFS͸ෳ਺֊૚ੵΈॏͶΒΕΔ

Slide 10

Slide 10 text

ϧʔτͷ6*֊૚ 5BC /BWJHBUJPO 7JFX 5FYU *NBHF -JTU 8JOEPX Ϟʔμϧͷ֊૚ 4IFFUͷ৔߹

Slide 11

Slide 11 text

Ϟʔμϧୈ֊૚ 5BC /BWJHBUJPO 7JFX 5FYU *NBHF -JTU ։͘ 8JOEPX Ϟʔμϧͷ֊૚ 4IFFUͷ৔߹ ϧʔτͷ6*֊૚ 5BC /BWJHBUJPO 7JFX 5FYU *NBHF -JTU

Slide 12

Slide 12 text

Ϟʔμϧୈ֊૚ 5BC /BWJHBUJPO 7JFX 5FYU *NBHF -JTU 8JOEPX 5BC /BWJHBUJPO 7JFX 5FYU *NBHF -JTU Ϟʔμϧͷ֊૚ 4IFFUͷ৔߹ ❌։͚ͳ͍ ϧʔτͷ6*֊૚

Slide 13

Slide 13 text

Ϟʔμϧୈ֊૚ Ϟʔμϧୈ֊૚ 5BC /BWJHBUJPO 7JFX 5FYU *NBHF -JTU ։͘ 8JOEPX 5BC /BWJHBUJPO 7JFX 5FYU *NBHF -JTU Ϟʔμϧͷ֊૚ 4IFFUͷ৔߹ ϧʔτͷ6*֊૚

Slide 14

Slide 14 text

5BC /BWJHBUJPO 7JFX 5FYU *NBHF -JTU 8JOEPX Ϟʔμϧͷ֊૚ 4IFFUͷ৔߹ ด͡Δ ϧʔτͷ6*֊૚

Slide 15

Slide 15 text

5BC /BWJHBUJPO 7JFX 5FYU *NBHF -JTU 8JOEPX Ϟʔμϧͷ֊૚ 4IFFUͷ৔߹ ❌ ด͡Εͳ͍ ϧʔτͷ6*֊૚

Slide 16

Slide 16 text

Ϟʔμϧͷର৅ w 1PQPWFSɾ$PO fi SNBUJPO%JBMPHͳͲ͸ ࢦࣔ͢͠ઌͷ7JFX͕ඞཁ w 4IFFUɾ'VMM4DSFFO$PWFSɾ"MFSUͳͲ ͸ը໘શମ͔Βग़Δʢಉ͡֊૚Ͱ͋Ε͹ NPEJ fi FSΛ෇͚Δ7JFX͸Ͳ͜ʹͯ͠΋ಈ ࡞ʹҧ͍͸ͳ͍ʣ

Slide 17

Slide 17 text

ϞʔμϧͷભҠͷίʔυ JT1SFTFOUFE struct ContentView: View { @State var isPresented: Bool = false var body: some View { Button(“Show") { isPresented = true } .sheet(isPresented: $isPresented) { ... } } } όΠϯυͨ͠஋Λมߋ͢ΔͱભҠ #PPMͷ஋ΛόΠϯυ͢Δ

Slide 18

Slide 18 text

ϞʔμϧͷભҠͷίʔυ JUFN struct ContentView: View { @State var item: Item? = nil var body: some View { Button("Show Sheet") { item = .foo } .sheet(item: $item) { ... } } } όΠϯυͨ͠஋Ληοτ͢ΔͱભҠ ೚ҙͷ0QUJPOBMͷ஋ΛόΠϯυ͢Δ

Slide 19

Slide 19 text

։͘ ด͡Δ ด͡ऴΘΔ ભҠͷ࣌ؒ࣠ͷྲྀΕ ભҠͷঢ়ଶ JT1SFTFOUFEGBMTF ։͖ऴΘΔ JT1SFTFOUFEUSVF

Slide 20

Slide 20 text

։͘ ด͡Δ ด͡ऴΘ͔ͬͯΒग़Δ ͔΋ ϞʔμϧදࣔதͷભҠ ભҠͷঢ়ଶ ଞͷϞʔμϧ͸ग़ͤͳ͍

Slide 21

Slide 21 text

खಈͰด͡Δ w ϞʔμϧͷछྨʹΑͬͯɺεϫΠϓ΍ϘλϯλοϓͳͲͰด͡ΒΕΔ w 4IFFUˠεϫΠϓ w "MFSUͳͲˠϘλϯλοϓ w 1PQPWFSͳͲˠ֎ଆΛλοϓ

Slide 22

Slide 22 text

.FOV w બ୒ࢶͷ6*͸1PQPWFSతͳϞʔμϧͷ Ұछ w JT1SFTFOUFEͳͲ͸ͳ͘ɺϢʔβʔૢ ࡞ͰͷΈભҠ͢Δ

Slide 23

Slide 23 text

։͖ํ ด͡ํ ্ͷ֊૚ දࣔઌͷ7JFX 4IFFU όΠϯυ όΠϯυ εϫΠϓ ։͚Δ ͍Βͳ͍ 'VMM4DSFFO$PWFS όΠϯυ όΠϯυ ։͚Δ ͍Βͳ͍ 1PQPWFS όΠϯυ όΠϯυ ֎Λλοϓ ։͚Δ ͍Δ "MFSU όΠϯυ όΠϯυ Ϙλϯબ୒ ։͚ͳ͍ ͍Βͳ͍ $PO fi SNBUJPO %JBMPH όΠϯυ όΠϯυ Ϙλϯબ୒ ։͚ͳ͍ ͍Δ .FOV λοϓ Ϙλϯબ୒ ֎Λλοϓ ։͚ͳ͍ Ϟʔμϧͷछྨ

Slide 24

Slide 24 text

ϞʔμϧͰ΍Γͨ͘ͳΔ͜ͱ w %FFQ-JOL΍ඇಉظॲཧͷ׬ྃ࣌ͳͲɺϢʔβʔૢ࡞Ҏ֎ͷλΠϛϯάͰϞ ʔμϧͷભҠΛ͍ͨ͠ w ϞʔμϧͷσʔλιʔεΛมߋͨ͠Βɺͦͷঢ়ଶ͕ͦͷ··6*ʹ൓ө͞ΕΔΑ ͏ʹ͍ͨ͠ w ͦΕΒΛ࣮ݱ͠Α͏ͱ͢Δͱɺ৭ʑ໰୊͕ى͖Δ

Slide 25

Slide 25 text

Ϟʔμϧͷ໰୊఺

Slide 26

Slide 26 text

var body: some View { Button("Show") { isFirstPresented = true isSecondPresented = true isThirdPresented = true } .sheet(isPresented: $isFirstPresented) { Text("1") .sheet(isPresented: $isSecondPresented) { Text("2") .sheet(isPresented: $isThirdPresented) { Text("3") } ... ֊૚Ҏ্ಉ࣌ʹ։͚ͳ͍ ❌ͭ໨͸։͔ͳ͍

Slide 27

Slide 27 text

J04Ҏલ͸ෳ਺֊૚ಉ࣌ʹด͡Εͳ͍ var body: some View { Button("Show") { ... } .sheet(isPresented: $isFirstPresented) { Text("1") .sheet(isPresented: $isSecondPresented) { Button("Close") { isFirstPresented = false } ... J04͸0, ❌J04͸શ෦ด͡ͳ͍

Slide 28

Slide 28 text

var body: some View { ... .sheet(isPresented: $isSheetPresented) { Button("Switch to FullScreen") { isSheetPresented = false isFullPresented = true } } .fullScreenCover( isPresented: $isFullPresented) { Text("Full Screen") } } Ϟʔμϧͷ੾Γସ͑ 'VMM4DSFFO͕4IFFUͰදࣔ͞ΕΔ ❌4IFFUͰදࣔ͞ΕΔ

Slide 29

Slide 29 text

var body: some View { ... .sheet(isPresented: $isSheetPresented) { Button("Show Alert") { isSheetPresented = false isAlertPresented = true } } .alert("Alert", isPresented: $isAlertPresented) { ... } } Ϟʔμϧͷ੾Γସ͑ "MFSU͕දࣔ͞Εͳ͍ ❌දࣔ͞Εͳ͍

Slide 30

Slide 30 text

Ϟʔμϧͷ੾Γସ͑ 1PQPWFSܥ w ਧ͖ग़͠ͷ֎ଆ͸Լͷ֊૚ͷ7JFXʹ΋ λοϓ͕௨Δ w 1PQPWFSΛ։͍ͨ··ɺ4IFFUΛλοϓ ͯ͠։͜͏ͱͯ͠΋։͚ͳ͍ w σʔλιʔεͱ7JFXͷ੔߹ੑ͕औΕͳ ͘ͳΔͱ౓ͱ։͚ͳ͘ͳΔ ❌λοϓͰ͖Δ͕ 4IFFU͸දࣔ͞Εͳ͍

Slide 31

Slide 31 text

var body: some View { Button("Freeze") { isFirstPresented = true isSecondPresented = true Task { try await Task.sleep(for: .milliseconds(100)) isFirstPresented = false } } .sheet(isPresented: $isFirstPresented) { ... .sheet(isPresented: $isSecondPresented) { ... } ભҠதʹด͡Α͏ͱ͢ΔͱϑϦʔζ ❌ϑϦʔζ͢Δ

Slide 32

Slide 32 text

var body: some View { Button("Crash") { item = .one Task { try await Task.sleep(for: .milliseconds(100)) item = .two try await Task.sleep(for: .milliseconds(100)) item = .three } } .sheet(item: $item, content: { item in ... }) } Ϟʔμϧ੾Γସ͑தʹ͞Βʹ੾Γସ͑ΔͱΫϥογϡ ❌Ϋϥογϡ͢Δ

Slide 33

Slide 33 text

Ϟʔμϧͷ໰୊Λղܾ͢Δ

Slide 34

Slide 34 text

ํ਑ w σʔλιʔεͰϞʔμϧͷঢ়ଶΛηοτͨ͠Βɺͦͷ··6*ʹ൓ө͞ΕΔΑ͏ ʹ͍ͨ͠ w J04Ҏ߱Λର৅ʹͯ͠ด͡Δ࣌ͷ໰୊Λճආ w ϞʔμϧͷભҠதʹผͷભҠ͕ߦΘΕͳ͍Α͏ʹͯ͠໰୊Λճආ w .FOVͷϞʔμϧ͕։͍͍ͯͯ΋ଞͷϞʔμϧ͕։͚ΔΑ͏ʹ͢Δ

Slide 35

Slide 35 text

enum Modal { case sheet(Item) case alert(...) ... } σʔλιʔε .PEBM 7JFX 1PQPWFS OJM "MFSU OJM 4IFFU OJM Ϟʔμϧͷঢ়ଶΛͭͷ஋Ͱද͢ ม׵ 1PQPWFS OJM OJM

Slide 36

Slide 36 text

enum Modal { case sheet(Item) case alert(...) ... } σʔλιʔε .PEBM TIFFU GPP 7JFX 1PQPWFS OJM "MFSU OJM 4IFFU GPP Ϟʔμϧͷঢ়ଶΛͭͷ஋Ͱද͢ ม׵ 1PQPWFS OJM

Slide 37

Slide 37 text

enum Modal { case sheet(Item) case alert(...) ... } σʔλιʔε .PEBM BMFSU CBS 7JFX 1PQPWFS OJM "MFSU CBS 4IFFU OJM Ϟʔμϧͷঢ়ଶΛͭͷ஋Ͱද͢ ม׵ 1PQPWFS OJM

Slide 38

Slide 38 text

σʔλιʔεͷ൓өΛ஗ΒͤΔ ։͘ ด͡Δ ։͘ ݩσʔλ όΠϯυ͢Δσʔλ CBS ભҠͷঢ়ଶ OJM OJM GPP GPP CBS OJM

Slide 39

Slide 39 text

σʔλιʔεͷ൓өΛ஗ΒͤΔ ։͘ ด͡Δ ։͘ ݩσʔλ όΠϯυ͢Δσʔλ GPP CBS OJM GPP OJM IPH ભҠͷঢ়ଶ IPH OJM

Slide 40

Slide 40 text

։͘ ด͡Δ ։͘ ݩσʔλ όΠϯυ͢Δσʔλ GPP OJM OJM CBS σʔλιʔεͷ൓өΛ஗ΒͤΔ ભҠͷঢ়ଶ OJM CBS GPP

Slide 41

Slide 41 text

.FOVΛͳΜͱ͔͢Δ w JT1SFTFOUFE͸ͳ͍͕ɺ਌ͷ7JFX͔Β .FOVΛফ͢͜ͱͰਧ͖ग़͠Λඇදࣔʹ Ͱ͖Δ w ϞʔμϧΛදࣔ͢Δલʹ.FOVΛೖΕସ ͑ͯด͓ͯ͘͡ struct MenuView: View { ... var body: some View { if flag { Menu(...) } else { Menu(...) } } }

Slide 42

Slide 42 text

.FOVΛดͨ͡ޙͷભҠ w .FOVΛೖΕସ͑ͨͷͱಉ࣌ʹผͷϞʔμϧΛදࣔ͠Α͏ͱͯ͠΋ɺදࣔ͞ Εͳ͍͜ͱ͕͋Δ w .FOVΛด͔ͯ͡ΒϞʔμϧͷભҠΛ։࢝͢Δ·Ͱʹগؒ͠Λ։͚Δ

Slide 43

Slide 43 text

7JFXͷߋ৽ 4XJGU6*ͷ7JFXͷߋ৽αΠΫϧ 7JFX͕ߋ৽͞ΕΔλΠϛϯά

Slide 44

Slide 44 text

σʔλιʔεͷมߋ σʔλιʔεͷมߋ σʔλιʔεͷมߋ 4XJGU6*ͷ7JFXͷߋ৽αΠΫϧ 7JFXͷߋ৽ ఆظతʹ·ͱΊͯσʔλΛ औಘͯ͠ɺࠩ෼͕͋Ε͹ 7JFX͕ߋ৽͞ΕΔ

Slide 45

Slide 45 text

.FOVඇදࣔޙͷϞʔμϧ൓өλΠϛϯά ❌ ⭕ 7JFXͷߋ৽ .FOVΛด͡Δ ࣮ࡍʹ.FOV͕ด͡ΒΕΔ ผͷϞʔμϧͷ ࣮ࡍͷදࣔ։࢝

Slide 46

Slide 46 text

ભҠͷλΠϛϯάऔಘ 4IFFU'VMM4DSFFO$PWFS1PQPWFS ։͘ ด͡Δ ભҠͷঢ়ଶ 7JFX$POUSPMMFSͷ WJFX%JE"QQFBS Ϟʔμϧ಺ͷ PO%JTBQQFBS

Slide 47

Slide 47 text

ભҠͷλΠϛϯάऔಘ ։͘ ด͡Δ ભҠͷঢ়ଶ "MFSU$PO fi SNBUJPO%JBMPH PO"QQFBS PO%JTBQQFBS ඵ͘Β͍

Slide 48

Slide 48 text

ભҠͷλΠϛϯάऔಘ ։͘ ด͡Δ ભҠͷঢ়ଶ "MFSU$PO fi SNBUJPO%JBMPH PO"QQFBS PO%JTBQQFBS Ϙλϯλοϓ͞ΕͨΒ ڧ੍తʹดͨ͜͡ͱʹ͢Δ ඵ͘Β͍

Slide 49

Slide 49 text

·ͱΊ Ϟʔμϧͷ໰୊ w Ϟʔμϧ͕։͚ͳ͍ͱ౓ͱ։͚ͳ͘ͳΔ w σʔλιʔεΛมߋ͢ΔλΠϛϯάʹΑͬͯΫϥογϡ΍ϑϦʔζ͕ى͖Δ w J04ҎલͰ͸ෳ਺֊૚ͷϞʔμϧΛಉ࣌ʹด͡Εͳ͍ w .FOVʹ͸ભҠͷঢ়ଶΛ؅ཧ͢Δ"1*͕ͳ͍

Slide 50

Slide 50 text

·ͱΊ Ϟʔμϧͷ໰୊ͷղܾ w J04Ҏ߱ʹݶఆ͢Δʢด͡Δͷָ͕ʣ w ಉ͡֊૚ͷϞʔμϧͷσʔλιʔεΛͭʹ·ͱΊΔ w ϞʔμϧભҠத͸ผͷભҠΛ͸͡Ίͳ͍ w .FOV͸਌ͷ7JFX͔ΒೖΕସ͑ͯด͡ɺ࣍ͷϞʔμϧͷભҠ։࢝Λ஗ΒͤΔ

Slide 51

Slide 51 text

αϯϓϧίʔυ Ϟʔμϧͷ໰୊ͷ࠶ݱ IUUQTHJUIVCDPNPCKFDUJWFBVEJP.PEBM1SPCMFN Ϟʔμϧͷ໰୊Λղܾͨ͠ྫ IUUQTHJUIVCDPNPCKFDUJWFBVEJP.PEBM"SDIJUFDUVSF