I've got a simple Text element, here's the code:
Text("W-XYZ LAB IS CARBON NEUTRAL")
.foregroundColor(.white)
.frame(width: elementWidth, alignment: .leading)
.font(.system(size: 25, weight: .bold))
.padding(.bottom)
.border(.red)
elementWidth = screen width / 1.25
Take a look at the screenshot below:
The text in the Text view does not take up all the space. The word "CARBON" can fit in the first line of the text view but for some reason it goes to the second line. How can I fix this?
Related
I'm trying to align a view in SwiftUI the same way the new Workouts app for WatchOS 9 aligns with the time.
I have found this StackOverflow thread, but it does the exact opposite, I need alignment in the vertical axis.
So far I've tried the following, but it does not work for every screen size:
VStack(alignment: .leading) {
// my content here
}
.frame(maxWidth: .infinity, alignment: .leading)
.ignoresSafeArea(edges: [.bottom, .top]).scenePadding().focusable()
(red lines added by me to illustrate)
I have a text with a size of 80. When I put a border on this view, I see that there is additional space above and below the text. To save space in my application, I need to remove this space. But I don't know if it's possible properly?
Exemple of code:
import SwiftUI
struct ContentView: View {
var body: some View {
Text("360°")
.font(Font.system(size: 80, weight: .thin, design: .default).monospacedDigit())
.border(Color.red, width: 2)
}
}
The result:
I need the green result:
The vertical space is occupied by the Text itself. Adding fixed negative padding isn't recommended. Use this, only if both text and font are hardcoded.
Text("360°")
.font(Font.system(size: 80, weight: .thin, design: .default).monospacedDigit())
.padding(.vertical, -18)
.border(Color.red, width: 1),
I'm trying to use an image in my Assets to be a navigation bar Item like this:
navigationBarItems(leading: Button(action:{
self.presentMap = true
}) {
Image("map_pin")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 34, height: 34)
}
I works unfortunately the image is masked by a solid color so I only see the shape.
Is there a simple way to just display the image as is?
You need to add the modifier renderingMode(.original) This stops the overlay of the solid color blue.
Image("map_pin")
.renderingMode(.original)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 34, height: 34)
Or you can add the following modifier to your button .buttonStyle(PlainButtonStyle())
Button(action:{
self.presentMap = true
}) {
Image("map_pin")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 34, height: 34)
}.buttonStyle(PlainButtonStyle())
Check out this article by Paul Hudson https://www.hackingwithswift.com/quick-start/swiftui/how-to-disable-the-overlay-color-for-images-inside-button-and-navigationlink
The difference is subtle, but important: if you are using a Button
inside a List, using .buttonStyle(PlainButtonStyle()) will mean that
only the space directly around the button’s content can be tapped,
whereas if you use .renderingMode(.original) then the whole cell
remains tappable
I am attempting to build a soccer app. My main detail view shows match statistics. I cannot find any way to get the central text element showing the score of the match to stay in the absolute center, so that the colon in the text is perfectly centred over the guideline on the middle of the screen. With different numbers either side of the colon, it gets shifted slightly out of place.
Is there any way to fix this element to be exactly centered under any circumstances? I have attached a screenshot showing the misalignment.
Code:
VStack() {
HStack(alignment: .center) {
Text("\(matchItem.HomeGoals) : \(matchItem.AwayGoals)")
.font(.system(size: 35.0))
.fontWeight(.heavy)
.foregroundColor(Color.white)
.lineLimit(3)
.multilineTextAlignment(.center)
.fixedSize(horizontal: true, vertical: true)
.allowsTightening(false)
}.padding(15)
}.frame(width: 75, height: 80, alignment: .center)
Example:
You can put your View in a ZStack and the ":" on another Z-level, so it no longer depends on other elements in the same horizontal stack.
im trying to show a list of items. Every row should contain a stripe on the left in a specific color and a headline. This headline is sometimes more than a line long but only shows as one line and "...". When I remove the Stripe it shows as multiline text. I've attached the code and two pictures for comparison
Heres my code :
HStack {
Rectangle()
.foregroundColor(poll.outcome ? .green : .red)
.frame(width: 3)
VStack {
Text(poll.poll.title!).font(.headline)
.lineLimit(2)
}
}
This is how it looks without the Rectangle:
And with the Rectangle:
In a List or ScrollView the SwiftUI engine will compress back the text area. .lineLimit(x) give you a maximum of line, not a minimum ;)
To secure that the engine does not shrink back the Text height and goes up to the maximum limit, add .fixedSize(horizontal: false, vertical: true) as shown below
HStack {
Rectangle()
.foregroundColor(.red)
.frame(width: 3)
VStack {
Text("line1\nline2\nline3").font(.headline)
.lineLimit(2)
.multilineTextAlignment(.leading)
.fixedSize(horizontal: false, vertical: true)
}
}
SwiftUI has some bugs right now and it is one of them and there is some discussion on this answer that you can check out.
Although It works on my machine, if you have any trouble about sizing elements, you can use Spacers as a workaround until all SwiftUI bugs fix by Apple.
For this case, you can wrap your text between two spacers like this:
VStack {
Spacer()
Text("FirstLine\nSecondLine\nThirdLine")
.font(.headline)
.lineLimit(2)
Spacer()
}