提供者 - 选择器不更新列表项的 UI

Sat*_*was 1 flutter flutter-provider

我有一个由几个带有尾随图标的 sListView组成的。ListTile图标的颜色应根据用户的点击从透明变为绿色。但是,UI 不会根据用户交互进行更新。

ServiceModel这样的。

class ProviderService extends ChangeNotifier {
  final List<String> totalNames = ['Somesh', 'Tarulata', 'Indranil', 'Satyajyoti', 'Biswas', 'Sajal', 'Kumar', 'Slipa', 'Sonam', 'Neelam'];

  List<String> _selectedNames = [];
  List<String> get selectedNames => _selectedNames;

  void updateselectedNames(String name) {
    bool isExists = _selectedNames.contains(name);

    if (isExists)
      _selectedNames.remove(name);
    else
      _selectedNames.add(name);

    notifyListeners();
  }
}
Run Code Online (Sandbox Code Playgroud)

事情ListView是这样的。

class Members extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    ProviderService plService = Provider.of<ProviderService>(context, listen: false);

    return Scaffold(
      body: SafeArea(
        child: Selector<ProviderService, List<String>>(
          selector: (_, service) => service.selectedNames,
          builder: (context, selNames, child) {
            if (plService.totalNames.isEmpty) return child;

            return ListView.separated(
              shrinkWrap: true,
              itemBuilder: (context, index) {
                String _name = plService.totalNames[index];

                return ListTile(
                  title: Text('$_name'),
                  trailing: Icon(
                    Icons.check_circle,
                    color: selNames.contains(_name) ? Colors.lightGreen : Colors.transparent,
                  ),
                  onTap: () {
                    plService.updateselectedNames(_name),
                    print(selNames);
                  },
                );
              },
              separatorBuilder: (_, __) => Divider(),
              itemCount: plService.totalNames.length,
            );
          },
          child: Center(
            child: Text('No names have been found', textAlign: TextAlign.center),
          ),
        ),
      ),
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

当然main.dart是这样的。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ChangeNotifierProvider(
        create: (context) => ProviderService(),
        child: Members(),
      ),
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

即使列表selectedNames已更新,用户界面仍保持不变。这是怎么回事?

小智 7

您可以添加 Selector 的 shouldRebuild 参数并返回 true\xe3\x80\x82,如下所示:

\n
Selector<ProviderService, List<String>>(\n          selector: (_, service) => service.selectedNames,\n          builder: (context, selNames, child) {...},\n          shouldRebuild: (previous, next) => true,\n       )\n
Run Code Online (Sandbox Code Playgroud)\n