我将尽力完成您的翻译请求。
由于某些原因,这个操作没有触发小部件重建事件。因此,我无法在被点击的GridView项中看到“X”。
然而,如果我在同一个onTap事件中添加额外的“简单”StateProvider<int>并且也调用它,那么小部件会得到重建,我就可以在GridView中看到“X”。
我甚至没有使用或显示这个额外的state provider,但由于某种原因,它会调用重建,而我的预期provider却不会。
我正在使用StateProvider<List<String>>来跟踪用户在井字游戏板上的点击。
实际的游戏板是扩展了ConsumerWidget并包含可点击的GridView的小部件。
在GridView子元素的onTap事件中,以下内容被调用以更新状态:
ref.read(gameBoardStateProvider.notifier).state[index] = 'X';
由于某些原因,这个操作没有触发小部件重建事件。因此,我无法在被点击的GridView项中看到“X”。
然而,如果我在同一个onTap事件中添加额外的“简单”StateProvider<int>并且也调用它,那么小部件会得到重建,我就可以在GridView中看到“X”。
我甚至没有使用或显示这个额外的state provider,但由于某种原因,它会调用重建,而我的预期provider却不会。
final gameBoardStateProvider = StateProvider<List<String>>((ref) => List.filled(9, '', growable: false));
final testStateProvider = StateProvider<int>((ref) => 0); //dummy state provider
class Board extends ConsumerWidget {
const Board({Key? key}) : super(key: key);
@override
Widget build(BuildContext context, WidgetRef ref) {
final gameBoard = ref.watch(gameBoardStateProvider);
final testState = ref.watch(testStateProvider);
return Expanded(
child: Center(
child: GridView.builder(
itemCount: 9,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
shrinkWrap: true,
itemBuilder: ((BuildContext context, int index) {
return InkWell(
onTap: () {
//With this line only the widget does not get refreshed - and I do not see board refreshed with added 'X'
ref.read(gameBoardStateProvider.notifier).state[index] = 'X';
//??? If I add this line as well - for some reason the widget get refreshed - and I see board refreshed with added 'X'
ref.read(testStateProvider.notifier).state++;
},
child: Container(
decoration: BoxDecoration(border: Border.all(color: Colors.white)),
child: Center(
child: Text(gameBoard[index]),
),
),
);
}),
),
),
);
}
}