我正試圖讓我的控制元件進入。不錯的木板盒子，但我似乎無法適應它們，這可能是我漸進式中的圓圈大小，但可能只是我對堆疊的理解，在使用 .net C sharp 多年后，我只是 swift ui 的新手。
這是我的主要觀點
import SwiftUI
struct CaloriesView: View {
var body: some View {
ZStack {
ProgressRingView()
}
ZStack{
Label("Base Goals", systemImage: "folder.circle").font(.system(size: 30))
}
HStack{
Label("Daily Limit", systemImage: "flag.fill").font(.system(size: 30))
Label("Food", systemImage: "fork.knife").font(.system(size: 30))
}
HStack{
Label("Exercise Taken", systemImage: "flag.fill").font(.system(size: 30))
}
}
}
struct CaloriesView_Previews: PreviewProvider {
static var previews: some View {
CaloriesView()
}
}
但是看起來更多的是左側的進度環和正確對齊的圖示
這是我的圈子我如何在我的進度視圖中創建它
Import SwiftUI
struct ProgressRingView: View {
@State var progress = 0.0
let colors: [Color] = [.yellow, .red,.blue, .purple]
var body: some View {
ZStack{
// MARK:Place Holder Ring
Circle()
.stroke(lineWidth: 20)
.foregroundColor(.gray)
.opacity(0.1)
// MARK: Colored Ring
Circle()
.trim(from: 0.0, to: min(progress,1.0))
.stroke( AngularGradient(gradient: Gradient(colors: colors), center: .center,startAngle: .degrees(0), endAngle: .degrees(360 45)) ,style: StrokeStyle(lineWidth: 15, lineCap: .round, lineJoin: .round))
.rotationEffect((Angle(degrees: 270)))
.animation(.easeInOut(duration: 1.0),value:progress)
.onAppear{
progress=1
}
VStack(spacing:30)
{
//MARK : Elapsed Time
VStack(spacing:5)
{
Text("Calories")
.opacity(0.7)
}
.padding(.top)
//MARK :Remiaing Time
VStack(spacing:5)
{
Text("Rmaining ")
.opacity(0.7)
Text("0:00")
.font(.title2)
.fontWeight(.bold)
}
}
}
.frame(width: 250, height: 250)
.padding()
}
}
struct ProgressRingView_Previews: PreviewProvider {
static var previews: some View {
ProgressRingView()
}
}
編輯
展示我正在尋找的東西的風格，有點像我的健身伙伴，但不完全相同。
uj5u.com熱心網友回復：
我在 iPad 上創建了一個小 Playground 應用程式來展示如何創建這個視圖。
它并不完美，但希望能給你一些指導。
我已經為您提取了幾個視圖到可重用的組件中，并添加了標題等......
import SwiftUI
struct ContentView: View {
var body: some View {
VStack(alignment: .center) {
VStack(alignment: .leading) {
Text("Calories")
.font(.system(.largeTitle))
Text("Remaining = Goal - Food Exercise")
}
DataView()
}
.padding()
.background(Color.init(white: 0.05))
.cornerRadius(16)
.shadow(color: .black, radius: 5, x: 0, y: 0)
}
}
struct DataView: View {
var body: some View {
HStack(spacing: 50) {
CircleView()
VStack(alignment: .leading) {
TagView(
image: .init(systemName: "flag.fill"),
color: .gray,
title: "Base Goal",
number: 2300
)
TagView(
image: .init(systemName: "fork.knife"),
color: .blue,
title: "Food",
number: 0
)
TagView(
image: .init(systemName: "flame.fill"),
color: .orange,
title: "Exercise",
number: 0
)
}
}
}
}
struct TagView: View {
let image: Image
let color: Color
let title: String
let number: Int
var body: some View {
HStack {
image
.resizable()
.aspectRatio(contentMode: .fit)
.foregroundColor(color)
.frame(width: 20, height: 30, alignment: .center)
VStack(alignment: .leading) {
Text(title)
.font(.system(.subheadline))
Text("\(number)")
.font(.system(.headline))
}
}
}
}
struct CircleView: View {
var body: some View {
ZStack {
Circle()
.stroke(
AngularGradient(colors: [.red, .green, .blue, .red], center: .init(x: 0.5, y: 0.5)),
lineWidth: 5
)
.frame(width: 100, height: 100, alignment: .center)
VStack(alignment: .center) {
Text("2300")
.font(.system(.title))
Text("Remaining")
.font(.system(.caption))
}
}
}
}
看起來像這樣...
uj5u.com熱心網友回復：
使用 HStack 和嵌套 VStack 的組合來實作類似的布局：
struct CaloriesView: View {
var body: some View {
HStack {
ProgressRingView()
VStack(alignment: .leading) {
Label("Base Goals", systemImage: "folder.circle")
Label("Daily Limit", systemImage: "flag.fill")
Label("Food", systemImage: "fork.knife")
Label("Exercise Taken", systemImage: "flag.fill")
}
}
.padding()
}
}
這是 iPhone 13 模擬器上的結果：
為了讓它看起來更好看，我還冒昧地修正了一個錯字，從標簽中洗掉了 30 的固定字體大小，并將框架ProgressRingView縮小到 150x150。
請注意，在您的原始代碼中，您使用的是 ZStacks 和 HStacks，其中只有一個視圖：這沒有多大意義，因為堆疊應該布局多個專案，而它們僅對單個專案沒有用。
現在，在我的螢屏截圖中，您可能會注意到標簽的文本并沒有完全對齊，但我建議將其作為單獨的練習進行，因為我們都在這里學習。快樂的 SwiftUIing！
編輯2 當我在回答中嘗試下面的代碼時，我只是得到了獲得漂亮黑框所缺少的東西
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/489133.html