I am trying to disable the color of background in TextField in SwiftUI for macOS app and unfortunately the below code doesn't work when textfield is in highlighted state.
Take a look at this video https://share.cleanshot.com/hZhHm8fH
this is the code
VStack {
VisualEffectView.init(material: .sidebar, blendingMode: .behindWindow, state: .active, emphasized: false).frame(height: 6)
List {
TextField("write name...", text: $name)
.font(Font.custom("AvenirNext-Medium", size: 14, relativeTo: .body))
.textFieldStyle(.plain)
.background(.clear)
.scrollContentBackground(.hidden)
.lineLimit(1)
.frame(height: 28)
}.listStyle(.sidebar)
}
Goal: Disable the background color for TextField regardless if the field is in active or in-active state.
Related
I have 2 views inside a ZStack. One is ProgressView() and another one is Circle().
In this ZStack, i have a green background color with onTapGesture event.
I notice that whenever i click on the ProgressView() the event of background color do not trigger but when i click on the Circle() it trigger the event of background color.
So why is that if both of these are on top of background color? i think it should not trigger the event for both views.
ZStack() {
Color.green.ignoresSafeArea(.all)
.onTapGesture {
print("checked")
}
VStack() {
ProgressView()
Circle().frame(width: 30, height: 30, alignment: .leading)
}
}
They are actually not. Let's consider view hierarchy below (from view debug mode)
Shape is a native SwiftUI view and it is just rendered into the same backend as background and, actually by default not hit-testable.
ProgressView in contrary has UIKit backend, because it just representable of UIView, and all UIViews are added above native SwiftUI view (note, even if they are put into background). And by default this opaque UIView does not pass touch events through to SwiftUI.
That's it.
*changed to yellow color for better visibility
As #Asperi wrote your VStack is in front of the Color View.
But one can use the modifier allowsHitTesting.
With this gesture are not processed by this view.
#State var text: String = "Hello World"
var body: some View {
ZStack() {
Color.green.ignoresSafeArea(.all)
.onTapGesture {
text = "Green tapped"
}
VStack() {
ProgressView()
Circle().frame(width: 30, height: 30, alignment: .leading)
Text(text)
}
.allowsHitTesting(false)
}
}
This seems like a normal behavior.
However, if you want to get rid of this problem, you can always wrap your stack with a simple blank onTapGesture{}.
VStack {
}.onTapGesture{}
onTapGesture{} will get your stack rid of this problem, plus it will not affect your sub view and buttons inside the stack. Your Button inside the stack will behave normally.
How can I change the background color of a list item while it is selected inside of a NavigationLink?
It is always highlighted in blue (see the attached screen). I tried to change the listRowBackgroundColor view modifier, but it didn't work.
NavigationView {
List (templateModel.model.items) { item in
NavigationLink(destination: DetailView(selectedCategory: item.name, dismiss: dismiss)
.environmentObject(OrientationInfo())) {
Text("Test")
.listRowBackground(Color.gray)
}
.background(Color.black)
.buttonStyle(PlainButtonStyle())
.listRowBackground(Color.gray)
}
.background(Color.black)
.listStyle(InsetListStyle())
}
Just use .accentColor, as below
List (templateModel.model.items) { item in
// ... other content here
}
.accentColor(.gray) // << here !!
I am trying to change the color of clear(transparent) part inside of a SF Symbol called delete.left.fill. So far I've tried is as follows
Button(action: { return }, label: {
Image(systemName: "delete.left.fill")
.background(Color.black)
//.accentColor(.black)
.font(.system(size: self.fontSize*0.75))
})
.frame(width: self.width, height: self.width)
.foregroundColor(.lightGray)
//.background(Color.black)
When I run the code as above, the result is like
.
At first, the xinside of the symbol was the same color as background. I want it to make black.
I tried to set the backgroundColor of the Button and it made
whole Button black.
I tried to set accentColor of the Image to
black. Nothing changed.
I tried to set backgroundColor of the
Image to black. The result can be seen in the image.
The question is, is there a way to make just that x, inside the symbol, black programmatically?
You could mask the background and apply a custom style:
struct MyButtonStyle: ButtonStyle {
public func makeBody(configuration: MyButtonStyle.Configuration) -> some View {
configuration.label
.compositingGroup()
.opacity(configuration.isPressed ? 0.5 : 1.0)
}
}
Button(action: {}) {
Image(systemName: "delete.left.fill")
.foregroundColor(.green)
.background(
Color.black.mask(Circle())
)
}.buttonStyle(MyButtonStyle())
The circle may not fit to any usage, but for this image it works okay:
As he warned with the circle, #Faruk's solution didn't work for me with the exclamationmark.triangle.fill
I created a ZStack with the fill and unfill versions to create a yellow triangle with a black exclamation point and a black border:
ZStack{
Image(systemName: "exclamationmark.triangle")
.foregroundColor(Color.black)
.scaleEffect(1.1)
Image(systemName: "exclamationmark.triangle.fill")
.foregroundColor(Color.yellow)
}
I've only tried on couple of simulators, but it looks nice on iPadPro and iPad Mini
as of iOS 15 you can simply achieve that with .foregroundStyle(.red, .blue)
I have created two textfields with the following code:
VStack (spacing: geometry.size.width/48) {
TextField("World Name", text: self.$WorldName)
.font(.system(size: geometry.size.width/28))
.textFieldStyle(PlainTextFieldStyle())
.frame(width: geometry.size.width*0.75)
.background(
RoundedRectangle(cornerRadius: 8)
.fill(Color.init(white: 0.28))
)
TextField("World Seed", text: self.$WorldSeed)
.font(.system(size: geometry.size.width/28))
.textFieldStyle(PlainTextFieldStyle())
.frame(width: geometry.size.width*0.75)
.background(
RoundedRectangle(cornerRadius: 8)
.fill(Color.init(white: 0.28))
)
Button (action: {
withAnimation {
self.back.toggle()
}
// Is there a way to "deselect" any textfields here
}){
Text("Back")
}
}
Why is it when I click on one, there is a blue border that does not fade out with the animation, and how can I remove it? This question is specific, and I have provided code, and necessary details, I don't see why it should be too hard to answer.
So in summarized terms, I need to know:
How to get rid of this blue selection border
Or
How to immediately deselect the text field within the button's action,
Get the border to properly line up with the TextField if I apply a padding or round corners.
The only blue in this picture is the border I am referring to
As shown in this screenshot, the textfield is round, but the selection border does not get round corners to reflect the rounded rectangle shape of the entry
The blue border does not fit the padding
I added a padding like this .padding([.leading, .trailing], 6)
You can remove the blue border (which appears on macos even when using PlainTextFieldStyle) by extending NSTextField like so:
extension NSTextField {
open override var focusRingType: NSFocusRingType {
get { .none }
set { }
}
}
See Apple Developer Forum answer here
I don't know which blue border are you referring to, if you are referring to blue border for textfield, there is no blue border beacuse you have given a PlainTextFieldStyle
To deselect the textfield
UIApplication.shared.windows.filter({$0.isKeyWindow}).first?.endEditing(true)
To have a rounded textfield with padding
ZStack {
Rectangle()
.foregroundColor(.clear)
.overlay(RoundedRectangle(cornerRadius: 6).stroke(Color("appcolor").opacity(0.5), lineWidth: 1))
TextField("Enter some text", text: $worldName)
.padding([.leading, .trailing], 6)
}.frame(height: 42)
.padding([.leading, .trailing], 10)
I'm trying to change the textcolor of Textfield (the text that user write) in SwiftUI. I'm trying with foregroundColor but it changes the placeholder's text color.
How do you do this in SwiftUI?
TextField($variable, placeholder: Text("a text"))
.foregroundColor(.green)
.foregroundColor actually does change the text color of TextField but only when it has a default value, for example this will work fine:
TextField(.constant("Hello World"), placeholder: Text("Type here..."))
.foregroundColor(.green)
But once you remove the whole text, text field loses not only its color but the rest of its modifiers such as its alignment as well. This is likely a bug in the current version so I'll file a bug report.
Update: This issue was fixed with Xcode 11 beta 3.
Use background() to set background color and foreground() to set input text color
struct PlaygroundTestView: View {
#State var searchText = ""
var body: some View {
TextField("Search", text: $searchText)
.font(Font.system(size: 14))
.padding()
.background(RoundedRectangle(cornerRadius: 50).fill(Color.white))
.foregroundColor(.black)
.padding()
.offset(x:8, y: 10)
}
}
Text color should be changed for using the Property of text field .foreground color
Updated for Xcode Version 11.1 (11A1027)
SwiftUI
TextField("Email", text: $email)
.textContentType(.emailAddress)
.padding(.init(top: 0, leading: 15, bottom:0 , trailing: 15))
.foregroundColor(.blue)
.textFieldStyle(RoundedBorderTextFieldStyle.init())
If You want to give specific color your text in swift 5
Text("Your Text")
.foregroundColor(Color(uiColor: UIColor(red: 0.631, green: 0.678, blue: 0.769, alpha: 1)))