#レイアウト
Design an interface - SwiftUI でプログラミング - 1
画面のデザインについてのチュートリアルです。画面に表示させるレイアウトを順を追って作っていきます。
2 つの画面を作成して、ビューを配置してレイアウトしていきます。 コードを書いて、好きなレイアウト、色、グラフィック、テキストをいれていきます。
Create the welcome page
新しいプロジェクトを作るとContentViewが出来上がりますが、今回は2つの画面を作っていくので
いざ！ SwiftUI -6 レイアウト
写真を表示する場合にキャプション、表題をつけるときに重ねる方法が示されています。
写真の上にテキストを重ねて表示します。MacのPlaygrounds(ipadのSwiftPlaygroundsのMac版)で実行します。XcodeのPlaygroundとは違うのでちょっとコードも変わります。(プレビュー表示するのにPreviewProviderを使わないのでXcode本体と同じコードで表示します
SwiftUIをはじめてみよう！ - レイアウト(2)
ざっくりとしたレイアウトはVStackなどを使ってできますが、もう少し細かい設定で好きな場所に配置したい場合があります。
frame(width:height:alignment:)表示のサイズを指定することができます。
指定できるのは
実際の表示ですが
struct ContentView: View { var body: some View { VStack {
SwiftUIをはじめてみよう！ - レイアウト(1)
SwiftUIでは複数のView を組み合わせて表示させるためにいくつか仕組みが用意されています。
VStack
縦方向に表示できるようにできます。
公式サイトの例示です。縦方向に文字が連続して表示されます。
VStack( alignment: .leading,spacing: 10 ) { ForEach( 1...10, id: \.