設定SwiftUI List View透明背景

在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了。


謝謝你看完這篇文章。如果你喜歡我的讀書心得,請到Twitter追蹤新發佈的讀書心得。想要更了解我們嗎?追蹤或訂閱Facebook粉專和我們交流、獲得最新文章通知吧。

如果你覺得這篇文章不錯,請在下面用力的拍五次手,給我們一點鼓勵!
對於如何拍手有疑問嗎?請見快速教學

如果這篇文章或許會對你的朋友有幫助,請按下面的分享按鈕,將這篇文章分享給你的朋友。

若有興趣在你的網站或出版品引用這篇文章或部份內容,請來信索取授權。

發表迴響