![見出し画像](https://assets.st-note.com/production/uploads/images/98448389/rectangle_large_type_2_103d11e2679b2f96db62f611c0c5bf42.png?width=800)
いざ! SwiftUI - 2 ContentView。
実行ファイルのContentViewを少し詳しくみていきます。構造は
struct ContentView: View {
var body: some View {
}
}
MyApp.swiftで書かれていた
@main
struct MyApp: App {
var body: some Scene {
}
}
と比べてみると
struct ContentView: View {
var body: some View {
}
}
構造体"MyApp"
@mainはエントリーポイントということで書かれていて、プロトコルApp、Sceneとに準拠ということになっています。
構造体"ContentView"
プロトコルViewに準拠ということになっています。
ContentViewの中身ですが表示部分のコードが書かれています。
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundColor(.accentColor)
Text("Hello, world!")
}
.padding()
細かくみていきます。大きな構造としてはVStackに囲まれて、Image()とText()が中に入っています。
VStack
VStackで囲うことで縦に並ぶレイアウトにします。この場合は
Image()
画像の表示
Text()
テキストの表示
縦に並んで表示されるということになります。
そしてImage()であれば
Image(systemName: "globe")
.imageScale(.large)
.foregroundColor(.accentColor)
"globe"は絵文字で画像を用意することなく簡単に表示できます。そして
.imageScale(.large) ・・・ 画像を大きく表示
.foregroundColor(.accentColor) ・・・ 色はアクセントカラー
についてはカスタマイズする命令となっています。
"Text()"には何もついていません。
VStackのカッコの外に
.padding()
がついています。この命令で余白を入れています。
struct ContentView: View {
var body: some View {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundColor(.accentColor)
Text("Hello, world!")
}
.padding()
}
}
![](https://assets.st-note.com/img/1677099528981-AupNV6pSOq.png?width=800)
この記事が気に入ったらサポートをしてみませんか?