SwiftUI: how to get rid of Segmented Control text movement when an alert is shown?

Question

In a small sample SwiftUI app, I have a settings view that shows a couple of option selections, implemented as segmented controls. The text in these segmented controls visibly moves when an alert is presented or dismissed. Is there a way to get rid of this glitch?

Paste this in a Playground to reproduce:

import SwiftUI
import PlaygroundSupport

struct FlickeringSegmentsView: View {
    @State var option = 0
    @State var alerting = false

    var body: some View {
        VStack(alignment: .center, spacing: 120) {
            Picker("options", selection: $option) {
                Text("Option A").tag(0)
                Text("Option B").tag(1)
            }
            .pickerStyle(SegmentedPickerStyle())
            .padding(16)

            Button(action: { self.alerting.toggle() },
                   label: { Text("Show Alert") }
            )
            .alert(isPresented: $alerting) {
                Alert(title: Text("Alert"))
            }
        }
    }
}

PlaygroundPage.current.setLiveView(FlickeringSegmentsView())

strange thing, but I see this glitch even if I switch between "Option A" and "Option B". tested in canvas and on real device — Hrabovskyi Oleksandr, Jan 03 '20 at 14:07
Yes there is a small movement/animation when a selection is made, but I think it is different from what happens when the alert shows. Plus, why does the alert even have an effect on anything else on-screen? I've never seen that happen with UIKit. — Gereon, Jan 03 '20 at 15:04
Sadly I also ran into the same problem, have you found a solution since? — Dávid Pásztor, May 22 '20 at 14:42
No, unfortunately not. I've filed Feedback FB7518502 if you want to dupe it. — Gereon, May 22 '20 at 15:02

score 2 · Accepted Answer · answered Jul 02 '20 at 14:54

2

This issue is resolved in Xcode 12 beta using the included iOS 14 simulator (and hopefully stays that way).

answered Jul 02 '20 at 14:54

Gereon

17,258
4
42
73

score 0 · Answer 2 · answered Jan 25 '20 at 15:27

I hope code below should help you:

public protocol SegmentedPickerViewElementTraits: Hashable {
    var localizedText: String { get }
}

public struct SegmentedPickerView<Value, Data, ID, Label>: View
    where
    Value: SegmentedPickerViewElementTraits,
    Data: RandomAccessCollection,
    Data.Element == Value,
    ID: Hashable,
    Label: View {

    public let data: Data
    public let id: KeyPath<Data.Element, ID>
    public let selection: Binding<Value>
    public let label: Label

    public init(data: Data,
                id: KeyPath<Data.Element, ID>,
                selection: Binding<Value>,
                label: Label) {
        self.data = data
        self.id = id
        self.selection = selection
        self.label = label
    }

    public var body: some View {
        Picker(selection: selection, label: label) {
            ForEach(data, id: id) {
                Text($0.localizedText).tag($0)
            }
        }
        .pickerStyle(SegmentedPickerStyle())
    }
}

and lets modify your code:

enum Options: UInt8, CaseIterable {
    case optionA
    case optionB
}

extension Options: SegmentedPickerViewElementTraits {
    var localizedText: String {
        switch self {
        case .optionA:
            return "Option A"
        case .optionB:
            return "Option B"
        }
    }
}

struct FlickeringSegmentsView: View {
    @State
    var option: Options = .optionA

    @State
    var alerting = false

    var body: some View {
        VStack(alignment: .center, spacing: 120) {
            SegmentedPickerView(
                data: Options.allCases,
                id: \.self,
                selection: $option,
                label: Text("options")
            )
            .padding(16)

            Button(
                action: { self.alerting.toggle() },
                label: { Text("Show Alert") }
            )
            .alert(isPresented: $alerting) {
                Alert(title: Text("Alert"))
            }
        }
    }
}

No, this does not help at all. This code exhibits the exact same visual glitches as mine. — Gereon, Jan 25 '20 at 20:16

SwiftUI: how to get rid of Segmented Control text movement when an alert is shown?

2 Answers2