SwiftUI模仿微信 聊天列表list

學了swiftui后，每次看到一個界面，都會想著怎樣用代碼實現。

無意間發現微信上的是：圖片下面沒有下劃間隔線（如下圖），消息下面就有！

ios上面的設置也是這樣！

但是swiftui上的list、或者form每條消息的間隔都有一條鋪平的直線，如下圖，圖片下面也有！

    var body: some View {
        NavigationView {
            Form {
                HStack {
                    Image(systemName: "person")
                    Text("公眾號平臺安全助手")
                }
                HStack {
                    Image(systemName: "person")
                    Text("公眾號平臺安全助手")
                }
                HStack {
                    Image(systemName: "person")
                    Text("公眾號平臺安全助手")
                }
            }
        }
    }

手里的饅頭突然就不香了。
于是我決定要customize一下這個list

但是好像這個list 或者form可選擇的修改的選項不多，更不用說修改下劃線了。

經過一頓搜索后，最后決定現隱藏掉下劃間隔線再把下劃間隔線Divider()添加回來了!

1、 首先是隱藏下劃線

“棧溢出”上面有個回答了很多種解決方法的，有興趣的可以去康康

我這里直接使用初始化時就隱藏掉的這個方法，就是直接在body上面寫個init()感覺后面有一點小問題，不過先不管，能用！

struct text: View {
    init() {
        // To remove only extra separators below the list:
        UITableView.appearance().tableFooterView = UIView()

        // To remove all separators including the actual ones:
        UITableView.appearance().separatorStyle = .none
    }
    var body: some View {
        NavigationView {
            Form {
                HStack {
                    Image(systemName: "person")
                    Text("公眾號平臺安全助手")
                }
                HStack {
                    Image(systemName: "person")
                    Text("公眾號平臺安全助手")
                }
                HStack {
                    Image(systemName: "person")
                    Text("公眾號平臺安全助手")
                }
            }
        }
    }
}

2、每條消息之間添加Divider()

為了好看，最好外面加一個VStack()，還加個向左對齊alignment: .leading

var body: some View {
        NavigationView {
            Form {
                VStack(alignment: .leading){
                    HStack {
                        Image(systemName: "person")
                        Text("公眾號平臺安全助手")
                    }
                    Divider()
                    HStack {
                        Image(systemName: "person")
                        Text("微信支付")
                    }
                    Divider()
                    HStack {
                        Image(systemName: "person")
                        Text("文件傳輸助手")
                    }
                }
            }
        }
    }

下劃線又回來啦

3、接著就開始modify一下這個下劃線

因為下劃線右邊沒有到岸左邊也沒有到所以加個scaleEffect(),再在前面加一個padding

Divider()
   .scaleEffect(1.1)
   .padding(.leading,38)

終于看到了自己想要成為的樣子。

再再最后，添加圖片，調整位置，巴拉巴拉

終于搞定了，本來想著很快搞定的，但是找圖片、調顏色、定義數據比哩吧啦居然搞了幾個小時。我還是太菜了，繼續努力吧……

我是正在入門swift的萌新小白，希望通過分享解決方法，記錄學習過程。有錯漏請大家提出指正啊，有更好方法也可以分享下啊，peace??