SwiftUI:如何将单个工具栏或 ToolbarItem 保留在 NavigationView 堆栈中的下一个视图上?
应用于 NavigationView 目标的每个工具栏实际上都是单独的工具栏,并且一个工具栏通过不透明度过渡更改为另一个工具栏。
如何在下一个目标上保留一个工具栏或仅 ToolbarItem,因此它可以是动画的,例如,假设尾随 ToolbarItem 在 HStack 中包含 2 个按钮,并且我想插入另一个带有动画的按钮,就像我在一个按钮中那样单一视图?
想要完全控制 ToolbarItem,就像它是单个项目一样。
struct Temp_Preview: PreviewProvider {
static var previews: some View {
return NavigationView {
NavigationLink {
Text("TARGE TPAGE")
.toolbar {
ToolbarItem(placement: .navigationBarTrailing) {
ToolBarView(showExtraButton: true)
}
}
} label: {
Text("Next page")
.toolbar {
ToolbarItem(placement: .navigationBarTrailing) {
ToolBarView(showExtraButton: false)
}
}
}
}
.navigationViewStyle(StackNavigationViewStyle())
}
}
struct ToolBarView: View {
let showExtraButton: Bool
var body: some View {
HStack {
let buttonsCount = showExtraButton ? 3 : 2
ForEach(0..<buttonsCount, id: \.self) { index in
Button(action: {}) {
Color.blue
.cornerRadius(5)
.frame(width: 80 - CGFloat(20 * index), height: 20)
}
}
}
}
}
Each toolbar applied to the NavigationView destination is in fact separate toolbar, and one toolbar is changing to another with opacity transition.
How to keep one single toolbar or only ToolbarItem on the next destination, so It could be animated for example, let's say trailing ToolbarItem was containing 2 buttons in HStack, and I want to insert another one with animation like I'd do that in one single View?
Want to take a full control over the ToolbarItem like it was a single item.
struct Temp_Preview: PreviewProvider {
static var previews: some View {
return NavigationView {
NavigationLink {
Text("TARGE TPAGE")
.toolbar {
ToolbarItem(placement: .navigationBarTrailing) {
ToolBarView(showExtraButton: true)
}
}
} label: {
Text("Next page")
.toolbar {
ToolbarItem(placement: .navigationBarTrailing) {
ToolBarView(showExtraButton: false)
}
}
}
}
.navigationViewStyle(StackNavigationViewStyle())
}
}
struct ToolBarView: View {
let showExtraButton: Bool
var body: some View {
HStack {
let buttonsCount = showExtraButton ? 3 : 2
ForEach(0..<buttonsCount, id: \.self) { index in
Button(action: {}) {
Color.blue
.cornerRadius(5)
.frame(width: 80 - CGFloat(20 * index), height: 20)
}
}
}
}
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论