Is there anyway to change the .navigationTitle color? I tried .foregroundColor and even passing the Text as a view but that did not work.
var body: some View {
VStack(alignment: .leading) {
Divider()
Spacer()
.navigationTitle(myList.name)
}.padding()
}
I also tried using the UINavigationBar appearance:
UINavigationBar.appearance().largeTitleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.red]
Related
I have a very simple view, a background color and some text. But when I wrap it in a NavigationView I'm getting unwanted spacing at the top of the view. How can I eliminate this? (I want the Navigation as I will be adding NavigationLinks)
e.g.
var body: some View {
NavigationView {
ZStack(alignment: .leading) {
Rectangle()
.fill(
LinearGradient(
gradient: Gradient(colors: [.indigo, .purple]),
startPoint: .bottom,
endPoint: .top
)
)
.ignoresSafeArea()
VStack {
Text("Test")
Spacer()
}
}
}
}
You can fix this by using .navigationBarHidden(true).
However, .navigationBarHidden(true) will be deprecated in the new version of iOS, so you can use .toolbar(.hidden) instead.
The space is reserved for the title, so if you set the navigation bar title display mode to .inline, then it should reduce that space.
NavigationView {
ZStack {
/* ... */
}
.navigationBarTitleDisplayMode(.inline)
}
I've got a TextField in SwiftUI that is centered on the screen. I want to add a pencil icon immediately. to the left of it to indicate that it is editable - how can I do this? I've tried embedding both the TextField and Image in an HStack like this:
HStack {
Spacer()
Image(systemName: "pencil")
TextField(...)
}
But that only yields something like this:
where the textfield is no longer centered and the pencil is aligned to the left of the screen.
Any guidance is appreciated.
this should do it:
TextField("", text: $input)
.overlay(alignment: .leading) {
Image(systemName: "pencil")
.offset(x: -24, y: 0)
}
struct CustomTextFieldView: View {
#State private var text: String = ""
var body: some View {
VStack(alignment: .leading) {
textfeild
.padding()
}
}
var textfeild: some View {
HStack {
Image(systemName: "pencil")
TextField("Edit me!", text: $text)
}
.textFieldStyle(DefaultTextFieldStyle())
}
}
struct CustomTextFieldView_Previews: PreviewProvider {
static var previews: some View {
CustomTextFieldView()
}
}
I have a VStack wrapped around a NavigationView. I made a NavigationTitle by adding the modifier to VStack. However, my title is not appearing near the top of the screen as it should.
Here is my code:
NavigationView{
VStack{
Image(club.image)
.resizable()
.scaledToFit()
.frame(height: 300)
Text(club.name)
.font(.system(size: 40, weight: .black))
HStack(alignment: .center, spacing: 20){
Label(title: {
Text(club.league)
.foregroundColor(.secondary)
}, icon: {
Image(systemName: "location.north.circle.fill")
.foregroundColor(.blue)
})
Label(title: {
Text(club.netWorth)
.foregroundColor(.secondary)
}, icon: {
Image(systemName: "dollarsign.circle.fill")
.foregroundColor(.blue)
})
}
}.navigationTitle(club.name)
}
I have tried adding the '.navigationTitle' modifier to the NavigationView as well, but that isn't working.
Here is an image as well:
Navigation title image
Does anybody have a solution to this?
As lorem ipsum has mentioned. It's as simple as removing the extra NavigationView. When using a Navigation Link it's assumed that it's within a NavigationView. So you only need to declare it once in the root view. If you wanted additional NavigationLink you'd add it without a NavigationView.
struct ContentView: View {
var body: some View {
NavigationView {
VStack {
Text("Chelsea")
NavigationLink("Second View Link", destination: SecondView())
}
.navigationTitle("Chelsea")
}
}
}
struct SecondView: View {
var body: some View {
VStack {
Text("Second View")
}
.navigationTitle("Second View")
}
}
With UIKit, I could customize the background color of a popover using UIPopoverPresentationController's backgroundColor.
This would change the color including the arrow.
How can I accomplish this with SwiftUI? When I change the the popover content's background color, it doesn't include the arrow:
You can use .scaleEffect(…) to make your background view take more space. When it’s bigger than the content of the popover, it will fill the arrow.
struct ContentView: View {
#State var popoverVisible = false
var body: some View {
VStack {
Button("Open Popover") {
self.popoverVisible = true
}
.popover(isPresented: $popoverVisible) {
ZStack {
// Scaled-up background
Color.blue
.scaleEffect(1.5)
Text("Hello world")
.foregroundColor(.white)
.padding()
}
}
}
}
}
Use i.e. a VStack to fill the view, and then background will be extrapolated from the view at the edge:
struct ContentView: View {
#State var popoverVisible = false
var body: some View {
VStack {
Button("Open Popover") {
self.popoverVisible = true
}
.popover(isPresented: $popoverVisible) {
VStack {
Text("Hello world")
.foregroundColor(.white)
.padding(8)
Spacer()
Text("Bye world")
.foregroundColor(.white)
.background(Color.blue)
}
}
}
}
}
Newbie here! I am building a quiz app using Swiftui, I built the view controller by previewing it in an iPhone 11 simulator.
And I thought the controlview would fit other iPhone sizes, like iPhone 8. Because Swiftui has a built-in auto layout.
But when I run the iPhone 8 simulator some of the content in the control view is not visible because they are below the screen.
Is there a way to fix it?
I tried to play with multiple Spacer() and different paddings but I can't seem to make it look good on both screen at the same time.
This is my code:
import SwiftUI
struct questionOne: View {
#State var totalClicked: Int = 0
#State var showDetails = false
#State var isSelected = false
var body: some View {
VStack {
TRpic().frame(width: 350.0, height: 233.0).cornerRadius(10).padding(.top, 80)
Spacer()
Text(verbatim: "What's the capital of Turkey?")
.font(.title)
.padding(.bottom, 60)
.frame(height: 100.0)
Button(action: {}) {
Text("Istanbul")
}.buttonStyle(MyButtonStyle())
Spacer()
Button(action: {self.isSelected.toggle()}) {
Text("Ankara")
}.buttonStyle(SelectedButtonStyle(isSelected: $isSelected))
Spacer()
Button(action: {}) {
Text("Athens")
} .buttonStyle(MyButtonStyle())
Spacer()
NavigationLink(destination: questionTwo()) {
VStack {
Text("Next Question")
Adview().frame(width: 150, height: 60)
}
}
}.edgesIgnoringSafeArea(.top)
}
}
struct MyButtonStyle: ButtonStyle {
func makeBody(configuration:
Self.Configuration) -> some View {
configuration.label
.padding(20)
.foregroundColor(.white)
.background(configuration.isPressed ? Color.red : Color.gray)
.cornerRadius(10.0)
}
}
struct SelectedButtonStyle: ButtonStyle {
#Binding var isSelected: Bool
public func makeBody(configuration: Self.Configuration) -> some View {
configuration.label
.padding(20)
.foregroundColor(.white)
.background(isSelected ? Color.green : Color.gray)
.cornerRadius(10.0)
}
}
enter image description here
Screenshot
Being in the given context I guess you do not want a scroll view, so regarding spacing I suggest using a VStack with spacing parameter VStack(alignment: .center, spacing: n){ ... } and remove the Spacers, if between 2 views you need another distance than n, just use padding to add some extra space.
This should adjust everything to fit the height of any screen, including the image, so do not need a fixed frame for it.
But, you might have a very wide image that could go beyond safe area, so, you could set a maximum width for the image as being the screen width
struct questionOne: View {
var body: some View {
GeometryReader { geometryProxy in
VStack(alignment: .center, spacing: 20) {
TRpic().frame(maxWidth: geometryProxy.size.width, alignment: .center)
.padding([.leading, .trailing], 10)
.......
}
}
}