SwiftUI复刻UIKit贷款历史页面，布局对齐异常且显点，求修复

问题描述 #

我尝试用SwiftUI复刻一个已通过UIKit完成的贷款历史页面，采用了相同实现思路，但最终页面布局对齐效果不佳，还出现多余的圆点。以下是我的代码，以及期望效果和当前实际效果截图，恳请提供修复方案。

struct LoanHistoryView: View {
    let listContorller = LoanHistoryController()

    var body: some View {
        return NavigationView {
             List{
                 ForEach(listContorller.listOfValues, id: \.self){text in
                     HistoryContentView()
                         .background(Color.white)
                 }
                 .cornerRadius(10)
                 .listRowBackground(Color.clear)
                 .listRowSeparator(.hidden)
             }
             .background(.green.opacity(0.6))
             .listStyle(.plain)
             .navigationTitle("LOAN HISTORY")
        }
    }
}

struct HistoryContentView: View {
    var body: some View {
       VStack {
            HStack{
                VStack(alignment: .leading){
                    Text("KW123456789066788")
                        .foregroundColor(.red)
                    Text("KARTHI | 7502875893")
                        .foregroundColor(.black)
                }
                
                Spacer()
                HStack{
                    VStack{
                        Image(systemName: "menucard")
                        Text("REPORT")
                    }
                    VStack{
                        Image(systemName: "menucard")
                        Text("DOCUMENTS")
                    }
                    VStack{
                        Image(systemName: "menucard")
                        Text("CONTACT")
                    }
                }
            }
           VStack(spacing: 10.0) {
               Divider()
                   .frame(height: 1)
               .background(.gray)
               HStack(){
                   Text("HYNDAI CRETA 1.5 - CHENNAI")
                       .foregroundColor(.black)
                   Spacer()
                   Text("NEW-PRIVATE")
                       .foregroundColor(.cyan)
               }
               HStack(){
                   VStack(alignment: .leading, spacing: 10.0){
                       Text("REGNO")
                       Text("TN09CQ0925")
                           .bold()
                   }
                   Spacer()
                   VStack(alignment: .leading, spacing: 10.0){
                       Text("TENURE")
                       Text("60 MONTHS")
                           .bold()
                   }
                   Spacer()
                   VStack(alignment: .leading, spacing: 10.0){
                       Text("EMI")
                       Text("23456")
                           .bold()
                   }
                   Spacer()
                   VStack(alignment: .leading, spacing: 10.0){
                       Text("LOAN AMOUNT")
                       Text("3446667")
                           .bold()
                   }
               }.foregroundColor(.black)

               HStack(){
                   VStack(alignment: .leading, spacing: 10.0){
                       Text("DEALER")
                       Text("KUWY001")
                           .bold()
                   }
                   VStack(alignment: .leading, spacing: 10.0){
                       Text("LOS NUMBER")
                       Text("5678JKSKS888")
                           .bold()
                   }
                   Spacer()
               }.foregroundColor(.black)
               HStack {
                   VStack(alignment: .leading, spacing: 10.0){
                       Text("AXIS BANK")
                       Text("TEST CASE REJECED BY KAMS")
                           .foregroundColor(.red)
                   }
                   Spacer()
               }
               VStack{
                   HStack {
                       Spacer()
                       Text("22-04-2024")
                   }
                   HStack {
                       Spacer()
                       Button(action: {}) {
                           Text("HELP")
                               .foregroundColor(.blue)
                               .underline()
                       }
                   }
               }
           }
           Spacer()
       }
       .padding(10)
    }
}

期望效果：
当前效果：

修复方案 #

1. 消除List默认圆点 #

List的ForEach默认会生成项目符号，同时调整item的圆角和间距：

// 修改LoanHistoryView中的List部分
List{
    ForEach(listContorller.listOfValues, id: \.self){text in
        HistoryContentView()
            .background(Color.white.cornerRadius(10)) // 将圆角移到背景层
            .listRowInsets(EdgeInsets(top: 8, leading: 8, bottom: 8, trailing: 8)) // 控制item内外间距
    }
    .listRowBackground(Color.clear)
    .listRowSeparator(.hidden)
}

2. 修复布局对齐问题 #

调整HistoryContentView的布局逻辑，统一间距和对齐方式：

struct HistoryContentView: View {
    var body: some View {
        VStack(spacing: 15) { // 统一垂直间距
            HStack{
                VStack(alignment: .leading){
                    Text("KW123456789066788")
                        .foregroundColor(.red)
                    Text("KARTHI | 7502875893")
                        .foregroundColor(.black)
                }
                
                Spacer()
                HStack(spacing: 20) { // 按钮之间添加间距
                    buttonItem(icon: "menucard", text: "REPORT")
                    buttonItem(icon: "menucard", text: "DOCUMENTS")
                    buttonItem(icon: "menucard", text: "CONTACT")
                }
            }
            
            Divider() // 移除多余的frame设置，使用默认样式
            
            VStack(spacing: 12) {
                HStack{
                    Text("HYNDAI CRETA 1.5 - CHENNAI")
                        .foregroundColor(.black)
                    Spacer()
                    Text("NEW-PRIVATE")
                        .foregroundColor(.cyan)
                }
                
                // 均分宽度的信息行
                HStack(spacing: 15) {
                    infoBlock(title: "REGNO", value: "TN09CQ0925")
                    infoBlock(title: "TENURE", value: "60 MONTHS")
                    infoBlock(title: "EMI", value: "23456")
                    infoBlock(title: "LOAN AMOUNT", value: "3446667")
                }
                
                HStack(spacing: 25) {
                    infoBlock(title: "DEALER", value: "KUWY001")
                    infoBlock(title: "LOS NUMBER", value: "5678JKSKS888")
                    Spacer()
                }
                
                HStack {
                    VStack(alignment: .leading, spacing: 6){
                        Text("AXIS BANK")
                        Text("TEST CASE REJECED BY KAMS")
                            .foregroundColor(.red)
                            .font(.caption)
                    }
                    Spacer()
                }
                
                VStack(spacing: 8) {
                    HStack {
                        Spacer()
                        Text("22-04-2024")
                            .font(.caption)
                    }
                    HStack {
                        Spacer()
                        Button(action: {}) {
                            Text("HELP")
                                .foregroundColor(.blue)
                                .underline()
                                .font(.caption)
                        }
                    }
                }
            }
        }
        .padding(15)
    }
    
    // 复用按钮组件
    private func buttonItem(icon: String, text: String) -> some View {
        VStack(alignment: .center){
            Image(systemName: icon)
            Text(text)
                .font(.caption)
        }
    }
    
    // 复用信息块组件
    private func infoBlock(title: String, value: String) -> some View {
        VStack(alignment: .leading, spacing: 6){
            Text(title)
                .font(.caption)
            Text(value)
                .bold()
        }
        .frame(maxWidth: .infinity, alignment: .leading) // 强制均分宽度
    }
}

3. 细节优化 #

• 提取复用组件：将重复的按钮和信息块封装成私有方法，减少冗余代码
• 统一字体层级：给次要文本添加.font(.caption)，明确视觉层级
• 调整间距参数：用统一的spacing替代零散的padding，让布局更规整

内容的提问来源于stack exchange，提问作者karthikeyan