I wonder what is the right way to combine List
and Grid
with GridRow
s together?
In Apple's official tutorial on Model data with custom types there is the following example of Grid:
struct ContentView: View {
@State private var players: [Player] = [
Player(name: "Elisha", score: 0),
Player(name: "Andre", score: 0),
Player(name: "Jasmine", score: 0),
]
var body: some View {
VStack(alignment: .leading) {
Text("Score Keeper")
.font(.title)
.bold()
.padding(.bottom)
Grid {
GridRow {
Text("Player")
.gridColumnAlignment(.leading)
Text("Score")
}
.font(.headline)
ForEach($players) { $player in
GridRow {
TextField("Name", text: $player.name)
Text("\(player.score)")
Stepper("\(player.score)", value: $player.score)
.labelsHidden()
}
}
}
.padding(.vertical)
Button("Add Player", systemImage: "plus") {
players.append(Player(name: "", score: 0))
}
Spacer()
}
.padding()
}
}
And there is a practicing exercise which asks
Use a
List
view and anEditButton
so people can reorder the list of players.
No matter how I tried to integrate the List
with EditButton
in this view with Grid
, I always failed.
If I embed the Grid
inside of the List
I get the only one item in the list which is not editable
If I use List
inside of the Grid
, the whole idea behind the usage of Grid
doesn't make sense anymore since the alignment of the GridRow
s follows the List
.
And in general, it feels like combining Grid
and List
is not a good idea and they should be used separately.
What do you think?