英文:
How to center view horizontally in SwiftUI?
问题
以下是代码的翻译部分：
NavbarView() {
TextField("Search", text: $searchText).padding()
Spacer()
Picker(selection: $sharedState.typeTreeViewRole, label: Text("View")) {
Text("Business").tag(TypeTreeViewRole.business)
Text("Expert").tag(TypeTreeViewRole.expert)
}
.frame(width: 150) // 为Picker设置固定宽度
.padding()
.pickerStyle(SegmentedPickerStyle())
Spacer()
Button(action: {}) {
Text("Create Type tree")
}
}
关于您提到的问题，Picker 不是居中，而是在右侧。如何修复呢？
英文:
NavbarView() {
TextField("Search", text: $searchText).padding()
Spacer()
Picker(selection: $sharedState.typeTreeViewRole, label: Text("View")) {
Text("Business").tag(TypeTreeViewRole.business)
Text("Expert").tag(TypeTreeViewRole.expert)
}
.frame(width: 150) // Set a fixed width for the Picker
.padding()
.pickerStyle(SegmentedPickerStyle())
Spacer()
Button(action: {}) {
Text("Create Type tree")
}
}
look like this:
Picker is not centerered, but it is on the right. Why? How to fix?
答案1
得分: 1
搜索字段占据了所有可用空间，而您的间距处于它们的最小尺寸。即使搜索字段没有这样做，它可能也不会居中 - 您没有告诉布局引擎您想要的位置。
在SwiftUI中，这些布局问题可能会令人沮丧，有很多方法可以解决。其中一个选项是，不使用间距，而是为每个组件设置最大宽度和对齐方式：
NavbarView() {
TextField("搜索", text: $searchText).padding()
.frame(maxWidth: .infinity, alignment: .leading)
Picker(selection: $sharedState.typeTreeViewRole, label: Text("视图")) {
Text("业务").tag(TypeTreeViewRole.business)
Text("专家").tag(TypeTreeViewRole.expert)
}
.frame(maxWidth: .infinity)
.pickerStyle(SegmentedPickerStyle())
Button(action: {}) {
Text("创建类型树")
}
.frame(maxWidth: .infinity, alignment: .trailing)
}
在没有额外信息的情况下，布局引擎会使每个视图占据相等的空间，而对齐参数将内容放在每个块的适当空间中。
英文:
The search field is taking up all of the available space, and your spacers are at their minimum sizes. Even if the search field wasn't doing that, it probably wouldn't be centered - you're not telling the layout engine that's what you want.
These layout things in SwiftUI can be frustrating and there are lots of ways to solve them. One option is that instead of spacers, set frames with maximum width and alignments for each component:
NavbarView() {
TextField("Search", text: $searchText).padding()
.frame(maxWidth: .infinity, alignment: .leading)
Picker(selection: $sharedState.typeTreeViewRole, label: Text("View")) {
Text("Business").tag(TypeTreeViewRole.business)
Text("Expert").tag(TypeTreeViewRole.expert)
}
.frame(maxWidth: .infinity)
.pickerStyle(SegmentedPickerStyle())
Button(action: {}) {
Text("Create Type tree")
}
.frame(maxWidth: .infinity, alignment: .trailing)
}
Given no additional information, the layout engine will make each view take up an equal amount of space, and the alignment parameter puts the content in the appropriate space for each block.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论