J'ai besoin d'un titre sur le côté gauche d'une barre de navigation. J'utilise le code suivant:
.toolbar { ToolbarItem(placement: .navigationBarLeading) { Text("Title") .foregroundColor(.black) } }
Le problème est qu'il est affiché en bleu et sous forme de bouton. Est-il possible de changer sa couleur en noir d'une manière ou d'une autre? foregroundColor
, accentColor
ne fonctionnent pas. En outre, j'ai essayé d'utiliser un bouton désactivé avec du Text("Title")
intérieur. Mais il était affiché en gris dans ce cas. Ni color, ni PlainButtonStyle
n'ont été appliqués.
3 Réponses :
Par défaut, si vous ajoutez un seul Text
il s'affiche sous forme de Button
.
Ensuite, pour changer sa couleur, vous devez définir l' accentColor
de NavigationView (car ce bouton est affiché dans la barre de navigation):
ToolbarItem(placement: .navigationBarLeading) { HStack { Text("Title") Text("") } .foregroundColor(.red) }
Si vous ne souhaitez pas modifier l' accentColor
dans l'ensemble de NavigationView, vous pouvez faire:
NavigationView { VStack { //... } .accentColor(.accentColor) } .accentColor(.black)
Cependant, si vous voulez que ce Text
se comporte comme un Text
et non comme un Button
vous pouvez utiliser le hack suivant:
struct ContentView: View { var body: some View { NavigationView { Text("Test") .toolbar { ToolbarItem(placement: .navigationBarLeading) { Text("Title") } } } .accentColor(.black) } }
c'est une solution géniale - j'ai essayé cela, mais je ne savais pas que cela ne pouvait être réparé qu'en le définissant sur NavigationView.Mais le texte devient toujours automatiquement un bouton. Seul UIViewRepresentable conserve le texte sous forme de texte
@Lonkly C'est ainsi que fonctionne la barre d'outils si vous ajoutez juste un texte (dans la version actuelle de SwiftUI). Si vous ajoutez deux textes encapsulés dans un HStack, il se comporte différemment.
Je ne parviens pas à faire fonctionner le VStack {// ...} .accentColor () pour changer la couleur d'un seul élément de la barre d'outils. Je mets le VStack dans ToolbarItem (), autour du Text (), comme ceci: ToolbarItem (placement: .navigationBarTrailing) {VStack {Text ("hi")} .accentColor (.red). Est-ce ce que vous vouliez dire ou est-ce que je le fais mal?
@Gary Dans la première solution, c'est le .accentColor(.black)
sur NavigationView qui change la couleur des éléments de la barre d'outils (pas le .accentColor(.accentColor)
sur VStack). Et cela change la couleur de tous les éléments de la barre d'outils. Si vous souhaitez modifier l'élément spécifique, vous avez besoin de la 2ème solution (avec HStack
).
Ah merci. Cela fonctionne pour les éléments individuels maintenant. En fait, il fonctionne à la fois avec VStack et HStack tant que j'utilise .foregroundColor () et que j'ajoute un texte vide (""). Espérons que ce piratage d'utilisation d'un texte vide ne se cassera pas dans la prochaine mise à jour :)
Étant donné que ToolbarItem
n'a aucun modificateur disponible, la seule solution possible que je vois est d'utiliser UIViewRepresentable qui semble ignorer les modifications des barres d'outils:
struct TitleRepresentation: UIViewRepresentable { let title: String let titleColor: UIColor func makeUIView(context: Context) -> UILabel { let label = UILabel() label.tintColor = titleColor label.text = title return label } func updateUIView(_ uiView: UILabel, context: Context) {} typealias UIViewType = UILabel }
...
.toolbar { ToolbarItem(placement: .navigationBarLeading) { TitleRepresentation(title: "Test", titleColor: .red) } }
Je pense que l'utilisation d'un menu vide avec un style personnalisé est une meilleure solution que de changer accentColor.
.navigationBarItems(leading: Text("Hello") .foregroundColor(Color.red) .font(Font.system(size: 50)))
Utilisez navigationBarItems si vous n'affichez que du texte.
.toolbar { ToolbarItem(placement: .navigationBarTrailing) { Menu(content: { }, label: { Text("Hello") }) .menuStyle(RedMenuStyle()) } } struct RedMenuStyle : MenuStyle { func makeBody(configuration: Configuration) -> some View { Menu(configuration) .font(Font.system(size: 50)) .foregroundColor(Color.red) } }
Si vous pensez que l'une des réponses ci-dessous résout votre problème, pensez à l'accepter. Voir Que dois-je faire lorsque quelqu'un répond à ma question?