You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

SwiftUI列表中移除切换下拉圆点且保留切换功能的实现方案

解决你的SwiftUI List两个核心需求

我来帮你一步步搞定这两个问题:


1. 移除列表的切换下拉按钮(黑色圆点),保留编辑/删除功能

如果这个黑色圆点是Section的展开/折叠按钮,你只需要给每个Section加上collapsible: false参数,就能直接移除折叠按钮,同时让Section默认保持展开状态:

Section(header: CompanyProfileHeader(), collapsible: false) {
    // CompanyInfo相关内容
}
Section(header: EmployeeListHeader(), collapsible: false) {
    // EmployeeList相关内容
}

如果这个黑色圆点是编辑模式下每行左侧的删除/排序指示器,你可以通过修改UIKit全局外观来隐藏它,但完全保留删除功能:
在视图的onAppear方法里添加这两行:

// 隐藏编辑模式下的排序圆点(如果存在)
UITableViewCell.appearance().showsReorderControl = false
// 隐藏编辑模式下的行缩进和左侧指示器,不影响删除功能
UITableViewCell.appearance().shouldIndentWhileEditing = false

2. 让名称列表的蓝线(分隔线)首次加载就显示

你当前的代码里,视图onAppear时先把分隔线设为.none,然后只有当EmployeeRow出现在屏幕上才切换为.singleLine,这就导致首次加载时分隔线不显示。解决这个问题有两种方式:

方式一:全局默认显示分隔线

直接修改视图的onAppear设置,去掉之前的隐藏逻辑:

.onAppear {
    UITableView.appearance().separatorStyle = .singleLine
    // 加上前面的指示器隐藏代码(如果需要)
}

方式二:仅给EmployeeList Section显示分隔线

如果你的CompanyProfile部分不需要分隔线,只想让EmployeeList部分显示,可以给对应的Section单独设置:

Section(header: EmployeeListHeader(), collapsible: false) {
    ForEach(employeeListViewModel.employees) { employee in
        EmployeeRow(employee: employee)
    }
    .onDelete(perform: employeeListViewModel.delete)
}
.listRowSeparator(.visible) // 强制显示该Section的分隔线

同时记得移除之前全局设置的UITableView.appearance().separatorStyle相关代码,避免冲突。


修改后的完整代码片段

整合了所有修改的代码如下:

struct IphoneProfileView: View { 
    @StateObject var companyViewModel = CompanyViewModel() 
    @StateObject var profileViewModel = ProfileViewModel() 
    @ObservedObject var employeeListViewModel = EmployeeListViewModel() 
    @ObservedObject var role: RoleService = .shared 
    var company: Company? 
    @State var companyName = "" 
    @State var editModeIphone: EditMode = .inactive { 
        didSet { 
            profileViewModel.isPinHidden = !editModeIphone.isEditing
        } 
    } 
    var body: some View { 
        VStack { 
            List { 
                Section(header: CompanyProfileHeader(), collapsible: false) { 
                    if editModeIphone.isEditing { 
                        CompanyInfoNameTextField( 
                            placeholder: "Company Inc.", 
                            text: $profileViewModel.company.name 
                        ) 
                        CompanyInfoTextField( 
                            title: "Owner PIN", 
                            placeholder: "1234", 
                            text: $profileViewModel.company.ownerPin 
                        ) 
                    } 
                    ReviewPolicy() 
                } 
                Section(header: EmployeeListHeader(), collapsible: false) { 
                    ForEach(employeeListViewModel.employees) { employee in 
                        EmployeeRow(employee: employee) 
                    } 
                    .onDelete(perform: employeeListViewModel.delete) 
                }
                .listRowSeparator(.visible) 
            } 
        } 
        .toolbar { EditButton() } 
        .navigationBarTitle("Profile", displayMode: .inline) 
        .environment(\.editMode, $editModeIphone) 
        .onAppear { 
            UITableViewCell.appearance().shouldIndentWhileEditing = false
            UITableViewCell.appearance().showsReorderControl = false
        } 
    } 
}

这样修改后,你就能同时实现:移除不需要的切换按钮,并且首次加载就显示EmployeeList的分隔线。

内容的提问来源于stack exchange,提问作者vandettadyckies

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.30 06:02:32