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

SwiftUI星级评分Picker实现问题:每行无法显示对应数量星级

解决SwiftUI星级评分Picker显示问题

你的代码核心问题在于内层ForEach的区间范围错误,以及缺少Picker选项的tag绑定:

  1. 内层ForEach(1..<rating)是左闭右开区间,当rating=1时区间为空,导致第一行无星;rating=2时仅生成1个星,以此类推每行都少显示一颗星。
  2. Picker的每个选项需要通过.tag()绑定对应的值,否则选中操作无法更新绑定的$rating变量。

修正后的代码如下:

Picker("Rating", selection: $rating) {
    ForEach(1..<6, id: \.self) { rating in
        HStack {
            // 改用闭区间1...rating,确保显示对应数量的星
            ForEach(1...rating, id: \.self) { _ in
                Image(systemName: "star")
            }
        }
        // 添加tag绑定选择值,确保Picker能正确响应选择
        .tag(rating)
    }
}

如果偏好更简洁的写法,也可以用左闭右开区间0..<rating实现相同效果,避免嵌套ForEach的逻辑歧义:

Picker("Rating", selection: $rating) {
    ForEach(1..<6, id: \.self) { rating in
        HStack {
            ForEach(0..<rating, id: \.self) { _ in
                Image(systemName: "star")
            }
        }
        .tag(rating)
    }
}

两种写法都能实现每行依次显示1-5颗星的效果,且能正确绑定选择值。

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.08.06 17:20:42