【正社員】還元率83%【フリーランス】マージン一律5万円で案件をご紹介させていただきます。 詳細はこちら

【SwiftUI】Listの背景色を変更してみよう(iOS 16.0+)

ほりうち

この記事では、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の右部分にリアルタイムプレビューを表示させることが可能となります。

出力

背景が黒色で、背景色が灰色のListが生成された

まとめ

いかがでしたでしょうか?

この記事では、scrollContentBackgroundを用いてListの背景色をカスタマイズする解説を行いました。

ではまた、次の記事でお会いしましょう!

ほりうち

この記事があなたのスキルアップに役立ったなら、次のキャリアステップを踏み出す絶好の機会かもしれません。エンジニアとしてのさらなる成長と挑戦を求めるなら、未経験からエンジニア転職なら【Tech Stars Agent】をオススメします!

参考記事

https://developer.apple.com/documentation/swiftui/view/edgesignoringsafearea(_:)
https://developer.apple.com/documentation/swiftui/view/ignoressafearea(_:edges:)

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次