Fix picker capsule clipping and replace custom tab bar with native segmented control
Picker: moved .fixedSize(), .padding, .background, .clipShape outside the Menu label so the capsule sizing is stable and never clips rounded corners during menu open/close animation. Tab bar: replaced custom HStack+underline tab bar with native SwiftUI Picker(.segmented) for "For You" / "Browse All" tabs.
This commit is contained in:
@@ -944,45 +944,12 @@ private struct OnboardingTaskTabBar: View {
|
||||
@Binding var selectedTab: OnboardingTaskTab
|
||||
|
||||
var body: some View {
|
||||
HStack(spacing: 0) {
|
||||
Picker("", selection: $selectedTab) {
|
||||
ForEach(OnboardingTaskTab.allCases, id: \.self) { tab in
|
||||
Button {
|
||||
withAnimation(.spring(response: 0.3)) {
|
||||
selectedTab = tab
|
||||
}
|
||||
} label: {
|
||||
VStack(spacing: 6) {
|
||||
HStack(spacing: 6) {
|
||||
if tab == .forYou {
|
||||
Image(systemName: "sparkles")
|
||||
.font(.system(size: 12, weight: .semibold))
|
||||
} else {
|
||||
Image(systemName: "square.grid.2x2.fill")
|
||||
.font(.system(size: 12, weight: .semibold))
|
||||
}
|
||||
Text(tab.rawValue)
|
||||
.font(.system(size: 14, weight: .semibold))
|
||||
}
|
||||
.foregroundColor(selectedTab == tab ? Color.appPrimary : Color.appTextSecondary)
|
||||
.frame(maxWidth: .infinity)
|
||||
|
||||
// Indicator
|
||||
RoundedRectangle(cornerRadius: 1.5)
|
||||
.fill(selectedTab == tab ? Color.appPrimary : Color.clear)
|
||||
.frame(height: 3)
|
||||
}
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
Text(tab.rawValue).tag(tab)
|
||||
}
|
||||
}
|
||||
.padding(.vertical, 4)
|
||||
.background(
|
||||
ZStack {
|
||||
Color.appBackgroundSecondary
|
||||
GrainTexture(opacity: 0.01)
|
||||
}
|
||||
)
|
||||
.clipShape(RoundedRectangle(cornerRadius: 14, style: .continuous))
|
||||
.pickerStyle(.segmented)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -332,23 +332,21 @@ private struct ProfilePicker: View {
|
||||
}
|
||||
}
|
||||
} label: {
|
||||
HStack(spacing: 6) {
|
||||
Text(displayValue)
|
||||
.font(.system(size: 14, weight: .semibold))
|
||||
.foregroundColor(selection != nil ? Color.appPrimary : Color.appTextSecondary)
|
||||
|
||||
Image(systemName: "chevron.up.chevron.down")
|
||||
.font(.system(size: 10, weight: .semibold))
|
||||
.foregroundColor(Color.appTextSecondary)
|
||||
}
|
||||
.fixedSize()
|
||||
.padding(.horizontal, 14)
|
||||
.padding(.vertical, 8)
|
||||
.background(
|
||||
(selection != nil ? Color.appPrimary : Color.appTextSecondary).opacity(0.1)
|
||||
)
|
||||
.clipShape(Capsule())
|
||||
Text(displayValue)
|
||||
.font(.system(size: 14, weight: .semibold))
|
||||
.foregroundColor(selection != nil ? Color.appPrimary : Color.appTextSecondary)
|
||||
+
|
||||
Text(" \(Image(systemName: "chevron.up.chevron.down"))")
|
||||
.font(.system(size: 10, weight: .semibold))
|
||||
.foregroundColor(Color.appTextSecondary)
|
||||
}
|
||||
.padding(.horizontal, 14)
|
||||
.padding(.vertical, 8)
|
||||
.background(
|
||||
(selection != nil ? Color.appPrimary : Color.appTextSecondary).opacity(0.1)
|
||||
)
|
||||
.clipShape(Capsule())
|
||||
.fixedSize()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user