web-dev-qa-db-fra.com

Afficher la vue ligne / séparateur dans SwiftUI

Je souhaite afficher une ligne de séparation dans mon application SwiftUI. Pour y parvenir, j'ai essayé de créer une vue vide avec un cadre fixe et une couleur/bordure de fond:

EmptyView()
    .frame(width: 200, height: 2)
    .background(Color.black) // or:
    .border(Color.black, width: 2)

Malheureusement, je ne vois aucune vue sombre apparaître.
Existe-t-il un moyen d'afficher une vue séparateur/ligne?

swiftswiftui
8
LinusGeffarth

Utilisez Divider .

Un élément visuel qui peut être utilisé pour séparer d'autres contenus.

Exemple:

struct ContentView : View {
    var body: some View {
        VStack {
            Text("Hello World")
            Divider()
            Text("Hello Another World")
        }
    }
}

Production: enter image description here

23
J. Doe

Si quelqu'un est intéressé par un séparateur, un texte, un séparateur, ressemblant à ceci:

enter image description here

LabelledDivider code

struct LabelledDivider: View {

    let label: String
    let horizontalPadding: CGFloat
    let color: Color

    init(label: String, horizontalPadding: CGFloat = 20, color: Color = .gray) {
        self.label = label
        self.horizontalPadding = horizontalPadding
        self.color = color
    }

    var body: some View {
        HStack {
            line
            Text(label).foregroundColor(color)
            line
        }
    }

    var line: some View {
        VStack { Divider().background(color) }.padding(horizontalPadding)
    }
}

C'est un peu moche mais j'ai dû mettre les Dividers dans un VStack pour les rendre horizontaux, sinon, ils seront verticaux, à cause de HStack. Veuillez me faire savoir si vous avez réussi à simplifier cela :)

Il se peut également que l'utilisation et les propriétés stockées de LabelledDivider ne soient pas la solution la plus SwiftUI- y, je suis donc ouvert aux améliorations.

Exemple d'utilisation

C'est le code qui résulte de la capture d'écran vue ci-dessus:

struct GetStartedView: View {
    var body: some View {
        NavigationView {
            VStack {

                NavigationLink(destination: SignInView()) {
                    Text("Sign In").buttonStyleEmerald()
                }

                LabelledDivider(label: "or")

                NavigationLink(destination: SignUpView()) {
                    Text("Sign up").buttonStyleSaphire()
                }

            }.padding(20)
        }
    }
}

ButtonStyle

Par souci d'exhaustivité, j'inclus également des modificateurs de vue buttonStyle:

struct ButtonStyle: ViewModifier {

    private let color: Color
    private let enabled: () -> Bool
    init(color: Color, enabled: @escaping () -> Bool = { true }) {
        self.color = color
        self.enabled = enabled
    }

    dynamic func body(content: Content) -> some View {
        content
            .padding()
            .frame(minWidth: 0, maxWidth: .infinity, alignment: .center)
            .foregroundColor(Color.white)
            .background(enabled() ? color : Color.black)
            .cornerRadius(5)
    }
}

extension View {
    dynamic func buttonStyleEmerald(enabled: @escaping () -> Bool = { true }) -> some View {
        ModifiedContent(content: self, modifier: ButtonStyle(color: Color.emerald, enabled: enabled))
    }

    dynamic func buttonStyleSaphire(enabled: @escaping () -> Bool = { true }) -> some View {
        ModifiedContent(content: self, modifier: ButtonStyle(color: Color.saphire, enabled: enabled))
    }

}

Modifier: veuillez noter que Color.saphire et Color.emerald sont des couleurs déclarées personnalisées:

extension Color {
    static var emerald:     Color { .rgb(036, 180, 126) }
    static var forest:      Color { .rgb(062, 207, 142) }
}

extension Color {
    static func rgb(_ red: UInt8, _ green: UInt8, _ blue: UInt8) -> Color {
        func value(_ raw: UInt8) -> Double {
            return Double(raw)/Double(255)
        }
        return Color(
            red: value(red),
            green: value(green),
            blue: value(blue)
        )
    }
}
17
Sajjon