当我更改 Toggle 元素的样式时，为什么 SwiftUI 表单中的元素会水平对齐？
问题描述 投票：0回答：1
我尝试为 MacOS 做一个测试项目，因为我目前正在学习 Swift/SwiftUI 并遇到了表单和切换元素的问题。当我添加一个切换元素时，一切看起来都应该如此，但是一旦我添加 .switch 样式，表单的每个新“行”都会与 Switch 的开头对齐。
我尝试说唱 Groups、VStacks 之类的东西，但没有任何帮助。 这是我的代码：
import SwiftUI
import Foundation`
let serverNameList = ["HTTP Server", "Test", "IOT", "Messenger"]
// view
struct ContentView: View {
// state variables
@State private var companiesExpanded = true
@State private var isHTTPServerOn = true
// body
var body: some View {
VStack {
var serverImage = Image(systemName: "globe")
.padding(10.0)
.imageScale(.large)
.foregroundStyle(.tint)
NavigationSplitView {
DisclosureGroup(isExpanded: $companiesExpanded) {
ForEach(serverNameList, id: \.self) { serverName in
NavigationLink(destination: Text("Destination")) {
Label {
Text(serverName)
} icon: {
Image(systemName: "server.rack")
.foregroundStyle(Color.blue)
}
.frame(minWidth: 100,
idealWidth: 200,
maxWidth: 300,
alignment: .leading)
.padding(5)
}
.buttonStyle(PlainButtonStyle())
.navigationSubtitle("Subtitle")
}
} label: {
Text("Server")
.font(.subheadline)
.fontWeight(.semibold)
}
.padding(.horizontal, 10)
.frame(minWidth: 120,
idealWidth: 180,
maxWidth: 350,
minHeight: 120,
idealHeight: 300,
alignment: .top)
Spacer()
} detail: {
VStack(alignment: .leading) {
HStack(alignment: .top) {
// form 1
Form {
HStack {
Text("Name")
.frame(minWidth: 100,
idealWidth: 100,
maxWidth: 150,
minHeight: 25,
idealHeight: 30,
maxHeight: 40,
alignment: .leading)
Text("HTTP Server")
.frame(minWidth: 120,
idealWidth: 200,
maxWidth: 220,
minHeight: 25,
idealHeight: 30,
maxHeight: 40,
alignment: .trailing)
}
Divider()
HStack {
Text("Version")
.frame(minWidth: 100,
idealWidth: 100,
maxWidth: 150,
minHeight: 25,
idealHeight: 30,
maxHeight: 40,
alignment: .leading)
Text("0.13.2")
.frame(minWidth: 120,
idealWidth: 200,
maxWidth: 220,
minHeight: 25,
idealHeight: 30,
maxHeight: 40,
alignment: .trailing)
}
Divider()
HStack {
Text("Status")
.frame(minWidth: 100,
idealWidth: 100,
maxWidth: 150,
minHeight: 25,
idealHeight: 30,
maxHeight: 40,
alignment: .leading)
HStack {
Image(systemName: "circle.fill")
.foregroundStyle(Color.green)
.frame(width: 8,
height: 8,
alignment: .center)
Text("ONLINE")
}
.frame(minWidth: 120,
idealWidth: 200,
maxWidth: 220,
minHeight: 25,
idealHeight: 30,
maxHeight: 40,
alignment: .trailing)
}
Divider()
HStack {
Text("Domain")
.frame(minWidth: 100,
idealWidth: 100,
maxWidth: 150,
minHeight: 25,
idealHeight: 30,
maxHeight: 40,
alignment: .leading)
Text("IPv4")
.frame(minWidth: 120,
idealWidth: 200,
maxWidth: 220,
minHeight: 25,
idealHeight: 30,
maxHeight: 40,
alignment: .trailing)
}
Divider()
HStack {
Text("Connections")
.frame(minWidth: 100,
idealWidth: 100,
maxWidth: 150,
minHeight: 25,
idealHeight: 30,
maxHeight: 40,
alignment: .leading)
Text("6")
.frame(minWidth: 120,
idealWidth: 200,
maxWidth: 220,
minHeight: 25,
idealHeight: 30,
maxHeight: 40,
alignment: .trailing)
}
Divider()
HStack {
Text("Owner")
.frame(minWidth: 100,
idealWidth: 100,
maxWidth: 150,
minHeight: 25,
idealHeight: 30,
maxHeight: 40,
alignment: .leading)
Text("Max Mustermann")
.frame(minWidth: 120,
idealWidth: 200,
maxWidth: 220,
minHeight: 25,
idealHeight: 30,
maxHeight: 40,
alignment: .trailing)
}
}
.padding(10)
.frame(minWidth: 260,
idealWidth: 300,
maxWidth: 370,
minHeight: 210,
idealHeight: 240,
maxHeight: 300,
alignment: .topLeading)
.overlay(RoundedRectangle(cornerRadius: 6)
.stroke(Color.black.opacity(0.1),
lineWidth: 1))
// form 2
Form {
HStack {
Text(isHTTPServerOn ? "Turn off" : "Turn on")
Toggle("", isOn: $isHTTPServerOn)
.toggleStyle(.switch)
.frame(minWidth: 120,
idealWidth: 200,
maxWidth: 220,
minHeight: 25,
idealHeight: 30,
maxHeight: 40,
alignment: .trailing)
}
Divider()
HStack {
Text("Version")
.frame(minWidth: 100,
idealWidth: 100,
maxWidth: 150,
minHeight: 25,
idealHeight: 30,
maxHeight: 40,
alignment: .leading)
Text("0.13.2")
.frame(minWidth: 120,
idealWidth: 200,
maxWidth: 220,
minHeight: 25,
idealHeight: 30,
maxHeight: 40,
alignment: .trailing)
}
Divider()
HStack {
Text("Status")
.frame(minWidth: 100,
idealWidth: 100,
maxWidth: 150,
minHeight: 25,
idealHeight: 30,
maxHeight: 40,
alignment: .leading)
HStack {
Image(systemName: "circle.fill")
.foregroundStyle(Color.green)
.frame(width: 8,
height: 8,
alignment: .center)
Text("ONLINE")
}
.frame(minWidth: 120,
idealWidth: 200,
maxWidth: 220,
minHeight: 25,
idealHeight: 30,
maxHeight: 40,
alignment: .trailing)
}
Divider()
HStack {
Text("Domain")
.frame(minWidth: 100,
idealWidth: 100,
maxWidth: 150,
minHeight: 25,
idealHeight: 30,
maxHeight: 40,
alignment: .leading)
Text("IPv4")
.frame(minWidth: 120,
idealWidth: 200,
maxWidth: 220,
minHeight: 25,
idealHeight: 30,
maxHeight: 40,
alignment: .trailing)
}
Divider()
HStack {
Text("Connections")
.frame(minWidth: 100,
idealWidth: 100,
maxWidth: 150,
minHeight: 25,
idealHeight: 30,
maxHeight: 40,
alignment: .leading)
Text("6")
.frame(minWidth: 120,
idealWidth: 200,
maxWidth: 220,
minHeight: 25,
idealHeight: 30,
maxHeight: 40,
alignment: .trailing)
}
Divider()
HStack {
Text("Owner")
.frame(minWidth: 100,
idealWidth: 100,
maxWidth: 150,
minHeight: 25,
idealHeight: 30,
maxHeight: 40,
alignment: .leading)
Text("Max Mustermann")
.frame(minWidth: 120,
idealWidth: 200,
maxWidth: 220,
minHeight: 25,
idealHeight: 30,
maxHeight: 40,
alignment: .trailing)
}
}
.padding(10)
.frame(minWidth: 260,
idealWidth: 300,
maxWidth: 370,
minHeight: 210,
idealHeight: 240,
maxHeight: 300,
alignment: .topLeading)
.overlay(RoundedRectangle(cornerRadius: 6)
.stroke(Color.black.opacity(0.1),
lineWidth: 1))
}
}
.padding(1)
.frame(minWidth: 4 * 10 + 220 + 2,
idealWidth: 3*(300+2),
maxWidth: .infinity,
minHeight: 1*(210+2),
idealHeight: 3*(240+2),
maxHeight: .infinity,
alignment: .topLeading)
}
}
}
}
#Preview {
ContentView()
}
这是它大致外观的屏幕截图（这里的toogle 没有.switch 样式）：
这是它的实际外观：
提前谢谢大家！
编辑：
我还添加了红色边框以供查看。这是屏幕截图：
1个回答
0
投票
投票
@Radioactive 是对的。在我将表单更改为 VStack 后，一切看起来都应该如此。谢谢@Radioactive！尽管如此，表单中的切换以这种方式运行还是很奇怪。是否可以通过任何形式联系 Apple 提及此问题？
最新问题
- 编译器怎么看不出结果是整数
- %5c导致C语言输出异常的问题
- 在控制台应用程序中处理 Ctrl+C 时，有没有办法让所有线程的所有finally块都运行
- 如何从多列进行one-hot编码
- Go Fyne 无法显示对话框
- 不同编程语言的目标代码兼容吗？
- VC10（sp1）编译的C++库可以通过VC11编译的代码链接吗？
- 是目标文件（.o）中包含的.c文件中的头文件路径引用
- 在UART中使用带有rp pico的DY-HV20T模块
- 如何在windows上回收c++ unordered_map的内存
- AWS Athena DynamoDB Connector 是否无法扫描名称中包含大写字母的 DynamoDB 表？
- Spark 2.4.3 - Scala 2.12.3 - 对象 apache 不是包 org 的成员
- 关于连续排列div的问题
- AtomicStampedReference#compareAndSet 使用逻辑连接词顺序执行检查
- 如何在 VSCode 中搜索旧 git 更改中的字符串？
- PowerShell：递归浏览文件夹、其子文件夹和文件 -> 将文件信息导出到 .csv
- 用于发布列表的 HttpContent<ArraySegment<byte>> 通过 HttpClient
- Geonode 项目：部署在子文件夹中
- 在 Ubuntu 22.04 中无法拖放
- 在本地与生产 Astro + Django + Nginx 上重定向时的不同行为
© www.soinside.com 2019 - 2024. All rights reserved.