标签: vstack

我有一个 VStack 和另一个 HStack，里面有按钮。即使我尝试设置按钮的固定宽度和高度，我也遇到了根据按钮内容缩小按钮的问题。

这是主屏幕：

import Foundation
import SwiftUI
import SwiftUINavigator

struct SurveyScreenView: View, IItemView {
    
    var listener: INavigationContainer?
    @State var survey: Survey
    @State var isUp = false
    @State var isDown = false
    
    @State var widthButton: CGFloat = 100
    @State var heightButton: CGFloat = 50
    
    var body: some View {
        NavigationView {
            VStack(alignment: .leading, spacing: 32) {
                Text(survey.title)
                    .font(.title)
                Text(survey.description)
                
                VoteView( survey: $survey, isUp: $isUp, isDown: $isDown)
                
                Spacer()
            }
            .navigationBarItems(leading:
                Button(action: {
                    listener?.pop()
                }, label: {
                    Text("Feed")
                })
            )
            .navigationBarTitle(Text("Survey")) …

使用SwiftUI，我创建了一个VStack，其中包含一些固定元素和一个list元素。原因是，用户仅应滚动固定元素下方的区域。现在，我看到第二个固定元素和列表之间有一个空格。我不知道这个空间是从哪里来的，并想摆脱它，但是不知道如何。该区域标记为红色。

struct DashboardView : View, CoreDataInjected {

    var body: some View {
        GeometryReader { geometry in
            VStack {
                ScopeSelectorView().frame(maxWidth: .infinity).background(ColorPalette.gray)
                BalanceNumberView().frame(maxWidth: .infinity)
                List {
                    DashboardNavigationView(
                        height: geometry.size.height - ScopeSelectorView.height - BalanceNumberView.height
                    ).frame(maxWidth: .infinity).listRowInsets(.zero)
                }
            }
        }.background(Color.red).edgesIgnoringSafeArea(.all)
    }
}

我正在致力于在 SwiftUI 中构建 Apple Watch 屏幕。布局工作得很好，但颜色样式的某些方面我似乎无法弄清楚。这是我的代码：

struct Watch3ThingsMainUI: View {
    var goals: [Goal]

    var body: some View {

        VStack {
            Text("3things")
                .foregroundColor(Color("3thingsBlue"))

            List(goals) { goal in
                HStack {
                    Text(goal.name)

                    Spacer()

                    Image(systemName: "gear")
                }
                .background(Color.blue)
            }
            .background(Color.green)
            .foregroundColor(Color.red)
            .accentColor(Color.yellow)
        }
    }
}

这是它的渲染方式的截图：

您会注意到，HStack 的蓝色背景仅覆盖了一个矩形区域，而不是列表似乎自动创建的整个按钮。奇怪的是，虽然列表支持背景修改器，但它似乎被忽略了——没有任何颜色是绿色的。

我希望能够确定整个按钮的背景，但我想不出一种方法来做到这一点——无论我尝试什么恶作剧，它在 HStack 周围仍然顽固地保持深灰色。

我正在尝试使用 SwiftUI 实现以下网格布局，但不太确定最佳方法。

我的代码在下面，它并没有完全得到我想要的东西，而且有很多嵌套堆栈似乎也很糟糕

VStack {
            
            VStack {
                
                HStack {
                    
                    VStack {
                        
                        Text("Text Here")
                        Text("336.851")
                        
                    }
                    .padding(20)
                    .background(ColorManager.orange)
                    .cornerRadius(10)
                    
                    VStack {
                        
                        Text("Text Here")
                        Text("336.851")
                        
                    }
                    .padding(20)
                    .background(ColorManager.red)
                    .cornerRadius(10)
                    
                }
                
                HStack {
                    
                    VStack {
                        
                        Text("Text Here")
                        Text("336.851")
                        
                    }
                    .padding(20)
                    .background(ColorManager.green)
                    .cornerRadius(10)
                    
                    VStack {

                        Text("Text Here")
                        Text("336.851")

                    }
                    .padding(20)
                    .background(ColorManager.blue)
                    .cornerRadius(10)

                    VStack {

                        Text("Text Here")
                        Text("336.851")

                    }
                    .padding(20)
                    .background(ColorManager.purpleLight)
                    .cornerRadius(10)
                    
                }
                
                
            }
            
        }

我的代码给出了以下结果，我只是不确定如何将框最大化跨越屏幕的一半和三分之一。另外，我对嵌套堆栈采取的方法是否正确？

我试图在 UIKit 中实现一些非常简单的事情 - 一个视图始终位于中心（图像），第二个视图（文本）位于其顶部，两个视图之间有一定的间距。我尝试了许多不同的方法（主要是使用alignmentGuide但没有任何效果如我所愿）。

代码：

ZStack {
    Rectangle()
        .foregroundColor(Color.red)
    
    VStack {
        Text("Test")
            .padding([.bottom], 20) // I want to define spacing between two views
        
        Image(systemName: "circle")
            .resizable()
            .alignmentGuide(VerticalAlignment.center, computeValue: { value in
                value[VerticalAlignment.center] + value.height
            })
            .frame(width: 20, height: 20)
    }
}
.frame(width: 100, height: 100)

结果：

正如您所看到的，图像并不完全居中，它实际上取决于Text. 有没有办法强制垂直和水平对齐在超级视图和布局第二个视图中居中而不影响居中视图？

我在 SwiftUI 中有一个非常基本的视图，其中有一个标签，我正在努力让它向左对齐。这就是它的本质：

VStack(alignment: .leading) {
  Label("Hi", ...)
}
.frame(maxWidth: .infinity)

无论我尝试什么，标签都会保留在视图的中心。我怎样才能解决这个问题？

我想创建一个包含许多Text的VStack，每个 Text 之间的间距为 20 个点。我希望我的VStack与屏幕左侧（或父View 的前导侧）对齐。