
この記事では、Swift5.10およびXcode 15.4における、Listの背景色の変更処理について、サンプルコードを交えながら説明しております。
初心者の方でも分かりやすいように、サンプルコードに適宜説明を入れながら解説していくので、ぜひご覧ください。
初心者の方でも分かりやすいように、サンプルコードに適宜説明を入れながら解説していくので、ぜひご覧ください。
この記事を読んで分かること…
・scrollContentBackground()を用いてListの背景色を変更する方法
実行環境
・実行環境:SwiftUI + Xcode
・Swift:5.10
・XCode:15.4
・サンプルコードの実行確認日:12月27日(金)
scrollContentBackgroundとは?
今回は、先ほどのコードで指定した.toggleStyleの中身を変更して起動してみましょう。
概要
nonisolated
func scrollContentBackground(_ visibility: Visibility) -> some View
- Viewの中にある
ScrollView
の背景のVisibility
を指定することのできる修飾子です。 .scrollContentBackground(.hidden)
を使うことで、List
の背景色を消すことができます。
サンプルコード
import SwiftUI
struct BlogView: View {
var body: some View {
List {
Text("hoge1")
.listRowBackground(Color.gray)
}
.scrollContentBackground(.hidden)
.background(Color.black)
}
}
#Preview {
BlogView()
}
サンプルコードの説明
◾️行 1: SwiftUI
をインポートしています。
◾️行 2: BlogView
という名前の構造体を定義します。View
型を継承します。
◾️行 4~8: List
を宣言します。
・Text
を宣言する。
・listRowBackground
の背景色をColor(.gray)
に設定する。
◾️行 9: scrollContentBackground
の中で.hidden
を指定し、デフォルトの背景を消します。
◾️行 10: 背景色を黒色にします。#PreView
・ここでBlogViewを初期化してあげることで、XCodeの右部分にリアルタイムプレビューを表示させることが可能となります。
出力


まとめ
いかがでしたでしょうか?
この記事では、scrollContentBackgroundを用いてListの背景色をカスタマイズする解説を行いました。
ではまた、次の記事でお会いしましょう!



この記事があなたのスキルアップに役立ったなら、次のキャリアステップを踏み出す絶好の機会かもしれません。エンジニアとしてのさらなる成長と挑戦を求めるなら、未経験からエンジニア転職なら【Tech Stars Agent】をオススメします!
参考記事
https://developer.apple.com/documentation/swiftui/view/edgesignoringsafearea(_:)
https://developer.apple.com/documentation/swiftui/view/ignoressafearea(_:edges:)
コメント