I have a button which I am unable to align to the top left with topLeading.
What I hope to accomplish:
my code:
var body: some View {
ZStack {
ZStack(alignment: .topLeading) {
Button(action: { self.show.toggle() }) {
HStack {
Spacer()
Image(systemName: "list.dash")
.foregroundColor(.black)
}
.padding(.trailing, 20)
.frame(width: 90, height: 60)
.background(Color.white)
.cornerRadius(30)
.shadow(color: Color("buttonShadow"), radius: 10, x: 0, y: 10)
}
Spacer()
}
}
}
But I get this:
The issue is that your wrapping views (two ZStacks) by default will take up only the space of their content, which is only the button. If you add a frame to allow the wrapper to expand you'll see the alignment working as you expect.
var body: some View {
ZStack {
ZStack {
Button(action: { self.show.toggle() }) {
HStack {
Spacer()
Image(systemName: "list.dash")
.foregroundColor(.black)
}
.padding(.trailing, 20)
.frame(width: 90, height: 60)
.background(Color.white)
.cornerRadius(30)
.shadow(color: Color.gray, radius: 10, x: 0, y: 10)
}
Spacer()
}
.frame(
maxWidth: .infinity,
maxHeight: .infinity,
alignment: Alignment.topLeading
)
}
}
Add background space consumer, like below (tested with Xcode 11.4)
ZStack(alignment: .topLeading) {
Color.clear // << here !!
Button(action: { self.show.toggle() }) {
Related
Here is my code:
import SwiftUI
struct TrendingView : View {
#State var selectedTab: Tabs = .hot
#State private var searchText = ""
var body: some View {
NavigationView {
VStack {
HStack {
Text(" Trending")
.font(.largeTitle)
.frame(width: 175, height: 50, alignment: .leading)
.overlay(
RoundedRectangle(cornerRadius: 5)
.stroke(.black, lineWidth: 2)
)
.italic()
.fontWeight(.heavy)
.foregroundColor(Color(hue: 1.0, saturation: 0.977, brightness: 0.985))
.offset(x: -75, y: -25)
.padding(.bottom, -20)
NavigationLink(destination: testT()) {
Image(systemName: "magnifyingglass.circle.fill")
.resizable()
.scaledToFit()
.frame(width: 40, height: 40)
.foregroundColor(.black)
.padding(.bottom, -20)
}
.offset(x: 50, y: -25)
.padding(.leading, 5.0)
}
ScrollView {
VStack {
Text("Hot Items 🔥")
.bold()
.italic()
.offset(x: 5)
.frame(width: 120, height: 25, alignment: .leading)
.overlay(
RoundedRectangle(cornerRadius: 5)
.stroke(.black, lineWidth: 2)
)
.background(.yellow)
.offset(x: -130, y: 5)
ScrollView(.horizontal) {
HStack {
NavigationLink(destination: ImageTest()) {
Image("testpic1")
.resizable()
.frame(width: 200, height: 200)
}
NavigationLink(destination: ImageTest()) {
Image("testpic3")
.resizable()
.frame(width: 200, height: 200)
}
}.offset(y: 30)
}
}
}
There seems to be some error with scrollview above my vstack as it randomly causes all the content on this view to shift downwards when switching to and from other views.Ive tried removing the scrollview and the error disappears and also tried changing it around in other places but I still get the error Can anybody point me in the right direction? Thanks
Fixed, added to the bottom of my code and it seems like the issue is solved
.navigationBarTitle(Text(""), displayMode: .inline)
.navigationBarHidden(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 have a SwiftUI app with a Navigation View. Inside that Navigation View is a List. The List contains Navigation Links. Everything works fine, but I'd like each List item to stretch out to the full width of the view and not have that gray margin all the way around it.
How do I make the List the full width and also eliminate top margin?
import SwiftUI
struct ConsumerDashboardView: View {
#StateObject var authVM = AuthorizationClass()
var body: some View {
NavigationView {
VStack{
Spacer()
.frame(height: 50)
Button(action: {
print("Button Clicked")
}){
Text("\(Image(systemName: "plus")) Start a New Project")
.font(.headline)
.fontWeight(/*#START_MENU_TOKEN#*/.bold/*#END_MENU_TOKEN#*/)
.foregroundColor(.white)
.padding()
.frame(width: 300, height: 60)
.background(Color("BrandOrange"))
.cornerRadius(5.0)
}
Spacer()
.frame(height: 100)
VStack(spacing: -2){
HStack{
Text(" Active\nProjects")
.font(.headline)
.fontWeight(/*#START_MENU_TOKEN#*/.bold/*#END_MENU_TOKEN#*/)
.frame(
width: 120,
height: 60,
alignment: .center
)
.background(Color("BrandLightBlue"))
.foregroundColor(.white)
.padding(.trailing, 50)
Text(" Closed\nProjects")
.font(.headline)
.fontWeight(/*#START_MENU_TOKEN#*/.bold/*#END_MENU_TOKEN#*/)
.frame(
width: 120,
height: 60,
alignment: .center
)
.border(Color("BrandLightBlue"), width: 2)
.background(Color(.white))
.foregroundColor(Color("BrandLightBlue"))
}
Divider()
.frame(
width: 1000,
height: 3
)
.background(Color("BrandLightBlue"))
Spacer()
if !authVM.projectObjects.isEmpty {
ProjectsList(authVM: authVM)
} else {
ProjectsLoader(authVM: authVM)
}
}
}
.navigationBarTitleDisplayMode(.inline)
.toolbar {
ToolbarItem(placement: .principal) {
HStack {
Image("Icon")
.resizable()
.frame(
width: 30,
height: 30
)
Text("Icon").font(.headline)
Image(systemName: "line.3.horizontal.decrease.circle")
.imageScale(.large)
}
}
}
}.onAppear {
authVM.fetchProjects()
}
}
}
struct ProjectsList: View {
#StateObject var authVM = AuthorizationClass()
var body: some View {
List(authVM.projectObjects){ projectObject in
NavigationLink(destination: ProjectDetailView(project: projectObject.project)){
ProjectRowView(project: projectObject.project)
.frame(
height: 150
)
}
}
}
}
As you can see from the image I have a widget with a series of elements, I have to put at the end of the series of elements then the word Next update which must find some at the end of the widget.
The problem is:
if there are few elements, Next update is too high.
if there are many elements the Next update message is not shown.
Can you give me a hand?
P.s.
If you think it should be written differently let me know, thank you in advance.
struct GitCommitWidgetEntryView : View {
var entry: ProviderCommit.Entry
#Environment(\.colorScheme) var colorScheme
let firstColor: UInt = getDate() ? 0x4688B4 : 0x030721
var body: some View {
GeometryReader { geometry in
if(entry.loading){
if(!entry.error){
VStack() {
if(entry.user != ""){
HStack {
Spacer()
Text("\(entry.user) (\(entry.commits.count))")
.font(.caption)
.foregroundColor(Color.black)
.shadow(
color: Color.black,
radius: 1.0,
x: CGFloat(1),
y: CGFloat(1)
)
Spacer()
}
.background(Color(hex: 0xff9800))
}
if(entry.commits.count > 0){
ForEach(entry.commits, id:\.id){
item in
Text(item.commit.message)
.shadow(
color: Color.black,
radius: 1.0,
x: CGFloat(1),
y: CGFloat(1)
)
Text("\(item.author.login) \(convertDate(date: item.commit.author.date))")
.shadow(
color: Color.black,
radius: 1.0,
x: CGFloat(1),
y: CGFloat(1)
)
Divider()
}
.frame(alignment: /*#START_MENU_TOKEN#*/.center/*#END_MENU_TOKEN#*/)
}else{
Text("There are no repositories.")
.font(.caption)
.foregroundColor(Color.black)
.padding(2)
.background(Color.white.opacity(0.4))
.cornerRadius(5)
.padding(.bottom, 3)
.padding(.horizontal, /*#START_MENU_TOKEN#*/10/*#END_MENU_TOKEN#*/)
.multilineTextAlignment(.center)
.frame(maxWidth: .infinity, maxHeight: /*#START_MENU_TOKEN#*/.infinity/*#END_MENU_TOKEN#*/, alignment: /*#START_MENU_TOKEN#*/.center/*#END_MENU_TOKEN#*/)
}
HStack {
Spacer()
Text("Next update")
.font(.caption)
.foregroundColor(Color.black)
.multilineTextAlignment(.center)
.shadow(
color: Color.black,
radius: 1.0,
x: CGFloat(1),
y: CGFloat(1)
)
Spacer()
}
.background(Color(hex: 0xff9800))
}
.background(LinearGradient(
gradient: Gradient(colors: [
Color(hex: firstColor),
Color(hex: 0xffffff)
]),
startPoint: .top,
endPoint: .bottom)
)
}else{
VStack() {
Text("No user exist.")
.font(.caption)
.foregroundColor(Color.black)
.padding(2)
.background(Color.white.opacity(0.4))
.cornerRadius(5)
.padding(.bottom, 3)
.padding(.horizontal, /*#START_MENU_TOKEN#*/10/*#END_MENU_TOKEN#*/)
.multilineTextAlignment(.center)
}
.frame(maxWidth: .infinity, maxHeight: /*#START_MENU_TOKEN#*/.infinity/*#END_MENU_TOKEN#*/, alignment: /*#START_MENU_TOKEN#*/.center/*#END_MENU_TOKEN#*/)
.background(Color.red)
}
}else{
VStack() {
Text("No user selected.")
.font(.caption)
.foregroundColor(Color.black)
.padding(2)
.background(Color.white.opacity(0.4))
.cornerRadius(5)
.padding(.bottom, 3)
.padding(.horizontal, /*#START_MENU_TOKEN#*/10/*#END_MENU_TOKEN#*/)
.multilineTextAlignment(.center)
}
.frame(maxWidth: .infinity, maxHeight: /*#START_MENU_TOKEN#*/.infinity/*#END_MENU_TOKEN#*/, alignment: /*#START_MENU_TOKEN#*/.center/*#END_MENU_TOKEN#*/)
.background(Color.green)
}
}
}
}
The approach you need is to separate "labels to be always on screen" and "growing list", schematically it should be like
VStack {
Text("Header label")
Spacer()
Text("Footer label")
}
.background(
VStack {
Text("Header label").opacity(0) // for content offset
// or constant height spacer
ForEach ... // list here
}
}
I have some SwiftUI function. I want to show my button in bottom left, but it shows top left.
struct NewRecordButton: View {
var body: some View {
ZStack (alignment: .bottomTrailing) {
HStack (alignment: .bottom) {
Spacer()
Button(action: { },
label: {
Text("⌂")
.font(.system(.largeTitle))
.frame(width: 35, height: 30)
.foregroundColor(Color.white)
.padding(.bottom,4)
}) .background(Color.black)
.cornerRadius(10)
.shadow(color: Color.black.opacity(0.3),
radius: 3,
x: 3,
y: 3)
}
}
}
}
Any ideas?
Here is possible variant
ZStack (alignment: .bottomTrailing) {
Rectangle().fill(Color.clear)
HStack (alignment: .bottom){
Button(action: {
}, label: {
Text("⌂")
.font(.system(.largeTitle))
.frame(width: 35, height: 30)
.foregroundColor(Color.white)
.padding(.bottom,4)
})
.background(Color.black)
.cornerRadius(10)
.shadow(color: Color.black.opacity(0.3),
radius: 3,
x: 3,
y: 3)
Spacer()
}
}
Although it's possible, but you should try NOT to use dummy views to arrange other views!
For pushing a view down, you should use a VStack and a Spacer together
VStack {
Spacer()
// bottomView
}
So it should be like:
ZStack {
VStack {
Spacer() // This will push it down, since it is in a `VStack`
HStack {
Button("⌂") {}
.font(.largeTitle)
.frame(width: 35, height: 30)
.foregroundColor(.white)
.padding(.bottom, 4)
.background(Color.black)
.cornerRadius(10)
.shadow(color: Color.black.opacity(0.3), radius: 3, x: 3, y: 3)
Spacer() // This will push it left, since it is in a `HStack`
}
}
}