フラッター - 私はウィジェットのリストを構築しようとしています動的

Question

をウィジェットを作成し、動的に

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; 


} 

これに伴う問題は、新たに追加された要素のtoggleColorは常に12です。私は新しいを追加することを意味していること、ですGestureDetectorはカウンターの現在の反復を使用しているため、ユーザーが要素をクリックすると色付けされるだけです。たとえば、カウンタを3に設定すると、何を意味するのか分かっていれば、現在のインターアクションではなく、カウンター変数を参照しているため、すべてが選択されます。

この問題を効率的に解決する方法についてのご意見はありますか？

Answer 1

あなたが閉鎖にカウンタ変数の現在値をキャプチャする必要があります。

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

次に、あなたが言うことができる：

onTap: _createTapHandler(counter) 

おそらくより保守ソリューションは、そのメソッドを作成することですあなたのGestureRecognizerを構築します。次に、カウンタ値を設定することができます。

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), 
    ) 
); 
} 

さらにメンテナンスしたい場合は、そのビルド関数を独自のStatelessWidgetにリファクタリングすることができます。