I understand that this is elementary for the experienced. But please do not scold the newbie.
With arrows I showed what I want.
Here is my code
HStack {
Text("Сумма займа")
.padding()
Text("\(Int(loanAmount)) руб")
.bold()
}
Try the following:
HStack {
Text("Сумма займа")
Spacer()
Text("\(Int(loanAmount)) руб")
.bold()
}
You can also use a flexible frame.
Text("\(Int(loanAmount)) руб")
.bold()
.frame(maxWidth: .infinity, alignment: .trailing)
This expands the frame of Text to the maximum available space. It is an alternative to using Spacer in Stacks.
Related
I have an HStack with two Texts.
HStack {
Text("Hello")
Text("World")
}
I want Text("Hello") to be on the left side of the page and Text("World") to be on the right side of the page and for both texts to be equidistant from the exact horizontal center of the page. I added a visual for clarification:Visual
I've tried a bunch of different stuff but I haven't found any way to accomplish this task precisely.
You can use the alignment argument of the frame modifier.
Spacing argument for the HStack is for the spacing in between the texts.
HStack(spacing: 0) {
Text("Hello, World!")
.frame(maxWidth: .infinity, alignment: .trailing)
Text("Hello, World!")
.frame(maxWidth: .infinity, alignment: .leading)
}
I really didn't understand your need but according to your drawing I think you need something like below,
HStack{
Spacer()
Text("Hello")
.background(Color.orange)
Spacer().frame(width: 20)
Text("World")
.background(Color.orange)
Spacer()
}
I'm trying to build a simple chat with a design like the most usual messengers.
A message consists of a user name (if not your own message), the message itself and a timestamp.
I want the width of a message to be determined by the widest child element (most likely the message, but in rare cases maybe the user name or timestamp).
I also want the user name and message to be aligned leading/left and the timestamp to be aligned trailing/right, just like group chats in WhatsApp, Signal or the likes..
I tried weird amounts of H/V/Z-Stacks, which lead to weird happenings. I also tried both adding Spacers and maxLength = .infinity, which lead to the message stretching to the far right with lots of empty space.
My current code has all elements aligned centered:
And this is what I want:
This code is only for the comment, which itself is embedded into a ScrollView/VStack for each one.
HStack() {
if comment.author?.id == currentUserId {
Spacer()
.frame(width: 50)
Spacer()
}
VStack(spacing: 3) {
if comment.author?.id != currentUserId {
Text("Test User")
.font(.body)
.frame(alignment: .leading)
.border(.red)
}
Text("Test message content")
.frame(alignment: .leading)
.border(.red)
Text(date)
.foregroundColor(.gray)
.frame(alignment: .trailing)
.border(.red)
}
.border(.green)
.padding(10)
.background(Color.gray)
.cornerRadius(10)
if comment.author?.id != currentUserId {
Spacer()
Spacer()
.frame(width: 50)
}
}
Also I thought the double Spacers on the left or right side looked kinda weird. I tried using .frame(minWidth: 50), which ended up way too wide and pushes even a small message like the one on the image into a second line.
I'm happy for any ideas for these problems, but I'm trying to go for a simple solution and no complex calculations with alignmentGuides or GeometryReader or similar.
.frame allows you to specify the alignment.
So you could just make the VStack leading and then use .frame on the last element with alignment: .trailing. Keep in mind that the View will then grow to its available space. If you want to prevent that, just add .fixedSize() (or .fixedSize(horizontal: true, vertical: false)) to the parent view.
GroupBox {
VStack(alignment: .leading) {
Text("Test User")
Text("Test Message Content")
Text("9.5.2022, 19:31")
.font(.caption)
.foregroundColor(.secondary)
.frame(maxWidth: .infinity, alignment: .trailing)
}
.fixedSize()
}
or if you want to keep the VStack on the default alignment
GroupBox {
VStack {
Text("Test User")
.frame(maxWidth: .infinity, alignment: .leading)
Text("Test Message Content")
Text("9.5.2022, 19:31")
.font(.caption)
.foregroundColor(.secondary)
.frame(maxWidth: .infinity, alignment: .trailing)
}
.fixedSize()
}
but it also works using a HStack + Spacer
GroupBox {
VStack(alignment: .leading) {
Text("Test User")
Text("Test Message Content")
HStack {
Spacer()
Text("9.5.2022, 19:31")
.font(.caption)
.foregroundColor(.secondary)
}
}
.fixedSize()
}
I am currently working on a little Project and I really dont know how to fix some issue, the problem is that i have no idea how to align two items in a horizontal stack on different sites.
Heres a screenshot of the current state:
Current State
and that's how it should look like:
How it should look like
this is the current code:
var body: some View {
Button {
}
label: {
HStack{
VStack(alignment: .leading) {
Text("Max Mustermann")
Text("Mustermann GmbH")
.fontWeight(.thin)
}
Image(systemName: "arrow.forward.circle")
}
.frame(minWidth: 320, minHeight: 50, alignment: .leading)
.foregroundColor(.black)
.padding()
.overlay(
RoundedRectangle(cornerRadius: 15)
.stroke(.gray, lineWidth: 1))
}
}
}
I hope somebody can help me :)
Thank you!
Seems like a Spacer is what you need :) Just add it in between the Views in the HStack like so:
HStack{
VStack(alignment: .leading) {
Text("Max Mustermann")
Text("Mustermann GmbH")
.fontWeight(.thin)
}
Spacer() // The New Spacer Here
Image(systemName: "arrow.forward.circle")
}
The documentation linked above illustrates pretty well what can be achieved by using a Spacer :)
Good luck!
I'm trying to align an image to the right size of a list row in Swift/SwiftUI.
List {
Image(systemName: "pencil")
}
I've tried adding several different alignment tags but none seem to work. Any help would be greatly appreciated :)
Put it in a HStack and add a spacer.
List {
HStack {
Spacer()
Image(systemName: "pencil")
}
}
I assume you wanted this (tested with Xcode 12.1 / iOS 14.1):
List {
Image(systemName: "pencil")
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .trailing)
.listRowInsets(EdgeInsets())
}
I wanna create an HStack with levitating space between objects, but equal between each one and also it must fit on horizontal, Some of like that
I used Spacer() between objects, like that
HStack {
Text("Object1")
Spacer()
Text("Object2")
Spacer()
Text("ASASASA")
Spacer()
Text("asa")
}
.padding()
But there is just a question, Is there any way better than for making my code cleaner??
Maybe something like this? You might want to set the alignment: to what you need.
HStack(spacing: 20) {
Group {
Text("Object1")
Text("Object2")
Text("ASASASA")
Text("asa")
}
.frame(minWidth: 0, maxWidth: .infinity, alignment: .center)
}