Grid icon indicating copy to clipboard operation
Grid copied to clipboard

Only show one item when view appear, click to restore

Open AntoniotheFuture opened this issue 3 years ago • 2 comments

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. image

When I click the item, it come back into grid: image

Their parent view is a Form->Section.

AntoniotheFuture avatar Oct 29 '21 06:10 AntoniotheFuture

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)

hartti avatar Oct 29 '21 16:10 hartti

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: image

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())
    }
}


image

image

In the breakpoint, unit = "w", weekSelectArr = initial value, that's normal condition.

AntoniotheFuture avatar Oct 30 '21 04:10 AntoniotheFuture