首页 > 解决方案 > 更改 SegementedPickerStyle (UIKit & SwiftUI) 的背景颜色

问题描述

我在 SwiftUI 中使用 Picker 视图在 3 个页面中的 1 个页面之间导航。但是,我很难弄清楚如何自定义 SegmentedPickerStyle。

我对选择器的看法非常简单......它看起来像:

Feed | For You | Tools

问题是,它看起来不像按钮(如 SegmentedPickerStyle 默认情况下所做的那样),它只是文本,使用下划线表示selectedSegment 这是我的意思的模型

到目前为止,我只能弄清楚如何自定义:

  1. 整个 Picker 的字体颜色
  2. SelectedSegment的背景颜色
  3. 但是,整个 Picker 的背景颜色由于某种原因不能与 UIColor.clear 或 UIColor.White 一起使用?

我能够自定义选择器的唯一方法是覆盖 SwiftUI 继承自UISegmentedControl的 UIKit 组件。

这是我的代码:

import SwiftUI

enum HomeTab: String, CaseIterable {
    case Feed = "Feed"
    case ForYou = "For You"
    case Tools = "Tools"
}

struct SelectedHomeTab: View {
    @Binding var selectedTab: HomeTab
    
    var body: some View {
        switch selectedTab {
        case .Feed:
            Text("Feed!")
        case .ForYou:
            Text("For you!")
        case .Tools:
            Text("Tools!")
        }
    }
}


    struct HomeView: View {
        @State private var currentTab: HomeTab = .ForYou
        
        // Change SegementedPicker styling
        init() {
            UISegmentedControl.appearance().selectedSegmentTintColor = UIColor(named: "navyBlue") // custom asset color (what i want the underline to be)
            UISegmentedControl.appearance().setTitleTextAttributes([.foregroundColor : UIColor.white], for: .selected)
            UISegmentedControl.appearance().backgroundColor = UIColor.clear
        }
        
        var body: some View {
            VStack {
                Picker("", selection: $currentTab) {
                    ForEach(HomeTab.allCases, id: \.self) {
                        Text($0.rawValue)
                    }
                }
                .pickerStyle(SegmentedPickerStyle())
                .padding(.bottom)
                .padding(.horizontal)
                
                
                SelectedHomeTab(selectedTab: self.$currentTab)
            }
        }
    }
    
    
    struct HomeTab_Previews: PreviewProvider {
        static var previews: some View {
            HomeView()
        }
    }

现在把我的头撞在墙上几个小时......非常感谢任何帮助;谢谢!

标签: swiftswiftuiuikituisegmentedcontrolswiftui-picker

解决方案


推荐阅读