2017-05-19 16 views
2

Ich versuche, eine Liste der WidgetsFlutter - Bauen Widgets dynamisch

dynamisch
List<Widget> buildGrid(){ 
List<Widget> grid = new List<Widget>(3); 
List<Widget> tiles = []; 
int counter = 0; 

for (int i = 0; i < 3; i++){ 
    tiles = []; 
    for (int j = 0; j < 4; j++){ 
    tiles.add(new GestureDetector(
     onTap:(){ 
     setState((){ 
      toggleColor(counter); 
     }); 
     }, 
     child: new Container(
     color: colors[counter], 
     width: 80.0, 
     height: 80.0, 
     margin: new EdgeInsets.all(11.3), 
    ) 
    )); 
    counter++; 
    } 
    grid[i] = new Row(
    children: tiles, 
); 
    counter = 0; 
} 
return grid; 


} 

Das Problem dabei ist, zu bauen, dass die toggleColor des neu hinzugefügte Element ist immer 12. Ich bedeutete eine neue hinzufügen GestureDetector mit der aktuellen Iteration des Zählers, so dass der Benutzer, wenn er auf ein Element klickt, es nur einfärbt. Wenn ich zum Beispiel gegen 3 setze, wird alles ausgewählt, weil es sich immer noch auf die Zählervariable bezieht, anstatt auf die aktuelle Interaktion, wenn Sie wissen, was ich meine.

Irgendwelche Vorschläge, wie ich dieses Problem effizient lösen kann?

Antwort

3

Sie benötigen den aktuellen Wert der Zählervariablen in einem Verschluss zu erfassen:

final _createTapHandler = (value) { 
    setState(() => toggleColor(value)); 
}; 

Dann können Sie sagen:

onTap: _createTapHandler(counter) 

Vielleicht eine besser verwaltbar Lösung ein Verfahren zu schaffen wäre, dass baut Ihren GestureRecognizer auf. Dann könnten Sie es mit dem Zählerwert konfigurieren.

Widget buildTile(int tileCounter) { 
    return new GestureDetector(
    onTap:(){ 
     setState((){ 
     toggleColor(tileCounter); 
     }); 
    }, 
    child: new Container(
     color: colors[tileCounter], 
     width: 80.0, 
     height: 80.0, 
     margin: new EdgeInsets.all(11.3), 
    ) 
); 
} 

Sie könnten diese Build-Funktion in seine eigene StatelessWidget Refactoring, wenn Sie noch mehr wartbar sein wollen.

+0

Wo muss ich den Verschluss anbringen? – OhMad

+0

Überall, Sie könnten es sogar inline deklarieren. onTap: ((Wert) {setState (() => toggleColor (Wert));}) (Zähler) –

+0

Danke, Ihre BuildTile-Lösung funktioniert perfekt. – OhMad

Verwandte Themen