代码之家 › 专栏 › 技术社区 › Richard Kirk

使用PageTabViewStyle的SwiftUI TabView索引的高度是多少?

swiftui-tabview swiftui

Richard Kirk · 技术社区 · 3 年前

我正在使用Xcode 14.0.1编写一个应用程序,并在运行iOS 16.0的iPhone 12 mini上进行测试。当前的项目版本是iOS 14.7。这是我的TabView。。。

        TabView {
            
            ByEyeView()
                .tabItem { Label("ByEye", systemImage: "eye") }
            
            ChartView()
                .tabItem { Label("Chart", systemImage: "square.grid.4x3.fill") }
            
            ListView()
                .tabItem { Label("List", systemImage: "list.bullet") }
            
            EditView()
                .tabItem { Label("Edit", systemImage: "square.and.pencil") }
            
            CameraView()
                .tabItem { Label("Camera", systemImage:  "camera") }
            
            SettingsView()
                .tabItem { Label("Settings", systemImage: "gear") }
            
        }
        //.labelStyle(TitleAndIconLabelStyle())
        //.padding(8)
        //.ignoresSafeArea(edges: .bottom)
        .tabViewStyle(PageTabViewStyle())
        .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))

这在页面底部提供了一个胶囊,其中有一个小版本的图标,没有文本。我无法用.frame放大标签,并且.labelStyle()设置被忽略。我认为这是PageTabViewStyle()的一部分——索引应该很小,我可能无法改变这一点。但是索引位于视图内容之上,所以如果要让按钮远离它,我需要它的高度。

我能查一下索引高度吗?或者PageTabViewStyle假设索引很小,您应该解决它?

注释掉的.ignoreSafeArea()会向下移动索引,而页面保持不变。padding()使其与底部的条形图保持一定距离。这就是我目前正在处理的问题。这很糟糕:它无法与其他设备或屏幕方向配合使用。

总体情况:

我有六个条目。这不符合默认视图,所以我得到一个。。。更多的标签,导致一个额外的菜单。丑陋的我喜欢滚动的PageTabViewStyle方法,但我想要一个已知高度的索引——最好是一个使用完整标签并位于选项卡视图下方TabView布局底部的索引。

0 回复 | 直到 3 年前

Richard Kirk 3 年前

当你盯着它看了好几天,它毫无意义,突然一切都重新安排了。。。

也许TabPageViewStyle是为没有可见索引的页面设计的,或者覆盖一个小索引没有害处。这将适用于浏览图像。所有的狡猾都使索引视图变得不引人注目。如果你需要知道它有多大,那么TabPageViewStyle可能不是你想要的。

我说我想要的实际上是一个可滚动的水平列表,然后是当前选定的列表。像这样的。。。

    let tabW = CGFloat(UIScreen.main.bounds.width / 5.0)
    enum Page {
        case ByEye
        case Chart
        case List
        case Edit
        case Camera
        case Settings
    }
    
    @State private var page = Page.ByEye

    func pageButton(_ select: Page, _ icon: String, _ title: String) -> some View {
        return Button {
            page = select
        } label: {
            VStack {
                Image(systemName: icon)
                Text(title)
            } .frame(width: tabW)
        } .foregroundColor( page == select ? Color.white : Color.gray )
    }
    var body: some View {
        
        VStack() {
            ScrollView(.horizontal) {
                HStack() {
                    pageButton(Page.ByEye, "eye", "ByEye")
                    pageButton(Page.Chart, "square.grid.4x3.fill", "Chart")
                    pageButton(Page.List, "list.bullet", "List")
                    pageButton(Page.Edit, "square.and.pencil", "Edit")
                    pageButton(Page.Camera, "camera", "Camera")
                    pageButton(Page.Settings, "gear", "Settings")
                }
            }
            
            switch page {
            case .ByEye:
                ByEyeView()
            case .Chart:
                ChartView()
            case .List:
                ListView()
            case .Edit:
                EditView()
            case .Camera:
                CameraView()
            case .Settings:
                SettingsView()
            }
            
            Spacer()
        }

它比我原来的版本长不了多少。它并没有想象中那么漂亮——当你溢出标题栏时,你会得到半个图标,省略号会更好。但我以后可以解决。

Richard Kirk 3 年前

另一个答案是编写自己的索引表。。。。

           ScrollViewReader { proxy in
            ScrollView(.horizontal, showsIndicators: false) {
                HStack() {
                    pageButton(Page.EyeTest, "eyeglasses", "EyeTest", proxy)
                    pageButton(Page.Tone, "pause.rectangle", "Tone", proxy)
                    pageButton(Page.Chart, "square.grid.4x3.fill", "Chart", proxy)
                    pageButton(Page.ByEye, "eye", "ByEye", proxy)
                    pageButton(Page.List, "list.bullet", "List", proxy)
                    pageButton(Page.Camera, "camera", "Camera", proxy)
                    pageButton(Page.Settings, "gear", "Settings", proxy)
                }
            }
            .onAppear { proxy.scrollTo(page, anchor: .center) }
            .onChange(of: page) { page in
                withAnimation {
                    proxy.scrollTo(page, anchor: .center)
                }
            }
        }

这个特殊的有按钮大小的图标和文本page”是一个枚举,也是TabView的标记。如果将其粘贴在布局中,则可以使其适合TabView。您将想要隐藏TabView索引,您可以使用。。。

.tabViewStyle(PageTabViewStyle(indexDisplayMode:.never))