Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set Color of Chevron in a SwiftUI List in a NavigationView

I have this list I a NavigationView.
In dark mode the Chevron (red circle) is almost invisible.

enter image description here How can I set the Color of Chevron in a List.

struct ContentView: View {
    var body: some View {
      NavigationView{
        List {
          Line(text: "Line 1")
          Line(text: "Line 2")
          Line(text: "Line 3",selected: true)
          Line(text: "Line 4")
          Line(text: "Line 5")
        }
      }
    }
}

struct Line: View {
  var text :String
  var selected = false
  @Environment(\.colorScheme) var colorScheme

  var body: some View {
    NavigationLink(destination: Text("D")) { Text(text)}
      .listRowBackground(selected ? Color.blue : Color(.systemBackground))
      .foregroundColor(selected ? Color.white : Color(.label))
    .onTapGesture(perform: {print ("tap")
    } )
  }
}
like image 368
mica Avatar asked Mar 27 '20 15:03

mica


2 Answers

The standard chevron is not a symbol by raster image, here it is

demo1

that is why it does not react on any color changing modifiers.

Solution, disable standard chevron and use own, custom, (behaviour of the List is the same), like below

HStack {
    Text(text)
    NavigationLink(destination: Text("D")) { EmptyView() } // disabled  !
    Image(systemName: "chevron.right")                     // << custom !!
        .foregroundColor(Color.red)                        // any color !!!
}

demo2

like image 154
Asperi Avatar answered Sep 21 '22 10:09

Asperi


In my environment, default chevron is shown under customized chevron.

Add opacity(0), it works.

NavigationLink(destination: Text("D")) { EmptyView() }
    .opacity(0) // Add this
like image 34
omusubi Avatar answered Sep 22 '22 10:09

omusubi