こんにちは、ChatGPTにねこの良さを語るのが趣味になりつつあるあせなです。
今回は、業務の一環でSwiftUIを触っているなかで出会った出来事の紹介になります。

はじめに（ことの発端）

会社の業務の一環で、iOS26 & Xcode26 でビルドしたらどうなるか検証・対策検討をしておりました。
その際に、とあるListパーツをみて「おろ？Sectionの背景が透けてる...だと...」という事態になりまして。
これが状況掴むのに苦戦をしたので、現象とかをサンプル化して記録しようと思った次第です。
なお、本執筆にあたりちゃっぴーことChatGPTの力を大いに借りております。

実際に起きたこと（衝撃の瞬間）

.listStyle(.plain) を指定した、Section付きのリストがありました。
そこの画面を開いてスクロールすると...Sectionの背景が透けているではないか！！！

このイメージは実際の内容ではなく、構造をほぼ一緒にしたサンプルソースで再現したものです。

これは今のアプリのデザインと馴染まない...ってことで調査をして対策を考えることになりました。

調査方針を立てる（考える人みたいな感じで）

調査をするにもアプローチを考えないと、闇雲にやるのは難しいです。
ということで、上司とも相談しつつ次の2軸で調べてみることにしました。

Sectionの背景をなくす（中途半端な透過じゃなくてなにもない状態にする）
Sectionの背景をベタ塗りにする

れっつ調査！（手をあげる）

アプローチ1. Sectionの背景を無くす（完全透過を目指す）

結論 → 挫折！

元々のコードには背景色を指定しておらず、適当な色でopacity0とやっても背景の透け具合は残ったままだったので、解決するのは難しいと判断しました。

アプローチ2.　Sectionの背景をベタ塗りする

ということでこちら。ベタ塗りです。
幅いっぱいに塗ったりしないとだったので、行き着く先はこんな感じの指定になりました。

import SwiftUI

struct SectionListSampleView: View {
    // セクションとリストのデータ
    let sections = [
        ("人気", ["猫カフェにゃんこ亭", "スープカレーGaraku", "スタジアムカフェ Clark","ねこねこCafe にゃん","紫雲亭","びりびり定食"]),
        ("おすすめ", ["パーク北口のベンチ", "ねこ神社", "展望台ドーム前","ねこさま教会","ゆきだるま駅"]),
        ("休憩所", ["すやすやカフェinねこガソリンスタンド", "道の駅キタ・アイランド", "ふくろうの集う休憩所","わんぱく動物園","ゆきだるまバスターミナル"])
    ]

    var body: some View {
        List {
            ForEach(sections, id: \.0) { title, items in
                Section(header: sectionHeader(title)) {
                    ForEach(items, id: \.self) { name in
                        spotRow(name)
                    }
                }
            }
        }
        .listStyle(.plain)
        .scrollContentBackground(.hidden)
    }

    // MARK: - 共通部品

    private func sectionHeader(_ title: String) -> some View {
        ZStack(alignment: .leading) {
            Color(.systemBackground)
            Text(title)
                .font(.headline)
                .padding(.vertical, 6)
                .padding(.horizontal, 16)
        }
    }

    private func spotRow(_ name: String) -> some View {
        HStack {
            Image(systemName: "bolt.square.fill")
                .resizable()
                .frame(width: 40, height: 40)
            Text(name)
                .font(.system(size: 14, weight: .semibold))
            Spacer()
        }
        .contentShape(Rectangle())
    }
}

コードはサンプル用に別途書き起こしていますが、使ってる要素などはおおよそ揃えています。

構成としては

Section部分は「ZStackで背景レイヤーを敷いて、その上にテキストを乗せる」
Listの背景色は無効にする

という感じです。

結果はどうなったかというと...

Section範囲の下部の境界から透けた感じのぼかしが見えるようになった
スクロールさせると、見出しに乗る背景部分が黒っぽかった時に塗りつぶしが黒くなり、視認性が悪くなった

こうです。
ええってなりましたよ。ほんとに...
これで困ったってわけです。

じゃあどうしたか（遠い目をしながら）

会社で扱ってるアプリのソースなので、会社に状況を報告して詰まったと説明をしました。
アプリの要件として、.listStyle(.plain) を指定したことで出るSectionの上部固定は無理に残さなくていいということだったらしく、それならSectionを使わないなどで回避しようということになりました。
ということで、Sectionを取っ払ったものを試験実装の内容として提出する運びに...

解決になってなくてすみません。
ただこの件は、強引になんとかするのは厳しいのかもしれないと思いました。

最後に

今回の出来事は、個人的な困りごととして公開しようかなとおもって書きました。
どうにか回避したという方がいたらぜひコメントください。
また今後は、アプリのアップデートで「OS26」対応がどんどん進むかもしれません。
その際には、現行の挙動を無理に維持せず最適化するということも選択しないといけないかもしれないです。
目の前のことに苦しみすぎず、根っこの仕様から見直すことも必要だなと思いました🐱