I have a section that I have some items inside and I want those items to trigger separate Views the problem I have is the color contrast on my NavigationLink Button is blurry but if I use a regular button, it come out correct. This is my code and this is the image that shows up
VStack {
Form {
Section {
Button(action: {}, label: {
HStack(spacing: 2) {
Image("logouticon")
.frame(height: 40)
.frame(width: 40)
.foregroundColor(.black)
Text("Logout")
.foregroundColor(.red)
.font(.system(size: 14, weight: .regular, design: .default))
.multilineTextAlignment(.leading)
.foregroundColor(.black)
}.background(Color.clear)
})
NavigationLink(
destination: EmptyView(),
label: {
HStack(spacing: 2) {
Image("logouticon")
.frame(height: 40)
.frame(width: 40)
.foregroundColor(.black)
Text("Logout")
.foregroundColor(.red)
.font(.system(size: 14, weight: .regular, design: .default))
.multilineTextAlignment(.leading)
.foregroundColor(.black)
}
}
)
}
}
}
The image below is the NavigationLink while the one above it is the Button
You need to put all NavigationLinks in a NavigationView like this:
NavigationView {
VStack {
Form {
Section {
Button(action: {}, label: {
HStack(spacing: 2) {
Image("logouticon")
.frame(height: 40)
.frame(width: 40)
.foregroundColor(.black)
Text("Logout")
.foregroundColor(.red)
.font(.system(size: 14, weight: .regular, design: .default))
.multilineTextAlignment(.leading)
.foregroundColor(.black)
}.background(Color.clear)
})
NavigationLink(
destination: EmptyView(),
label: {
HStack(spacing: 2) {
Image("logouticon")
.frame(height: 40)
.frame(width: 40)
.foregroundColor(.black)
Text("Logout")
.foregroundColor(.red)
.font(.system(size: 14, weight: .regular, design: .default))
.multilineTextAlignment(.leading)
.foregroundColor(.black)
}
}
)
}
}
}
}
Otherwise, they are dimmed because they are disabled.
Related
I'm using WrappingHStack, and I want text elements within it (on buttons, see below) to overflow onto a new line. Currently, this does not happen — it gets truncated with ... at the end.
This does not happen if the button is outside the WrappingHStack:
Outside of WrappingHStack, text correctly overflows onto new line:
Button(action: {
//
}) {
VStack {
Text("A very long sentence. Hopefully it will flow onto the next line")
.font(.system(size: 18, weight: .bold, design: .rounded))
.foregroundColor(.white)
}
.frame(alignment: .leading)
.padding()
.background(
RoundedRectangle(cornerRadius: 6)
.fill(colours[0])
)
.padding(5)
}
.padding(.bottom, 10)
Inside WrappingHStack, it doesn't:
WrappingHStack(0..<sentences.count, id:\.self, alignment: .center) { i in
Button(action: {
//
}) {
VStack {
Text("A very long sentence. Hopefully it will flow onto the next line")
.font(.system(size: 18, weight: .bold, design: .rounded))
.foregroundColor(.white)
}
.frame(alignment: .leading)
.padding()
.background(
RoundedRectangle(cornerRadius: 6)
.fill(colours[i])
)
.padding(5)
}
.padding(.bottom, 10)
}
How can I ensure text overflows in the WrappingHStack too?
Try the below answer:
add .fixedSize(horizontal: false, vertical: true)
VStack {
Text("A very long sentence. Hopefully it will flow onto the next line")
.font(.system(size: 18, weight: .bold, design: .rounded))
.foregroundColor(.white)
.fixedSize(horizontal: false, vertical: true)
}
I am new to SwiftUI and I trying to remove the blank space on my list pagination. Everytime when the list loaded the new page, a blank space is pop-up. how can I fix this?
You can see the problem by bellow attached image,
Screenshot
this is my list view
My List
List {
LazyVGrid(columns: setGridLayout(), spacing: 20) {
ForEach(viewModel.personPopularList, id: \.id) { person in
PeopleCardView(person: person)
.listRowBackground(Color.white)
.listRowSeparator(.hidden)
}
.id(UUID())
.frame(maxWidth: .infinity)
}
.listRowBackground(Color.white)
.listRowSeparator(.hidden)
}
.frame(maxWidth: .infinity)
.onAppear(perform: {
UITableView.appearance().contentInset.top = -20
UITableView.appearance().backgroundColor = UIColor.white
})
.listStyle(GroupedListStyle())
this is my cardview
My CardView
struct PeopleCardView: View {
#State var person: PersonPopularResult
var body: some View {
ZStack(alignment: .center) {
HStack(alignment: .center) {
WebImage(url: URL(string: Constant.POSTER_URL + (person.profilePath ?? "")))
.placeholder {
Image("placeholder")
}
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 100, height: 100)
.clipShape(RoundedRectangle(cornerRadius: 10))
.overlay(RoundedRectangle(cornerRadius: 10)
.stroke(Color.mPurple, lineWidth: 3))
Spacer()
VStack(alignment: .leading) {
Text("\(person.name!)")
.fontWeight(.bold)
.lineLimit(1)
.font(.system(size: 21))
.font(.headline)
Text("Popolarity Rate: \(String(format: "%.3f", person.popularity!))")
.fontWeight(.bold)
.foregroundColor(.mPurple)
.lineLimit(1)
.font(.system(size: 14))
.padding(.top, -8)
Spacer()
}
.padding([.top, .leading], 10)
Spacer()
}
.frame(width: 300, height: 100, alignment: .center)
.padding()
.background(
RoundedRectangle(cornerRadius: 15, style: .continuous)
.fill(.white)
.overlay(RoundedRectangle(cornerRadius: 10)
.stroke(Color.mPurple, lineWidth: 3))
.shadow(radius: 7)
)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
}
}
thanks for anyone can help to my problem.
I want to change background color and add an okay button image to the selection point when I tap to that point. How can I do that ? I do know how to change the background color but I'm not sure how can I add confirmation image in. Should I use ZStack for this or is there any other way to do so ?
HStack {
Button(action: {
self.tap1.toggle()
}) {
Text("")
.padding(.horizontal, 10)
.padding(.vertical, 5)
.background((self.tap1) ? Color(.gray) : Color(.blue)
.cornerRadius(4)
.padding(.leading, 40)
}
Spacer()
Text("Diyabet")
.font(.system(size: 20, weight: .regular, design: .rounded))
.padding(.trailing, 200)
Spacer()
}.padding(.bottom, 20)
HStack {
Button(action: {
self.tap2.toggle()
}) {
Text("")
.padding(.horizontal, 10)
.padding(.vertical, 5)
.background(self.tap2 ? Color(.gray) : Color(.blue)
.cornerRadius(4)
.padding(.leading, 40)
}
Spacer()
Text("Yüksek Tansiyon")
.font(.system(size: 20, weight: .regular, design: .rounded))
.padding(.trailing, 130)
Spacer()
}.padding(.bottom, 20)
HStack {
Button(action: {
self.tap3.toggle()
}) {
Text("")
.padding(.horizontal, 10)
.padding(.vertical, 5)
.background(self.tap3 ? Color(.gray) : Color(.blue)
.cornerRadius(4)
.padding(.leading, 40)
}
Spacer()
Text("Kalp ve Damar Hastalıkları")
.font(.system(size: 20, weight: .regular, design: .rounded))
.padding(.trailing, 45)
Spacer()
}.padding(.bottom, 20)
#State private var pressed = false
var body: some View {
ZStack {
Button(action: {
self.pressed.toggle()
}) {
ZStack {
Rectangle().fill(self.pressed ? Color.blue : Color.gray)
if self.pressed {
Image(systemName: "checkmark")
}
}
}
}
}
I have problem in SwiftUI. I created ScollView and post into some Views. (News Articles). When i launch app - ScrollView and content inside appears in dioganal way, like animation. But i need to launch app and get static ScrollView with views inside it, without any movements.
Also the same problem occurred when i open sheet view with ScrollView and Text Blocks inside. It also appers first 0.3s like dioganaly way. But how can i achive static ? Thank you all )
Place i use sheet controller (Also this block in ScrollView)
ScrollView{
ArticlePreView(image: "one", category: "Category", heading: "Header", author: "some text").onTapGesture {
self.showingDetail.toggle()
}.sheet(isPresented: $showingDetail) {
Home()
}
}
Image to understand
Video of problem
And this is place of my sheet controller
ScrollView() {
VStack {
HStack {
Text("Soem long title")
.font(.title)
.fontWeight(.bold)
Spacer()
Button(action: {
}) {
HStack {
Image(systemName: "heart.fill")
.foregroundColor(Color.gray)
}
.padding()
}
.background(
Circle()
.fill(Color.neuBackground)
)
.shadow(color: .dropShadow, radius: 15, x: 10, y: 10)
.shadow(color: .dropLight, radius: 15, x: -10, y: -10)
}
.padding(.horizontal, 35)
.padding(.top, 25)
Text("long text")
.multilineTextAlignment(.leading)
.foregroundColor(.gray)
.padding(.horizontal, 30)
.padding(.top, 20)
Text("long text")
.multilineTextAlignment(.leading)
.foregroundColor(.gray)
.padding(.horizontal, 30)
.padding(.top, 20)
Text("long text")
.multilineTextAlignment(.leading)
.foregroundColor(.gray)
.padding(.horizontal, 30)
.padding(.top, 20)
Text("long text")
.multilineTextAlignment(.leading)
.foregroundColor(.gray)
.padding(.horizontal, 30)
.padding(.top, 20)
Spacer(minLength: 50)
}
}.frame(width: UIScreen.main.bounds.size.width)
Fixed using
.frame(width: UIScreen.main.bounds.size.width)
.fixedSize()
SwiftUI is not adaptive
I have the following
struct hScrollView: View {
#State private var meals = ["short", "long Text", "really long text"]
var body: some View {
VStack(alignment: .leading) {
ScrollView(.vertical, showsIndicators: false) {
VStack(spacing: 30) {
ForEach(0 ..< meals.count) { count in
VStack(alignment: .leading) {
HStack(alignment: .center) { // .center is by default, so also remove
Text("\(count + 1) ")
.foregroundColor(Color.black)
.multilineTextAlignment(.leading)
.padding(.horizontal, 15)
.padding(.vertical, 5)
.background(
Capsule()
.fill(Color.black)
.opacity(0.20)
)
Spacer()
Text("\(self.meals[count]) ")
.foregroundColor(Color.black)
.multilineTextAlignment(.leading)
Spacer()
Button(action: {
print("Button was tapped")
}) {
Image(systemName: "pencil")
.foregroundColor(Color.yellow)
.font(.system(size: 25, weight: .bold))
.shadow(radius: 1)
}
}
}
.padding(.horizontal)
}
}
.frame(width: UIScreen.main.bounds.width) // set a fixed width
}
.frame(height: 500)
.frame(maxWidth: 400)
.padding(.top, 190)
}
}
}
If you noticed, the text is centered, I want it that way, but all beginning with .leading alignment so they all start at the same start point. What can I fix there? I tried putting the leading alignment in all the stacks :/
Thanks
Your view would be like
(1)|-------|short|-------|✏️
(2)|-----|long text|-----|✏️
(3)|-|really long text|-|✏️
so you should remove the Spacer() between the first Text and second instead of set text alignment.
HStack(alignment: .center) { // .center is by default, so also remove
Text("\(count + 1) ")
.foregroundColor(Color.black)
.multilineTextAlignment(.leading)
.padding(.horizontal, 15)
.padding(.vertical, 5)
.background(
Capsule()
.fill(Color.black)
.opacity(0.20)
)
// Spacer()
Text("\(self.meals[count]) ")
.foregroundColor(Color.black)
.multilineTextAlignment(.leading)
Spacer()
Button(action: {
print("Button was tapped")
}) {
Image(systemName: "pencil")
.foregroundColor(Color.yellow)
.font(.system(size: 25, weight: .bold))
.shadow(radius: 1)
}
}