This question already has an answer here:
SwiftUI iOS14 - NavigationView + List - Won't fill space
(1 answer)
Closed 2 years ago.
I found the list in SwiftUI iOS 14 will have something like border if the view contained navigationView. Is there any solution to disable the border? Coz the border break the design of my application.
Here is the code that contained no NavigationView inside the code.
struct ContentView: View {
#State var isPresent = false
var body: some View {
let first = Restaurant(name: "Joe's Original")
let second = Restaurant(name: "The Real Joe's Original")
let third = Restaurant(name: "Original Joe's")
let restaurants = [first, second, third]
VStack{
List(restaurants) { restaurant in
Text(restaurant.name)
}
}
}
}
}
Here is the code that contained NavigationView
struct ContentView: View {
#State var isPresent = false
var body: some View {
let first = Restaurant(name: "Joe's Original")
let second = Restaurant(name: "The Real Joe's Original")
let third = Restaurant(name: "Original Joe's")
let restaurants = [first, second, third]
NavigationView{
VStack{
List(restaurants) { restaurant in
Text(restaurant.name)
}
}
}
}
}
The design that I want is the first photo. I have no idea how to disable the border that added into the list iOS14. Any suggestion?
Try to use plain list style explicitly (I assume now they used inset list style by default)
NavigationView{
VStack{
List(restaurants) { restaurant in
Text(restaurant.name)
}
.listStyle(PlainListStyle()) // << here !!
}
}
Related
struct ContentView: View {
var array = ["Fire", "Water", "Earth", "Air", "Emotion"]
#State var randomList = [String]()
var body: some View {
VStack {
List (randomList, id: \.self) { ranList in
Text(ranList)
}
Button("Add to list") {
let ranIndexNumber = Int.random(in: 0...array.count-1)
randomList.append(array[ranIndexNumber])
}
Hi everyone, I am new to the coding and to stack overflow website, I am learning SwiftUI atm and this code above was a "challenge" which is; as I tap the button, the code adds random items from array list above, to the list. I managed to write the code, but I wanted to add another function to the button;
When tapped, in addition to adding items to the list, I want it to remove all items if item count in the list exceed 10. How am I suppose to do that, I don't know/not yet learned a way to count the items in a list to use in an IF statement.
Thanks for the help in advance
P.S. if there is any way to add my code with right colors while posting, I would be grateful if you shortly describe how to do it.Thanks
struct ContentView: View {
var array = ["Fire", "Water", "Earth", "Air", "Emotion"]
#State var randomList = [String]()
var body: some View {
VStack {
List (randomList, id: \.self) { ranList in
Text(ranList)
}
Button("Add to list") {
let ranIndexNumber = Int.random(in: 0...array.count-1)
if randomList.count >= 10 {
randomList = [array[ranIndexNumber]]
} else {
randomList.append(array[ranIndexNumber])
}
}
I have a navigation view and each NavigationLink jumps to a color view:
struct ContentView: View {
private let navigationLinks: [NavigationItem] = [
NavigationItem("Red", AnyView(Color.red.edgesIgnoringSafeArea(.all))),
NavigationItem("Orange", AnyView(Color.orange.edgesIgnoringSafeArea(.all))),
NavigationItem("Yellow", AnyView(Color.yellow.edgesIgnoringSafeArea(.all))),
NavigationItem("Green", AnyView(Color.green.edgesIgnoringSafeArea(.all))),
NavigationItem("Blue", AnyView(Color.blue.edgesIgnoringSafeArea(.all))),
NavigationItem("Purple", AnyView(Color.purple.edgesIgnoringSafeArea(.all))),
NavigationItem("Pink", AnyView(Color.pink.edgesIgnoringSafeArea(.all))),
NavigationItem("Cyan", AnyView(Color.cyan.edgesIgnoringSafeArea(.all))),
NavigationItem("Teal", AnyView(Color.teal.edgesIgnoringSafeArea(.all))),
NavigationItem("Black", AnyView(Color.black.edgesIgnoringSafeArea(.all))),
NavigationItem("Gray", AnyView(Color.gray.edgesIgnoringSafeArea(.all))),
]
var body: some View {
NavigationView {
ForEach(self.navigationLinks, id:\.key) { item in
NavigationLink(destination: item.value) {
Text(item.key)
}
}
}
}
}
struct NavigationItem {
let key: String
let value: AnyView
init(_ key: String, _ value: AnyView) {
self.key = key
self.value = value
}
}
The result of running the program is just an Orange Item, and the other NavigationItems have disappeared.
When I click the back button in the upper left corner it will go back to the Red Item.
Is there any work around for this?
Your current ForEach will directly add all Text to NavigationView and this makes NavigationView confused. Wrap your ForEach to either List or VStack.
List { //Or VStack {
ForEach(self.navigationLinks, id:\.key) { item in
NavigationLink(destination: item.value) {
Text(item.key)
}
}
}
Note: With VStack you don't have scroll so if you are planning to add more items or a dynamic list then it's better to use List View only.
I am trying to alternate at the background color of a List/ForEach using a #State var and toggling it on each repetition. The result is alway that the last color behind the entire List. I have set a breakpoint a Text view inside the ForEach and executing it, I see a stop once per item in the input array, then a display on the screen as expected (i.e. every second row is red and the rest are blue). Then, for some reason, we iterate through the code again, one for each item and leave the loop with the background color of all rows being blue.
The code below is a simplified version of my original problem, which iterates over a Realm Results and is expected to handle a NavigationLink rather than the Text-view and handle deleting items as well.
struct ContentView: View {
let array = ["olle", "kalle", "ville", "valle", "viktor"]
#State var mySwitch = false
var body: some View {
List {
ForEach(array, id: \.self) { name in
Text(name)
.onAppear() {
mySwitch.toggle()
print("\(mySwitch)")
}
.listRowBackground(mySwitch ? Color.blue : Color.red)
}
}
}
}
It because of #State var mySwitch = false variable is attached with all row of ForEach so whenever your mySwitch var change it will affect your all row.
So if you want to make some alternative way, you can use the index of item and check whether your number is even or not and do your stuff according to them.
Demo:
struct ContentView: View {
let array = ["olle", "kalle", "ville", "valle", "viktor"]
#State var mySwitch = false
var body: some View {
List {
ForEach(array.indices, id: \.self) { index in
Text(array[index])
.onAppear() {
mySwitch.toggle()
print("\(mySwitch)")
}
.listRowBackground(index.isMultiple(of: 2) ? Color.blue : Color.red)
}
}
}
}
I have following code in SwiftUI
struct AuthorView: View {
let authors = ["a","b","c"]
#State private var selectedAuthor = ""
var body: some View {
VStack {
Text("Authors").font(.title)
HStack {
List(authors, id: \.self, selection: $selectedAuthor) {author in
Text(author).tag(author)
}
Spacer()
}
}
}
but I can't compile due to error "Generic parameter 'SelectionValue' could not be inferred". What I'm doing wrong here? My aim is to get selected author for later use.
Thanks.
List selection by interface contract should be optional, so here is fixed part
struct AuthorView: View {
let authors = ["a","b","c"]
#State private var selectedAuthor: String? // << !!
// ... other code
}
How is it possible to set a #State var inside a geometryReader?
This is my code:
#State var isTest:Int = 0
var body: some View {
VStack{
ForEach(self.test, id: \.id) { Test in
VStack{
GeometryReader { geometry in
self.isTest = 1
I try with a function but it doesn't work.
#State var isTest: Int = 0
func testValue() {
self.isTest = 1
}
var body: some View {
VStack{
ForEach(self.test, id: \.id) { Test in
VStack{
GeometryReader { geometry in
testValue()
Any idea? Thanks!
I also had a similar problem yesterday. But I was trying to pass a value from inside the GeometryReader.
I tried a couple of ways but it didn't work.
When I use #State var to declare the variable, the compiler again complained in a purple line saying that Modifying the view during update will make it become Undefined.
When I tried to declare a variable using var only, the compiler just told me that it's immutable.
And then, I tried storing it onto my #EnvironmentObject. And I just got a dead loop.
So, my last hope was using the notification way and some how it worked. But I don't know if it's the standard way of implementation.
#State private var viewPositionY:CGFloat = 0
First, post the value frame.origin.y via notification.
GeometryReader{ geometry -> Text in
let frame = geometry.frame(in: CoordinateSpace.global)
NotificationCenter.default.post(name: Notification.Name("channelBlahblahblah"), object:nil, userInfo:["dict":frame.origin.y])
return Text("My View Title")
}
And then declare a publisher to receive the notification.
private let myPublisher = NotificationCenter.default.publisher(for: Notification.Name("channelBlahblahblah"))
Finally, use the the .onReceive modifier to receive the notification.
.onReceive(myPublisher) { (output) in
viewPositionY = output.userInfo!["dict"] as! CGFloat
//you can do you business here
}
While putting code into function is a nice touch, there may arrive another problem and that is altering the #State variable during update phase:
[SwiftUI] Modifying state during view update, this will cause undefined behavior
Using NotificationCenter to move #State variable update after view update phase can help, but one could use much more simple solution like performing variable update right after render phase by using DispatchQueue.
#State var windowSize = CGSize()
func useProxy(_ geometry: GeometryProxy) -> some View {
DispatchQueue.main.async {
self.windowSize = geometry.size
}
return EmptyView()
}
var body: some View {
return GeometryReader { geometry in
self.useProxy(geometry)
Text("Hello SwiftUI")
}
}
You can update #State variables in the onAppear method if you need the initial geometry values
#State var windowSize = CGSize()
var body: some View {
return GeometryReader { geometry in
VStack {
Text("Hello SwiftUI")
}
.onAppear {
windowSize = geometry.size
}
}
}
You can use onAppear(perform:) to update #State variables with the initial view size and onChange(of:perform:) to update the variables when the view size changes:
struct MyView: View {
#State private var size: CGSize = .zero
var body: some View {
GeometryReader { geometry in
ZStack {
Text("Hello World")
}.onAppear {
size = geometry.size
}.onChange(of: geometry.size) { newSize in
size = newSize
}
}
}
}
Try this
#State private var viewSize: CGSize = .zero
var body: some View {
VStack {
// ...
}
.background(GeometryReader { proxy in
Color.clear.preference(
key: ViewSizePreferenceKey.self,
value: proxy.size
)
})
.onPreferenceChange(ViewSizePreferenceKey.self) { size in
viewSize = size
}
}
private struct ViewSizePreferenceKey: PreferenceKey {
static var defaultValue: CGSize = .zero
static func reduce(value: inout CGSize, nextValue: () -> CGSize) {
value = value.width + value.height > nextValue().width + nextValue().height ? value : nextValue()
}
}
So it's totally possible to update a #State inside a GeometryReader. The solution is simple. However, there's a caveat:
you might end up with an infinite loop
(nothing too troublesome, I'll present a solution here)
You'll just need a DispatchQueue.main.async and explicitly declare the type of the view inside GeometryReader. If you execute the View below (don't forget to stop it) you'll see that it never stops updating the value of the Text.
NOT THE FINAL SOLUTION:
struct GenericList: View {
#State var timesCalled = 0
var body: some View {
GeometryReader { geometry -> Text in
DispatchQueue.main.async {
timesCalled += 1 // infinite loop
}
return Text("\(timesCalled)")
}
}
}
This happens because the View will "draw" the GeometryReader, which will update a #State of the View. Thus, the new #State invalidates the View causing the View to be redrawn. Consequently going back to the first step (drawing the GeometryReader and updating the state).
To solve this you need to put some constraints in the draw of the GeometryReader. Instead of returning your View inside the GeometryReader, draw it then add the GeometryReader as a transparent overlay or background. This will have the same effect but you'll be able to put constraints in the presentation.
Personally, I'd rather use an overlay because you can add as many as you want. Note that an overlay does not permit an if else inside of it, but it is possible to call a function. That's why there's the func geometryReader() below. Another thing is that in order to return different types of Views you'll need to add #ViewBuilder before it.
In this code, the GeometryReader is called only once and you get the #State var timesCalled updated.
FINAL SOLUTION:
struct GenericList: View {
#State var timesCalled = 0
#ViewBuilder
func geometryReader() -> some View {
if timesCalled < 1 {
GeometryReader { geometry -> Color in
DispatchQueue.main.async {
timesCalled += 1
}
return Color.clear
}
} else {
EmptyView()
}
}
var body: some View {
Text("\(timesCalled)")
.overlay(geometryReader())
}
}
Note: you don't need to put the same constraints, for example, in my case, I wanted to move the view with the drag gesture. So, I've put the constraints to start when the user touches down and to stop when the user ends the drag gesture.