SwiftUI列表单元格背景色按百分比填充实现问询

当然可以实现按指定百分比填充单元格背景的效果，你当前用的线性渐变是完整覆盖行的，要实现百分比填充，我们可以自定义背景视图来控制填充宽度：

自定义进度背景视图 #

先创建一个可复用的背景视图，通过GeometryReader获取单元格的实际宽度，再根据百分比计算填充区域的宽度：

struct ProgressBackgroundView: View {
    let progress: CGFloat // 传入0.0~1.0之间的比例值
    var body: some View {
        GeometryReader { geo in
            ZStack(alignment: .leading) {
                // 底层默认背景色
                Color.white
                // 按百分比填充的进度色
                Color.green
                    .frame(width: geo.size.width * progress)
            }
        }
    }
}

在List中使用 #

将自定义背景视图传入listRowBackground，注意把totalComplete（百分比数值，比如60代表60%）转换成0-1的比例值：

List {
    Section(header: Text("Total")) {
        Text("Total Obtained: \(totalObtained) - \(totalComplete)%")
            .listRowBackground(ProgressBackgroundView(progress: CGFloat(totalComplete)/100))
    }
}

补充说明 #

• 用GeometryReader可以自适应不同设备、不同布局下的单元格宽度，比直接用屏幕宽度更准确
• 如果需要渐变效果的进度填充，可以把Color.green换成你需要的渐变，比如LinearGradient(colors: [.green, .lightGreen], startPoint: .leading, endPoint: .trailing)

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