Comment faire en sorte que le texte de l'option sélectionnée dans SwiftUI Picker se répartisse sur plusieurs lignes

Question

Lorsque vous utilisez un Picker avec .pickerStyle(WheelPickerStyle()), l'espace horizontal que prend le sélecteur semble être fixe. Dans l'image ci-dessous, le cadre du Picker (qui est visible par sa couleur plus claire) est plus grand qu'il n'en a besoin pour ses éléments.

J'essaie d'obtenir le sélecteur aussi large qu'il en a besoin pour l'option la plus longue qu'il contient, similaire à la façon dont les vues Text() "emballent" leur texte et ne sont que aussi grandes que le texte à l'intérieur d'eux le nécessite.

Comment puis-je réaliser cela pour un Picker de roue en SwiftUI?

Answer 1

Une solution semble un peu compliquée car Picker n'est pas un contrôle SwiftUI natif, mais a UIPickerView à l'arrière, donc nous avons besoin d'une combinaison de ceux déjà mentionnés pour se débarrasser de la compression et un autre pour calculer l'étiquette la plus longue et compresser explicitement le sélecteur.

La partie principale est

@State private var maxWidth = CGFloat.zero
@State private var width = CGFloat.infinity

var body: some View {
    Picker("", selection: $selection) {
        ForEach( ... 

           // La vue de la ligne/étiquette est ici

            .background(GeometryReader {
                Color.clear.preference(key: ViewWidthKey.self,
                    value: $0.frame(in: .local).size.width)
            })
            .onPreferenceChange(ViewWidthKey.self) {
                self.maxWidth = max($0, maxWidth)
                width = max($0, maxWidth)
            }
        }
    }
    .pickerStyle(.wheel)
    .frame(maxWidth: width + 2 * 20 /* remplissage sur les deux côtés */)
}

Testé avec Xcode 13.4 / iOS 15.5

Code de test sur GitHub