【SwiftUI】Listの区切り線が一部消えてしまう件について

先日SwiftUIにて開発を行なっていたところ、この問題に遭遇しました。少々手こずりましたが、無事解決することができたので、備忘録がてら記事として残しておきたいと思います。

問題の画面は以下のスクリーンショットで確認できます。もし、見づらい場合は拡大表示していただけると幸いです。

区切り線が一部消えている

多くの方は以下のコードのように、何かしらのViewを中央に配置しようとしてこの問題に突き当たったと思います。

struct ContentView: View {
    var body: some View {
        List {
            ForEach(1..<8) { i in
                Text("Sample\(i)")
            }
            
            HStack {
                Spacer()
                Text("Bad")
                Spacer()
            }
            
            ForEach(8..<13) { i in
                Text("Sample\(i)")
            }
        }
    }
}

上記の問題は以下のように両端に空文字のTextを表示させることで解決できました。

struct ContentView: View {
    var body: some View {
        List {
            ForEach(1..<8) { i in
                Text("Sample\(i)")
            }

            HStack {
                Text("") // 追加
                Spacer()
                Text("Good")
                Spacer()
                Text("") // 追加
            }

            ForEach(8..<13) { i in
                Text("Sample\(i)")
            }
        }
    }
}

以下のスクリーンショットで区切り線が左端から右端まで引かれているのが確認できます。

区切り線が消えていない

ちなみに何かしらの文字でないとこの方法はうまくいかない模様です。以下はTextの代わりにCircleを配置したものです。

struct ContentView: View {
    var body: some View {
        List {
            ForEach(1..<8) { i in
                Text("Sample\(i)")
            }
            
            HStack {
                Circle().frame(width: 10, height: 10) // 変更
                Spacer()
                Text("Bad")
                Spacer()
                Circle().frame(width: 10, height: 10) // 変更
            }
            
            ForEach(8..<13) { i in
                Text("Sample\(i)")
            }
        }
    }
}

下のスクリーンショットを見てわかる通り、やはりText以外ではうまくいきません。

今回の件に関して、個人的には少々不便に感じますが、これは仕様のようで今後も変更される可能性は低いように思います。純正リマインダーアプリでも区切りが文字の位置からしか引かれていません。

今回は以上になります。閲覧ありがとうございました。もしよろしければX（旧Twitter）のフォローをお願いします。
https://twitter.com/3MB_JP