英文:
How to create a custom toolbar?
问题
我想要一个粘性工具栏，它在 SwiftUI 中的 `List` 上方具有多个不同的过滤选项。是否可以在 `List` 的 `.toolbar` 属性中直接放置一个完整的自定义视图？
使用下面的代码，事情看起来非常意外。
```swift
var body: some View {
NavigationView {
List() {
Text("列表项")
}
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
VStack {
Toggle(isOn: $viewModel.isPound) {
Text("测试")
}
.toggleStyle(.switch)
Text("一个控制数据的滑块")
Text("另一个过滤选项")
Text("一些随机信息")
}
}
}
}
}
[![SwiftUI 列表工具栏][1]][1]
[![SwiftUI 列表工具栏滚动][2]][2]
[1]: https://i.stack.imgur.com/hnJWv.png
[2]: https://i.stack.imgur.com/IPNqd.png
英文:
I want to have a sticky toolbar that has multiple different filtering options above a List in SwiftUI. Is there a way to just place a full custom view inside the .toolbar property of a List?
With the below code, things look very unexpected
var body: some View {
NavigationView {
List() {
Text("List item")
}
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
VStack {
Toggle(isOn: $viewModel.isPound) {
Text("test")
}
.toggleStyle(.switch)
Text("A slider to control data")
Text("Another filtering option")
Text("Some random piece of information")
}
}
}
}
}
答案1
得分: 0
NavigationBar 是 iOS 上的固定高度，实际上是为按钮设计的。如果给它添加背景颜色，你会看到问题（以及你可以使用的空间）。
```swift
struct ContentView: View {
@State private var isPound = false
var body: some View {
NavigationView {
List() {
Text("列表项")
}
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
VStack {
Toggle(isOn: $isPound) {
Text("测试")
}
.toggleStyle(.switch)
Text("一个控制数据的滑块")
Text("另一个过滤选项")
Text("一些随机信息")
}
.border(.red)
}
}
.toolbarBackground(.visible, for: .navigationBar)
.toolbarBackground(.red, for: .navigationBar)
}
}
}
[![在此输入图片描述][1]][1]
英文:
The NavigationBar is a fixed height for iOS, and is really designed for buttons. You can see the problem (and the space you have to work with) if you add a background colour to it.
struct ContentView: View {
@State private var isPound = false
var body: some View {
NavigationView {
List() {
Text("List item")
}
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
VStack {
Toggle(isOn: $isPound) {
Text("test")
}
.toggleStyle(.switch)
Text("A slider to control data")
Text("Another filtering option")
Text("Some random piece of information")
}
.border(.red)
}
}
.toolbarBackground(.visible, for: .navigationBar)
.toolbarBackground(.red, for: .navigationBar)
}
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论