英文:
Status bar length
问题
I have a status bar that I made based on Ali's answer here:
我有一个状态栏,是基于Ali的这里的答案创建的:
I shortened the appearance of the left-hand side of the status bar by changing the circle's trim from 0.3 to 0.35 so that it does not interfere by appearing over my labels.
我通过将圆的截取从0.3更改为0.35来缩短状态栏左侧的外观,以防止它出现在我的标签上方。
I would like to shorten the right-hand side as well but do not understand what CGFloat(self.progress) is and how to shorten it without causing any issues with showing the correct progress being made.
我也想缩短右侧,但不理解CGFloat(self.progress)是什么,以及如何缩短它而不会导致显示正确进度时出现任何问题。
How do I shorten the appearance of the right-hand side of the progress bar?
我如何缩短进度条右侧的外观?
struct ProgressBar: View {
@Binding var progress: Float
var body: some View {
VStack{
Label("Address: 0x1c000", systemImage: "target")
.foregroundColor(Color(hex: "8f8f8f"))
ZStack {
Circle()
.trim(from: 0.35, to: 0.85)
.stroke(style: StrokeStyle(lineWidth: 12.0, lineCap: .round, lineJoin: .round))
.opacity(0.3)
.foregroundColor(Color.gray)
.rotationEffect(.degrees(54.5))
Circle()
.trim(from: 0.35, to: CGFloat(self.progress))
.stroke(style: StrokeStyle(lineWidth: 12.0, lineCap: .round, lineJoin: .round))
.fill(AngularGradient(gradient: Gradient(stops: [
.init(color: Color.init(hex: "daff00"), location: 0.39000002),
//.init(color: Color.init(hex: "E59148"), location: 0.48000002),
.init(color: Color.init(hex: "00ff04"), location: 0.5999999),
//.init(color: Color.init(hex: "EEED56"), location: 0.7199998),
.init(color: Color.init(hex: "32E1A0"), location: 0.8099997)]), center: .center))
.rotationEffect(.degrees(54.5))
VStack{
Text("824").font(Font.system(size: 44)).bold().foregroundColor(Color.init(hex: "ffffff"))
//Text("Please standby...").bold().foregroundColor(Color.init(hex: "FF6600"))
Label("Please standby...", systemImage: "clock")
.foregroundColor(Color(hex: "FF6600"))
Label("Uploading memory model to controller", systemImage: "")
.foregroundColor(Color(hex: "8f8f8f"))
}
}
}
}
}
struct ProgressBarTriangle: View {
@Binding var progress: Float
var body: some View {
ZStack {
Image("triangle").resizable().frame(width: 10, height: 10, alignment: .center)
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
extension Color {
init(hex: String) {
let hex = hex.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
var int: UInt64 = 0
Scanner(string: hex).scanHexInt64(&int)
let a, r, g, b: UInt64
switch hex.count {
case 3: // RGB (12-bit)
(a, r, g, b) = (255, (int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17)
case 6: // RGB (24-bit)
(a, r, g, b) = (255, int >> 16, int >> 8 & 0xFF, int & 0xFF)
case 8: // ARGB (32-bit)
(a, r, g, b) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF)
default:
(a, r, g, b) = (1, 1, 1, 0)
}
self.init(
.sRGB,
red: Double(r) / 255,
green: Double(g) / 255,
blue: Double(b) / 255,
opacity: Double(a) / 255
)
}
}
英文:
I have a status bar that I made based on Ali's answer here:
I shortened the appearance of the left hand side of the status bar by changing the circles trim from 0.3 to 0.35 so that it does not interfere by appearing over my labels. I would like to shorten the right hand side as well but do not understand what CGFloat(self.progress) is and how to shorten it without causing any issues with showing the correct progress being made. How do I shorten the appearance of the right hand side of the progress bar?
struct ProgressBar: View {
@Binding var progress: Float
var body: some View {
VStack{
Label("Address: 0x1c000", systemImage: "target")
.foregroundColor(Color(hex: "8f8f8f"))
ZStack {
Circle()
.trim(from: 0.35, to: 0.85)
.stroke(style: StrokeStyle(lineWidth: 12.0, lineCap: .round, lineJoin: .round))
.opacity(0.3)
.foregroundColor(Color.gray)
.rotationEffect(.degrees(54.5))
Circle()
.trim(from: 0.35, to: CGFloat(self.progress))
.stroke(style: StrokeStyle(lineWidth: 12.0, lineCap: .round, lineJoin: .round))
.fill(AngularGradient(gradient: Gradient(stops: [
.init(color: Color.init(hex: "daff00"), location: 0.39000002),
//.init(color: Color.init(hex: "E59148"), location: 0.48000002),
.init(color: Color.init(hex: "00ff04"), location: 0.5999999),
//.init(color: Color.init(hex: "EEED56"), location: 0.7199998),
.init(color: Color.init(hex: "32E1A0"), location: 0.8099997)]), center: .center))
.rotationEffect(.degrees(54.5))
VStack{
Text("824").font(Font.system(size: 44)).bold().foregroundColor(Color.init(hex: "ffffff"))
//Text("Please standby...").bold().foregroundColor(Color.init(hex: "FF6600"))
Label("Please standby...", systemImage: "clock")
.foregroundColor(Color(hex: "FF6600"))
Label("Uploading memory model to controller", systemImage: "")
.foregroundColor(Color(hex: "8f8f8f"))
}
}
}
}
}
struct ProgressBarTriangle: View {
@Binding var progress: Float
var body: some View {
ZStack {
Image("triangle").resizable().frame(width: 10, height: 10, alignment: .center)
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
extension Color {
init(hex: String) {
let hex = hex.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
var int: UInt64 = 0
Scanner(string: hex).scanHexInt64(&int)
let a, r, g, b: UInt64
switch hex.count {
case 3: // RGB (12-bit)
(a, r, g, b) = (255, (int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17)
case 6: // RGB (24-bit)
(a, r, g, b) = (255, int >> 16, int >> 8 & 0xFF, int & 0xFF)
case 8: // ARGB (32-bit)
(a, r, g, b) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF)
default:
(a, r, g, b) = (1, 1, 1, 0)
}
self.init(
.sRGB,
red: Double(r) / 255,
green: Double(g) / 255,
blue: Double(b) / 255,
opacity: Double(a) / 255
)
}
}
答案1
得分: 1
以下是您要翻译的部分:
有两个圆形视图,第一个是背景(灰色),第二个是进度。两个圆都具有修剪功能,用于隐藏视图的一部分,而且两者应该具有相同的值。由于第二个圆是进度,它使用progress
变量并更新修剪的to
值,问题是为了使视图正常工作,进度需要具有最大值0.85,以匹配第一个圆。解决这个问题的方法是使progress
变量具有从0到1的百分比值,然后将该进度转换为CGFloat,在其中0%为0.35,100%为0.85以匹配第一个圆:.trim(from: 0.35, to: 0.35 + (0.5 * CGFloat(self.progress)))
示例:
struct ProgressBar: View {
@State var progress: Float = 0
let leftHandSide: CGFloat = 0.35
let rightHandSide: CGFloat = 0.5
var body: some View {
VStack{
Label("Address: 0x1c000", systemImage: "target")
.foregroundColor(Color(hex: "8f8f8f"))
ZStack {
Circle()
.trim(from: leftHandSide, to: rightHandSide)
.stroke(style: StrokeStyle(lineWidth: 12.0, lineCap: .round, lineJoin: .round))
.opacity(0.3)
.foregroundColor(Color.gray)
.rotationEffect(.degrees(54.5))
Circle()
.trim(from: leftHandSide, to: leftHandSide + ((rightHandSide - leftHandSide) * CGFloat(self.progress)))
.stroke(style: StrokeStyle(lineWidth: 12.0, lineCap: .round, lineJoin: .round))
.fill(AngularGradient(gradient: Gradient(stops: [
.init(color: Color.init(hex: "daff00"), location: 0.39000002),
//.init(color: Color.init(hex: "E59148"), location: 0.48000002),
.init(color: Color.init(hex: "00ff04"), location: 0.5999999),
//.init(color: Color.init(hex: "EEED56"), location: 0.7199998),
.init(color: Color.init(hex: "32E1A0"), location: 0.8099997)]), center: .center))
.rotationEffect(.degrees(54.5))
VStack{
Text("824").font(Font.system(size: 44)).bold().foregroundColor(Color.init(hex: "ffffff"))
//Text("Please standby...").bold().foregroundColor(Color.init(hex: "FF6600"))
Label("Please standby...", systemImage: "clock")
.foregroundColor(Color(hex: "FF6600"))
Label("Uploading memory model to controller", systemImage: "")
.foregroundColor(Color(hex: "8f8f8f"))
}
}
Button("Increase") {
self.progress = min(self.progress + 0.05, 1)
}
Button("Reset") {
self.progress = 0
}
}.frame(width: 300, height: 300)
}
}
英文:
There are two circle views, the first one is the background (grey) and the second one is the progress. Both circles have the trim function which is used to hide part of the view, and both should have the same values. Since the second circle is the progress it uses the progress
variable and updates the to
value of the trim, the problem is that for the view to work correctly the progress needs to have a maximum value of 0.85 to match the first circle. An approach to this is to make the progress
var have a percentage value from 0 to 1 and them convert this progress to a CGFloat in with 0% is 0.35 and 100% is 0.85 to match the first circle: .trim(from: 0.35, to: 0.35 + (0.5 * CGFloat(self.progress)))
Example:
struct ProgressBar: View {
@State var progress: Float = 0
let leftHandSide: CGFloat = 0.35
let rightHandSide: CGFloat = 0.5
var body: some View {
VStack{
Label("Address: 0x1c000", systemImage: "target")
.foregroundColor(Color(hex: "8f8f8f"))
ZStack {
Circle()
.trim(from: leftHandSide, to: rightHandSide)
.stroke(style: StrokeStyle(lineWidth: 12.0, lineCap: .round, lineJoin: .round))
.opacity(0.3)
.foregroundColor(Color.gray)
.rotationEffect(.degrees(54.5))
Circle()
.trim(from: leftHandSide, to: leftHandSide + ((rightHandSide - leftHandSide) * CGFloat(self.progress)))
.stroke(style: StrokeStyle(lineWidth: 12.0, lineCap: .round, lineJoin: .round))
.fill(AngularGradient(gradient: Gradient(stops: [
.init(color: Color.init(hex: "daff00"), location: 0.39000002),
//.init(color: Color.init(hex: "E59148"), location: 0.48000002),
.init(color: Color.init(hex: "00ff04"), location: 0.5999999),
//.init(color: Color.init(hex: "EEED56"), location: 0.7199998),
.init(color: Color.init(hex: "32E1A0"), location: 0.8099997)]), center: .center))
.rotationEffect(.degrees(54.5))
VStack{
Text("824").font(Font.system(size: 44)).bold().foregroundColor(Color.init(hex: "ffffff"))
//Text("Please standby...").bold().foregroundColor(Color.init(hex: "FF6600"))
Label("Please standby...", systemImage: "clock")
.foregroundColor(Color(hex: "FF6600"))
Label("Uploading memory model to controller", systemImage: "")
.foregroundColor(Color(hex: "8f8f8f"))
}
}
Button("Increase") {
self.progress = min(self.progress + 0.05, 1)
}
Button("Reset") {
self.progress = 0
}
}.frame(width: 300, height: 300)
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论