swiftui

SwiftUIでいこう!- スタンフォード大学Lecture 4: Game Logic 2

SwiftUIでいこう!- スタンフォード大学Lecture 4: Game Logic 2

初めに作っていたContentViewのコードをViewModelで置き換えてカードを表示できるようになりました。 神経衰弱ゲームなので、タップしてカードを裏返し、正解の判定などゲームとして遊べる部分の実装をしていきます。 構造体CardView()で以下カードの状態を決めています。 card.isFaceUp の真偽で表、裏を表示させるようにしています。 if card.isFaceUp{ shape

スキ
2
SwiftUIでいこう!- スタンフォード大学Lecture 4: Game Logic

SwiftUIでいこう!- スタンフォード大学Lecture 4: Game Logic

続いて先に作ってあるContentView等にMVVMで作ったクラスを使って修正していきます。 まず、起動するファイルを決めている以下の構造体を作っていきます。 import SwiftUI@mainstruct SampleAppApp: App { var body: some Scene { WindowGroup { ContentView() } } 実装です。 ViewModelの部分を読み込み、

スキ
2
SwiftUIでいこう!- スタンフォード大学Lecture 3: MVVM

SwiftUIでいこう!- スタンフォード大学Lecture 3: MVVM

神経衰弱ゲームを構造を考えながら組み上げていきます。 Model, ViewModel , Viewの3つの構造を作って機能させます。MVVMについては以下のサイトがわかりやすく紹介されています。 このゲームをMVVMで組み上げます。まずViewの役割を持つCntentView()以外の基本的部品を見ていきましょう。 基本の構造//Model modelは部品の構造を書き出していきます。今後、この部品を使って画面の表示部分を作っていきます。 import Found

スキ
1
SwiftUI の Disclosure・Outline・List
+16

SwiftUI の Disclosure・Outline・List

SwiftUI にはツリー構造のデータを表示するビューがあります。 この記事ではWWDC2020の『Stacks, Grids, and Outlines in SwiftUI』(日本語字幕あり)後半の DisclosureGroup と OutlineGrounp や List を解説します。 ツリー構造についても実例で説明します。 このビデオの前半に対応する内容は『Lazy な Stack と Grid』に書きました。 ・画像クリックで拡大表示できます ・画像を拡大

スキ
1
有料
500
SwiftUIでいこう!- スタンフォード大学Lecture 2 - 5 Grid。

SwiftUIでいこう!- スタンフォード大学Lecture 2 - 5 Grid。

HStackで横向きにカードを並べていましたが、ここで下の方にもカードを並べたいのでHStackからLazyVGridに変更します。 GridItem() を入れ込むことで行を決めます。 LazyVGrid(columns:[GridItem(),GridItem(),GridItem(){ ForEach(emojis[0..<emojicount], id: \.self){emoji in Card

スキ
1
SwiftUIでいこう!- スタンフォード大学Lecture 2 - 4 ボタン配置など。

SwiftUIでいこう!- スタンフォード大学Lecture 2 - 4 ボタン配置など。

絵文字の数を決める変数を作ります。 var emojicount = 4 これで絵文字の数をコントロールします。 ForEach(emojis[0..<emojicount], id: \.self){emoji in CardView(content:emoji) } 絵文字を増やしたり、減らしたりするボタンを作ります。 Button(action: { emojico

SwiftUIのbodyが少し変わっていた
+3

SwiftUIのbodyが少し変わっていた

『SwiftUI の Disclosure・Outline・List』記事用に DisclosureGroup のサンプルを作っていたとき、レイアウトを上によせたくて Spacer() を追加しました。 こんな感じ: var body: some View { DisclosureGroup(isExpanded: $topExpanded) { Toggle("Toggle 1", isOn: $toggleStates.oneIs

スキ
3
SwiftUIでいこう!- スタンフォード大学Lecture 2 - 3

SwiftUIでいこう!- スタンフォード大学Lecture 2 - 3

"CardView()"をうまく使う いろんな絵文字に対応するため変数を作ります。 var content:String 変数"content"に入れた絵文字データが反映されるようにします。 Text(content) 変数の部分を変更したもの全文は以下となります。 struct CardView:View { var content:String @State var isFaceUp:Bool=true var body: some Vi

スキ
1
SwiftUIでいこう!- スタンフォード大学Lecture 2 - 2
+1

SwiftUIでいこう!- スタンフォード大学Lecture 2 - 2

"struct CardView"を作りこみstruct CardView:View { var body: some View{ ZStack{ RoundedRectangle(cornerRadius: 25.0) .stroke(lineWidth: 3) Text("✈️").foregroundColor(.blue) } }} 文字を絵文字にします。 Tex

スキ
2
SwiftUIでいこう!- スタンフォード大学Lecture 2 - 1
+3

SwiftUIでいこう!- スタンフォード大学Lecture 2 - 1

"struct CardView:View"で機能をまとめる 続きをやっていきます。Lecture 1の最後で以下の表示となっています。 カードをたくさん表示することが必要なのでまずはは、今表示しているものを分割、水平方向(左右両方:横方向)に増やしていきます。 横方向に向け増やしたい場合は"HStack"を使います。これを使って、 HStack{ ZStack{ RoundedRectangle(cornerRadi

スキ
2