Grid
Grid copied to clipboard
Only show one item when view appear, click to restore
Hello, I use a @State variable to control display Grid, like this:
if(unit == "w"){
Grid(tracks: 3) {
ForEach(weekSelectArr.indices){item in
Toggle(isOn: self.$weekSelectArr[item]) {
Text(weekdays[item])
.frame(height:50)
}.toggleStyle(GridToggleStyle())
}
}.frame(height:200)
}
When the view appear, it shows like this: only show one item.
When I click the item, it come back into grid:
Their parent view is a Form->Section.
Not exactly sure what you are asking and what is the problem. I guess I would like to know what is the expected behavior in addition to the real-life behavior you described, and then also would need to see more complete code snapshot (what is displayed if unit is not equal to "w"?) As a first step, when you first get to the view, what is the value of unit and weekSelectArr? (set a breakpoint at 2nd line of your code snippet and check what the variables contain)
I want to make my view as same as Ios official App - Reminders's custom repeat dose:
When you pick repeat frequency to "Monthly", you can select from the grid below of which days of month you want to repeat the reminder:
In the work of mine,I use "unit" variable to control 3 different grids' appearance, but when the variable change, the grid only show one item, when I click the item, it come back into grid, that's the final appearance I want.
@State private var weekSelectArr = [false, false, false, false, false,false,false]
@State private var monthSelectArr = [false, false, false, false, false,false,false,false, false, false, false, false,false,false,false, false, false, false, false,false,false,false, false, false, false, false,false,false,false,false,false]
@State private var yearSelectArr = [false, false, false, false, false,false,false,false,false,false,false,false]
...
if(todoRepeat.unit == "w"){
Grid(tracks: 3) {
ForEach(weekSelectArr.indices){item in
Toggle(isOn: self.$weekSelectArr[item]) {
Text(weekdays[item])
.frame(height:50)
}.toggleStyle(GridToggleStyle())
}
}.frame(height:300)
}
if(todoRepeat.unit == "m"){
Grid(tracks: 7) {
ForEach(monthSelectArr.indices){item in
Toggle(isOn: self.$monthSelectArr[item]) {
Text(String(item+1))
.frame(height:50)
}.toggleStyle(GridToggleStyle())
}
}.frame(height:300)
}
if(todoRepeat.unit == "y"){
Grid(tracks: 3) {
ForEach(yearSelectArr.indices){item in
Toggle(isOn: self.$yearSelectArr[item]) {
Text(months[item])
.frame(height:50)
}.toggleStyle(GridToggleStyle())
}
}.frame(height:250)
}
Styles.swift:
import Foundation
import SwiftUI
struct GridToggleStyle: ToggleStyle{
func makeBody(configuration: Configuration) -> some View {
Button(action: {
configuration.isOn.toggle()
}) {
Spacer()
configuration.label
.lineLimit(1)
.truncationMode(.tail)
Spacer()
}
.background(configuration.isOn ? Color.blue : Color.white)
.foregroundColor(configuration.isOn ? Color.white : Color.blue)
.buttonStyle(BorderlessButtonStyle())
}
}
In the breakpoint, unit = "w", weekSelectArr = initial value, that's normal condition.