首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用SwiftUI显示准确的星级?

SwiftUI是一种用于构建iOS、macOS、watchOS和tvOS应用程序的用户界面工具包。它是苹果公司推出的一种现代化的声明式UI框架,可以帮助开发者更快速、更简单地构建用户界面。

要显示准确的星级,可以使用SwiftUI中的RatingView来实现。下面是一个示例代码:

代码语言:txt
复制
import SwiftUI

struct RatingView: View {
    @Binding var rating: Int
    
    var body: some View {
        HStack {
            ForEach(1...5, id: \.self) { index in
                Image(systemName: index <= rating ? "star.fill" : "star")
                    .foregroundColor(.yellow)
                    .onTapGesture {
                        self.rating = index
                    }
            }
        }
    }
}

struct ContentView: View {
    @State private var rating = 3
    
    var body: some View {
        VStack {
            Text("请选择星级:\(rating)")
            RatingView(rating: $rating)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

在上面的代码中,我们定义了一个RatingView,它接受一个绑定的rating属性,用于表示星级评分。在RatingView中,我们使用HStack和ForEach来创建一行星星图标,根据rating属性来确定星星的填充状态。当用户点击星星时,我们通过onTapGesture将对应的星级赋值给rating属性。

在ContentView中,我们使用VStack来垂直排列文本和RatingView。通过@State属性包装的rating属性,我们可以在视图中进行双向绑定,以便实时更新星级评分。

这是一个简单的示例,你可以根据实际需求进行扩展和定制。如果你想了解更多关于SwiftUI的信息,可以参考腾讯云的官方文档:SwiftUI开发指南

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何SwiftUI 视图中显示应用图标和版本

在本文中,我将展示如何创建一个可访问 SwiftUI 视图,既能显示应用图标和版本,又能在各种文本大小和外观下看起来都很好:获取应用图标构建视图第一步是从主包中获取应用图标。...创建 SwiftUI 视图现在让我们将所有内容结合起来,创建一个 SwiftUI 视图,显示应用图标和版本:AppVersionInformationView.swiftimport SwiftUIstruct...但是,应用图标只能作为命名 UIImage 检索,所以我们需要先创建 UIImage,然后再转换为 SwiftUI Image。我们在一个垂直堆栈中显示应用版本,包括一个标签和应用版本字符串。...SwiftUI 应用中显示应用图标和版本信息。...在获取到应用图标和版本信息后,我们创建了一个 SwiftUI 视图来展示这些信息。该视图使用水平堆栈(HStack)布局,将应用图标和版本信息并排显示

16022
  • SwiftUI:视图显示和隐藏动画

    SwiftUI最强大功能之一是能够自定义视图显示和隐藏方式。以前,您已经了解了如何使用常规if条件有条件地包含视图,这意味着当条件更改时,我们可以从视图层次结构中插入或移除视图。...转换控制插入和删除方式,我们可以使用内置转换,以不同方式组合它们,甚至创建完全自定义转换。...首先,我们添加一些可以操作状态: @State private var isShowingRed = false 接下来,我们使用该状态作为显示矩形条件: if isShowingRed {...通过使用withAnimation()包装状态更改,我们可以获得SwiftUI默认视图转换,如下所示: withAnimation { self.isShowingRed.toggle() }...一个有用方法是不对称,它允许我们在显示视图时使用一个转换,在视图消失时使用另一个转换。

    4.6K30

    如何使用 SwiftUI 中 ScrollView 滚动偏移

    前言WWDC 24 已经结束,我决定开始写一些关于 SwiftUI 框架即将推出新特性文章。今年,苹果继续填补空白,引入了对滚动位置更细粒度控制。本周,我们将学习如何操作和读取滚动偏移。...使用 scrollPositionSwiftUI 框架已经允许我们通过视图标识符跟踪和设置滚动视图位置。这种方法效果不错,但不足以更准确地跟踪用户交互。...提供一个可以运行示例下面是一个可以运行示例代码,演示如何读取和显示滚动视图位置。...总结在本文中,我们深入探讨了 SwiftUI 框架中 ScrollView 新特性,特别是如何通过 ScrollPosition 类型实现更精确滚动控制。...我们介绍了如何使用 ScrollPosition 类型进行滚动位置设置和读取,包括使用偏移量、视图标识符等方式进行操作。此外,我们还展示了如何通过动画和事件处理来增强用户体验。

    16110

    使用 SwiftUI Eager Grids

    介绍 早在 2020 年,我们就拥有了在 SwiftUI(LazyVGrid 和 LazyHGrid)中绘制网格新视图控件。两年后,我们又获得了另一种在网格(Grid)中显示视图视图控件。...当没有布局容器存在时,SwiftUI 会隐式使用 VStack。...但为了让事情变得更容易,我创建了一个名为 Grid Trainer 小应用程序。该应用程序可让您以交互方式使用所有这些网格参数。当您更改网格时,该应用程序还将向您显示生成您创建网格代码。...蜂窝再访 在文章 Impossible Grids 中,我们是否探索了Lazy Grid,我写了一个示例,说明如何使用这些网格来呈现蜂窝中单元格。...请注意,单元格翻转并不是练习一部分,但我也将其包含在要点中。 以下视频显示了起点以及它如何变成蜂窝: 步骤#1:我们从方形图片网格开始。步骤#2:六边形没有 1:1 尺寸比。

    4.4K20

    走进科学:我是如何“黑了”星级酒店

    五一期间,实在是因为离家出走又不能睡大街所以去了一家星级宾馆(这理由我自己都不信,但真的不是去开房,大家就信了,好不好?) ?...我本着一个正义心,毅然决然决定:把片全部拷走! 首先,我忍着强烈恶心打开房间内台式机,毕竟它是一条连在内网通路,net view一下,看到了几台机器: ?...结果令我大失所望,这台所谓//server是一台普通机器,跟房间机器一样 xp系统,没开多余端口,怀疑是宾馆网管办公室机器,用来监管和控制网络流量(小提示:宾馆一般安装网路岗这类监管软件,...由于我不知道tp路由中继密码,所以我想是能把我3gwifi发射信号ssid改成Etv-cscs08,且拔掉真实Etv-cscs08电源,让电视机连接上我3g网卡,然后我就可以嗅探电视机一些配置信息报文...蓝色箭头是宾馆常规示例图,绿色箭头是我想做事情: 现在有两个方案可以完成上述想法: 1.把中继上网线拔掉,直接连入我笔记本~ 2.获得tp中继无线密码。

    1.3K100

    如何SwiftUI使用 AccessibilityCustomContentKey 修饰符

    前言SwiftUI 3 发布了许多新辅助功能 API,我们可以利用这些 API 以轻松方式显著提高用户体验。...本篇文章来聊聊另一个新 API,我们可以使用 SwiftUI新 accessibilityCustomContent 视图修饰符提供自定义辅助功能内容。...通常,我们使用不同字体和颜色在视觉上为文本设置优先级,但是如何在辅助技术中实现相同影响呢?...使用修饰符SwiftUI 通过全新 accessibilityCustomContent视图修饰符提供了一种使用不同重要性生成自定义辅助功能内容方法。让我们看看如何使用它。...ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() }}运行截图:总结今天,我们学习了如何使用

    10310

    如何SwiftUI 中熟练使用 sensoryFeedback 修饰符

    下面我们将学习如何使用 sensoryFeedback 修饰符在应用程序中不同操作中提供触觉反馈。...背景介绍在 iOS 17 之前,如果你想要从 SwiftUI 视图中向用户提供触觉反馈,你会使用其中一个 UIKit(或 AppKit)反馈生成器。...: 2.0)// 具有重量并增加强度impact.impact(weight: .heavy, intensity: 2.0)基本用法要在 SwiftUI 视图中播放触觉反馈,我们只需要使用 sensoryFeedback...使用条件闭包触发如果要更灵活地控制何时触发反馈,请使用带有条件闭包版本视图修饰符。...= nil}条件闭包接收监视触发器值旧值和新值。在闭包中,返回一个布尔值,指示是否应播放反馈。使用反馈闭包触发要控制播放何种反馈,请使用视图修饰符反馈闭包版本。

    12921

    如何SwiftUI 中熟练使用 visualEffect 修饰符

    前言在 WWDC 23 中,SwiftUI 引入了一个名为 visualEffect 新视图修饰符。此修饰符允许我们通过访问特定视图布局信息来附加一组可动画化视觉效果。...下面我们将学习如何SwiftUI使用 visualEffect 视图修饰符。介绍 visualEffect让我们从使用 visualEffect 视图修饰符最简单示例开始。...在 SwiftUI 框架先前版本中,我们有视图修饰符,如缩放、偏移、模糊、对比度、饱和度、不透明度、旋转等。它们全部都是视觉效果,并且现在符合 VisualEffect 协议。...总结本文章介绍了在 SwiftUI 中引入新视图修饰符 visualEffect。该修饰符允许我们通过访问特定视图布局信息来附加一组可动画视觉效果。...给出了一些使用 visualEffect 简单示例,包括如何使用效果闭包以及如何应用一些常见视觉效果(例如模糊、透明度、缩放)。

    12311

    优化在 SwiftUI List 中显示大数据集响应效率

    SwiftUI 视图生命周期研究[3] 一文中,我对 List 如何对子视图显示进行优化做了一定介绍。...按照正常逻辑,当进入列表视图 ListEachRowHasID 后 List 只应该实例化十几个 ItemRow 子视图 ( 按屏幕显示需要 ),即便使用 scrollTo 滚动到列表底部,List...但在某些情况下,我们需要使用显式标识( Explicit identity )方式来帮助 SwiftUI 辨认视图。...虽然我们已经找到了导致进入列表视图卡顿原因,但如何在不影响效率情况下通过 scrollTo 来实现到列表端点滚动呢?...升降序切换 对数据进行降序显示且仅允许使用者手工滚动列表。系统中邮件、备忘录等应用均采用此种方式。

    9.1K20

    如何SwiftUI 列表变得更加灵活

    SwiftUI 中初版概念和 API 编写,下面让我们尝试使用新功能来为我们列表实现自定义样式,并且使代码更加健壮。...使用新速记语法 让我们从一个很小特性开始,这是一个非常受欢迎变化,可以使用类似 enum 速记语法来引用 SwiftUI 附带任何内置 ListStyle 类型。...元素绑定和自定义滑动操作 接下来,让我们看看如何将完全自定义滑动操作添加到列表中。...SwiftUI使用,请查看昨天这篇文章[1],不要错过真正重要“在 Swift 中认识 async/await[2]”WWDC 会议。...item 上调用,而不是在列表本身上调用,这为我们提供了很大灵活性,可以根据想要构建 UI 类型动态隐藏或显示每个分隔符。

    4.9K41

    为什么SwiftUI视图使用结构体?

    如果您曾经为UIKit或AppKit(AppleiOS和macOS原始用户界面框架)编程,您会知道它们使用类而非结构体来构造视图。...我之所以说性能因素,是因为很多人认为这是SwiftUI使用结构体主要原因,而实际上这只是更大范围一部分。...得益于现代iPhone强大功能,我不会慎重考虑后创建1000个整数甚至100,000个整数——眨眼之间就会发生。1000个SwiftUI视图甚至100,000个SwiftUI视图也是如此。...您会发现,类能够自由更改其值,这可能导致代码混乱——SwiftUI如何知道什么更改了值并需要更新UI?...实际上,您不能找到比使用Color.red作为视图更好主意:除了“用红色填充我空间”之外,它不包含任何信息。

    3.2K10

    为什么 SwiftUI 视图使用结构体

    如果您曾经为 UIKit 或 AppKit(Apple iOS 和 macOS 原始用户界面框架)编程,您会知道它们使用类而非结构体来构造视图。...我之所以说性能因素,是因为很多人认为这是 SwiftUI 使用结构体主要原因,而实际上这只是更大范围一部分。...您会发现,类能够自由更改其值,这可能导致代码混乱—— SwiftUI 如何知道什么更改了值并需要更新 UI?...当您查看可以作为视图事物时,可以看到这一点。我们已经使用了 Color.red 和 LinearGradient 作为视图——包含很少数据简单类型。...实际上,您不能找到比使用 Color.red 作为视图更好主意:除了“用红色填充我空间”之外,它不包含任何信息。

    2.4K50

    如何使用RAG构建准确率更高AI代理

    本教程展示了如何使用检索器从非结构化数据中提取上下文,同时调用 API 获取更多数据来构建代理。...基于函数调用 RAG 代理 结合了两种方法优势,依赖于外部知识库进行准确数据检索,并执行特定函数以高效地完成任务。 RAG 框架中函数调用使检索过程更加结构化。...它使用检索器从存储在 PDF 中非结构化数据中提取上下文,同时调用 API 获取销售信息。 该代理可以访问一组工具和向量数据库。初始提示和注册工具将发送到 LLM。...通过依赖联邦模型概念,我们可以完全避免将上下文发送到基于云 LLM,并使用部署在边缘本地 LLM 来响应查询。...在我下一篇文章(本系列最后一部分)中,我们将看到如何将 RAG 代理概念与联邦语言模型结合起来。敬请关注。

    14410

    SwiftUI 中掌握 ScrollView 使用:滚动可见性

    本周,我们将学习如何使用 onScrollTargetVisibilityChange 和 onScrollVisibilityChange 视图修饰符。...默认情况下,SwiftUI 框架使用 0.5 作为阈值,这意味着至少 50% 视图需要可见,SwiftUI 才会运行操作。但你可以轻松调整此值。...整个示例分为两个部分:一个是显示带有多个文本视图 ScrollView,另一个是显示一个视频播放器视图。...每个数字都显示在一个 Text 视图中,并有不同背景颜色。...总结今天,我们学习了如何跟踪 ScrollView 内特定视图可见性,并监控可见标识符列表。示例展示了如何使用 SwiftUI 滚动可见性修饰符来增强用户体验和交互性。希望能对你有所帮助。

    15210

    如何才能准确测量 APP 功耗?

    -其他模块无效,如gps、cellular、display等 通过BatteryStats class等 -数据更新频率问题 -数据颗粒度问题 -这只是个Java class… 如何直接读取手机硬件功耗...而固定功率以硬编码形式固定在DreamConstants.java中,这些固定功率应该是使用专门设备进行检测出来[2]。...所以为了达到足够高电量计量精度,引入了fuel gauge IC,下图是现在使用比较广泛MAXIM DS2786[3]。...cpu使用并不影响多少电量,相反可以发现电量曲线跟粉红色曲线很相近,再仔细一看原来粉红色曲线是GPU使用,那就难怪了。...通过电量消耗模型估算方法:以PowerTutor为代表,可以检测不同模块功耗,而且数据准确度较高。但对不同机型要有不同模型适配(主要是固定功率),而且软件已停止更新。

    3.4K62
    领券