i have one screen on my app witch gets data from firebase and then displays it. But i want to have 2 Text() view the one below the other, but for some reason the text is not displaying in the left of the view
The problem:
My Code:
struct ResourceItem: View {
var title: String
var url: String
var body: some View {
VStack {
Link(destination: URL(string: url)!) {
Text(title)
.bold()
.font(.system(size: 18))
Text(url)
.bold()
.foregroundColor(.gray)
}
}
}
}
Link creates it's own VStack with default configuration. That's why when you place Link inside VStack - outer container is ignored.
You need to place VStack(alignment: .leading) inside Link:
struct ResourceItem: View {
var title: String
var url: String
var body: some View {
Link(destination: URL(string: url)!) {
VStack(alignment: .leading) {
Text(title)
.bold()
.font(.system(size: 18))
Text(url)
.bold()
.foregroundColor(.gray)
}
}
}
}
try this:
VStack (alignment: .leading) {
Text(title)
.bold()
.font(.system(size: 18))
Text(url)
.bold()
.foregroundColor(.gray)
}
If you need this texts to be on one line - just put them In a horizontal stack -
HStack (alignment: .leading) {
Text(title)
.bold()
.font(.system(size: 18))
Text(url)
.bold()
.foregroundColor(.gray)
}
Related
I am trying to add widgets to my app and I am very new to this, I am showing 3 links in the medium Widget extension and the problem is all 3 links are in the centre and I want them to align on left side, I have tried many things which are available online but still not working,
this is my code :
var body: some View {
ZStack {
GeometryReader { geo in
Image("background")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: geo.size.width,
height: geo.size.height,
alignment: .center)
}
switch family{
case .systemSmall:
Text(entry.date, style: .time)
.widgetURL(URL(string: "fcv://open_activity"))
case .systemMedium:
VStack (alignment: .leading){
Link(destination: URL(string: "game:///link1")!, label: {
Text("Link1")
.multilineTextAlignment(.leading)
})
Spacer()
Link(destination: URL(string: "game1:///link2")!, label: {
Text("Link2")
.multilineTextAlignment(.trailing)
})
Spacer()
Link(destination: URL(string: "game2:///link3")!, label: {
Text("Link3")
.multilineTextAlignment(.center)
})
}
.padding()
default:
Link(destination: URL(string: "fcv2://open_activity")!) {
Text("Link 4")
}
I have tried this:
.font(.body)
.fontWeight(.bold)
.lineLimit(1)
.allowsTightening(true)
and also this:
.zIndex(2)
.shadow(radius: 5)
but neither of them work.
I am making a notification feed where you can view the WHOLE comment a user posts on a blog but I am unable to get the whole multi-line comment to show without affecting the spacing/alignment of elements to match the other notifications.
I was able to make the whole comment show by typing in a constant .frame(height: 100) modifier but then EVERY comment notification has that sized of frame.
Is there a way to make the below VStack scale it's frame dynamically based on the comment length or is there a better way based on my code??
Thank you!
struct CommentNotificationCell: View {
#EnvironmentObject var session: SessionStore
var activity: CommentActivity?
var body: some View {
HStack(spacing: 10) {
if let activity = activity {
VStack {
KFImage(URL(string: "\(url)" )!)
Spacer()
}
// Should I scale this VStack's frame height dynamically based
// on the length of the comment..?
VStack(alignment: .leading, spacing: 3) {
HStack(spacing: 3) {
Text(activity.username)
.font(.caption)
Text("commented on your post:")
.font(.caption)
}
Text(activity.comment)
.font(.caption)
Text(activity.createdAt.timeAgoDisplay())
.font(.caption)
}.padding(.leading, 10)
Spacer()
VStack {
ZStack {
Image(systemName: "bubble.left.fill")
.font(.system(size: 13, weight: .regular))
.foregroundColor(.blue)
.zIndex(1)
.offset(x: -25,y: -20)
KFImage(URL(string: "\(url)" )!)
.zIndex(0)
}
Spacer()
}
}
}
}
}
I think your code is already doing that – scaling dynamically based on text length. I cleaned it up a little and for me it works. Is there some other place where you set a specific .frame?
struct ContentView: View {
#State private var test = false
let username = "funnytest"
let shortComment = "kjfdglkj ewoirewoi oikdjsfgdlsfgj 0ewiropsdisg"
let longComment = "kjfdglkj ewoirewoi oikdjsfgdlsfgj 0ewiropsdisg poksaf#ldsifsgali oeirpo dgiodfig odfi ofdgifgpoüi fhfdi mfoidgho miohgfm ogifhogif hiogfh fgihi oogihofgi hofgiho fgopihfgoih pfdgihdfg podfgihofgiho po fdgdfiopugiouü"
var body: some View {
VStack {
CommentNotificationCell(username: username, comment: shortComment)
CommentNotificationCell(username: username, comment: longComment)
}
}
}
struct CommentNotificationCell: View {
var username: String
var comment: String
var body: some View {
HStack(spacing: 10) {
Image(systemName: "person.circle")
.resizable().scaledToFit().frame(width: 60)
VStack(alignment: .leading, spacing: 3) {
HStack(spacing: 3) {
Text(username)
.font(.caption).bold()
Text("commented on your post:")
.font(.caption)
}
Text(comment)
.font(.caption)
Text("8 hours ago")
.font(.caption)
}.padding(.leading, 10)
Spacer()
ZStack {
Image(systemName: "bubble.left.fill")
.font(.system(size: 13, weight: .regular))
.foregroundColor(.blue)
.zIndex(1)
.offset(x: -25,y: -20)
// Image("URL(string: "\(url)" )!")
// .zIndex(0)
}
}
}
}
I found out the fix was to remove the Spacer() in the first VStack
VStack {
KFImage(URL(string: "\(url)" )!)
}
All
I'm new to iOS and SwiftUI (2 months). I'm struggling to understand the following behavior and hope someone can point me as to how I can diagnose.
I have this code successfully generating this view in the preview provider
however when I run it on a device or in the simulator the fonts change (happens for system images also) to look more like this (scaled up).
The view below is rendered inside of a very generic tabview - I cant fathom it at all and could use some guidance.
Thanks
Craig
var body: some View {
VStack(spacing: 0.0) {
HStack(alignment: .top){
Text(player.firstName)
.bold()
Text(player.lastName)
.bold()
}
.font(.title)
HStack {
Image(uiImage: UIImage(data: player.playerPhoto) ?? UIImage())
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: /*#START_MENU_TOKEN#*/100/*#END_MENU_TOKEN#*/, height: 100)
.clipShape(Circle())
.overlay(Circle().stroke(Color.purple, lineWidth: 4.0))
Spacer()
VStack {
Text("lifetime averages")
.font(.body)
.foregroundColor(Color.gray)
HStack {
Spacer()
VStack {
Text("Batting")
.font(.title2)
.bold()
Text("\(battingAverage, specifier: "%.3f")")
}
.padding(.leading)
if isPitcher {
Spacer()
VStack {
Text("ERA")
.font(.title2)
.bold()
Text("\(earnedRunAverage, specifier: "%.2f")")
}
.padding(.trailing)
Spacer()
}
}
}
Spacer()
}
HStack {
VStack {
Text("\(noTeams)")
.font(.headline)
Text("teams")
.font(.subheadline)
.foregroundColor(Color.gray)
}
.padding(.leading, 10)
Spacer()
VStack {
Text("\(noSeasons)")
.font(.headline)
Text("seasons")
.font(.subheadline)
.foregroundColor(Color.gray)
}
Spacer()
VStack {
Text("\(noGames)")
.font(.headline)
Text("games")
.font(.subheadline)
.foregroundColor(Color.gray)
}.padding(.trailing, 10)
}
HStack{
Spacer()
Text("All Lifetime Stats >")
.font(.callout)
.foregroundColor(Color.blue)
}
}
.frame(width: 350, height: 200, alignment: /*#START_MENU_TOKEN#*/.center/*#END_MENU_TOKEN#*/)
}
Your code does not specify a .font(...) for those two Text elements.
Is it possible you have set the default font somewhere else?
I can reproduce what you're getting by doing this (using PlayerView as a stand-alone view, not in a table).
If using UIKit App Delegate, in willConnectTo session:
let contentView = PlayerView()
.font(.largeTitle)
or, if using SwiftUI App:
#main
struct TestApp: App {
var body: some Scene {
WindowGroup {
PlayerView()
.font(.largeTitle)
}
}
}
I am working on SwiftUI to make a widget and I can't figure out if I'm doing something wrong or there's a bug in SwiftUI.
I have an Image that I use as a background and at the top there's a text. If I apply resizable() to the Image it also affects the behaviour of the text.
var body: some View {
ZStack {
VStack {
Image(affirmation.customImageName ?? "c_0")
.resizable()
.scaledToFill()
.clipped()
}
HStack {
Text(affirmation.title)
.font(.body)
.multilineTextAlignment(.leading)
.lineLimit(nil)
Spacer()
}
.padding(.leading, 5)
.padding(.top, 5)
}
}
Creates this view:
While this code:
var body: some View {
ZStack {
VStack {
Image(affirmation.customImageName ?? "c_0")
.scaledToFill()
.clipped()
}
HStack {
Text(affirmation.title)
.font(.body)
.multilineTextAlignment(.leading)
.lineLimit(nil)
Spacer()
}
.padding(.leading, 5)
.padding(.top, 5)
}
}
Creates this view:
I Have a button embedded inside a Hstack inside a Vstack inside a ZStack inside a Vstack inside a geometryReader in swiftui that does not get tapped. I put a print statement inside and whenever I tried to Tap the button, the print statement won't print. Can anyone help me out here? Thanks. Heres my code:
struct DetailedGroupView: View {
#State var actrualImage: Image?
#State var title = "title"
#State var description = "description"
#State var sgName = "sgName"
#State var membersCount = 0
#Environment(\.presentationMode) var presentationMode
var body: some View {
GeometryReader{ geo in
VStack{
ZStack{
(self.actrualImage ?? Image("earthPlaceholder"))
.resizable()
.aspectRatio(contentMode: .fill)
VStack{
Spacer()
HStack{
//This button doesn't work
Button(action: {
print("Button Tapped")
self.presentationMode.wrappedValue.dismiss()
}, label: {
Image(systemName: "chevron.left").foregroundColor(.white)
}).padding()
Text(self.title)
.font(.largeTitle)
.fontWeight(.bold)
.multilineTextAlignment(.leading)
.foregroundColor(.white)
.padding()
.minimumScaleFactor(0.5)
Spacer()
}
HStack{
Text(self.description)
.font(.custom("Open Sans", size: 18))
.fontWeight(.ultraLight)
.multilineTextAlignment(.leading)
.foregroundColor(.white)
.padding()
Spacer()
}
Spacer()
HStack{
Image(systemName: "person.2.fill").foregroundColor(.white).padding(.leading)
Text("\(self.membersCount)")
.font(.custom("Open Sans", size: 12))
.fontWeight(.semibold)
.foregroundColor(.white)
Spacer()
Text(self.sgName)
.font(.custom("Open Sans", size: 12))
.fontWeight(.semibold)
.foregroundColor(.white)
.padding()
}.padding()
}.frame(width: geo.size.width, height: 294)
}.frame(width: geo.size.width, height: 294)
.clipShape(RoundedRectangle(cornerRadius: 12))
.edgesIgnoringSafeArea(.top)
Spacer()
ScrollView(showsIndicators: false){
VStack{
Spacer()
}.onAppear{
self.actrualImage = Image("globePlaceholder")
}
}
}
}.navigationBarBackButtonHidden(true)
}
}
Just tested this same code on both XCode 11.5 and 12.0, and the button works fine... be sure to test it on a simulator not on the preview/canvas