日付とかは置いといてとりあえず画像２枚とテキストからとりかかった。
View {
var body: some View {
ScrollView {
VStack {
ZStack{
Image("neko1")
.scaledToFit()
.frame(width: 350, height: 400)
.cornerRadius(30)
ZStack {
RoundedRectangle(cornerRadius: 30)
.fill(Color.black.opacity(0.3))
.frame(width: 350, height: 100)
Text("Hello, world!")
.font(.title)
.fontWeight(.bold)
.foregroundColor(.white)
}
}
Image("neko1")
.scaledToFit()
.frame(width: 350, height: 150)
.cornerRadius(30)
}
}
}
}
現時点での画面
目指している画面
◾️直面した問題
・VStackとZStackを重ねる順番で混乱する（どっちで括ればいいかわからなくなる）
・画像の下端にRoundedRectangleを重ねたいがやり方を忘れた
・その中にテキストを２段おさめたかったがそれもできなかった
・Spaserとpaddingを混同している（なんか隙間をつくってくれたり埋めたりするやつ）
→過去のUdemyを復習すればすべてわかるはずなので明日以降に見返す
◾️学び
・以下のエラーの意味と対処法を学んだ
「The image set "neko1" references a file "IMG_0799.JPG", but that file does not have a valid extension.」
→画像の拡張子エラー。今回は取り込んだ画像の拡張子がJPEG.で大文字だったためにエラーが起きた。小文字に書き換えたら解消した。
・Image(systemName:)のやつの名前は「SF Symbols（システム標準アイコン）」。
こいつらだけは特別に.imageScale()でサイズを変更できる（ .small（小さめ）.medium（標準）.large（大きめ） )
Assetsに自分で入れた画像のリサイズは以下など。
.resizable()
.scaledToFit() // アスペクト比を維持して拡大・縮小
.frame(width: x00, height: x00) // 任意のサイズに調整
★明日やること
過去にやったUI部品配置の講座のコードを見返して盗めるブロックを探す。