SwiftUI - 用自定义视图覆盖 TabView [英] SwiftUI - Overlay TabView with Custom View
问题描述
我有一个带有标签栏导航概念的应用.对于一个视图,我目前正在尝试实现一个标签栏覆盖,你们都知道 iOS 中的照片应用程序.选择图像时出现.见下文:
I'm having an app with a tab bar navigation concept. For one view I'm currently trying to implement a tab bar overlay that you all know from the Photos App in iOS. It appears when you select images. See below:
我试图在下面的代码片段中实现这种行为,但我有两个疑问:
I tried to implement this behavior in the below code snippet but I have two doubts:
.overlay()
是正确的方法吗?我想将它与 State 结合起来,并相应地设置它以启用/禁用叠加层.- 如果从编码的角度来看覆盖没问题,我将如何将其与底部对齐并注意调整大小以使其完全覆盖标签栏?
- is
.overlay()
the right way to do it? I wanted to combine it with a State and set it accordingly to enable / disable the overlay. - if overlay is ok from a coding point of view, how would I align it to the bottom and take care of the sizing so that it exactly overlays the tab bar?
struct ContentView: View {
var body: some View {
TabView {
NavigationView {
Text("First Nav Page")
}
.tabItem {
Image(systemName: "house")
Text("Home")
}.tag(0)
NavigationView {
Text("Second Nav Page")
}
.tabItem {
Image(systemName: "gear")
Text("Settings")
}.tag(1)
Text("No Nav Page")
.tabItem{
Image(systemName: "plus")
Text("Test")
}.tag(2)
}.overlay(
Rectangle()
.foregroundColor(.red)
.frame(width: 40, height: 40)
)
}
}
谢谢!
推荐答案
您正在寻找的是 Toolbar
,而不是 TabBar.所以当用户在 EditMode 中改变时,你必须将 TabBar 改为 Toolbar.
What you are looking for is a Toolbar
, not TabBar. So when the user changes in EditMode, you will have to change the TabBar into the Toolbar.
工具栏在 iOS 14 中可用,它在中心采用一个 ToolbarItem 作为状态,以及一个带有图标的前导项目.您应该构建一个将 TabBar 与 Toolbar 交换的函数.
The Toolbar is available in iOS 14 and takes a ToolbarItem for the Status in the center and a leading Item with your Icon. You should have to build a function which swapes your TabBar with the Toolbar.
以下是适用于您的情况的工具栏示例:
Here is a example of the Toolbar for your case:
struct ContentView: View {
@State var isSelecting : Bool = false
var body: some View {
NavigationView {
Text("Hello World")
.toolbar {
ToolbarItem(placement: .bottomBar, content: {
Button(action: {
}){
Image(systemName: "square.and.arrow.up")
}
})
}
.toolbar {
ToolbarItem(placement: .status, content: {
Text("Auswählen")
.fontWeight(.bold)
})
}
}
}
}
这篇关于SwiftUI - 用自定义视图覆盖 TabView的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!