Set SwiftUI List View transparent background

在SwiftUI中使用List View時，我們會發現即使將背景圖片設為底下的Navigation view，List View背景一直還是預設的白色。用.background(Color.clear)去修改List，也沒有效果。網路上的很多解決方案都建議使用其他方式，例如不要用List而改用VStack。然而這種方法有時候很不方便，例如我有時想要用List view上的.onDelete實作，如果改用VStack就會非常麻煩。

經過一段時間摸索我終於確定如何設定SwiftUI List View透明背景的完整解法，因為網路上好像很難找到這個解法，所以在這裡說明一下。

首先，我們知道List view其實就是以前的UITableView，為了要設定背景顏色，我們可以在我們的view裡面加上一個initialize():

func initialize(){
        UITableView.appearance().backgroundColor = .clear
        UITableViewCell.appearance().backgroundColor = .clear
        UITableView.appearance().tableFooterView = UIView()
 }

再來，我們在list被載入時去呼叫這個initialize():

List {
   //Your list contents here, e.g.
   ForEach(data) { index in 
       MyRowView(data: data[index]) 
   }
}
.onAppear{
      self.initialize()
}

經過這一步之後我們會看到list的背景終於變成透明背景了。然而，裡面的list item仍然會是白色背景。這是因為list row有自己的設定，所以我們必須要給list row另外設定透明背景。

struct MyRowView: View {
    ...
    var body: Some View {
         VStack{ //This can be any view actually
             //More contents...
         }.listRowBackground(Color.clear)
    }
} 

設定完listRowBackground之後我們終於能看到出現在NavigationView上，完整透明背景的ListView了。

謝謝你看完這篇文章。如果你喜歡我的文章，請追蹤Facebook粉專、Twitter、IG。