带有 PageView 构建器的 Flutter Bloc 模式跳过 RadioListTile 选择答案

【问题标题】：Flutter Bloc Pattern with PageView builder skips RadioListTile selection带有 PageView 构建器的 Flutter Bloc 模式跳过 RadioListTile 选择
【发布时间】：2021-02-09 15:05:22
【问题描述】：

创建提供建议的 PageView，一组建议，例如第 1 组节目（香蕉，建议['fruits'，'vegetables']，第二个 Potato 建议 ['vegetables' or could be different]）。它通过右/左滑动实现，如果向左滑动，则在单个屏幕上建议banana，它建议potato。

问题：没有选择收音机。如果我来回移动，单选按钮列表会反映所选值，而不是在它被选中的那一刻

Widget



  @override
  Widget build(BuildContext context) {
    final GlobalBloc _globalBloc = Provider.of<GlobalBloc>(context);
    _globalBloc.suggestionBloc.fetchRecords();
    PageController controller = PageController();
    return Scaffold(
      appBar: AppBar(
        titleSpacing: 0,
        title: Text("Songs Suggestion"),
        elevation: 1,
        backgroundColor: Theme.of(context).accentColor,
        actions: <Widget>[
          IconButton(icon: const Icon(Icons.refresh), tooltip: 'Refresh', onPressed: () => {}),
        ],
      ),
      body: StreamBuilder<List<SuggestionTagSong>>(
        stream: _globalBloc.suggestionBloc.recordTagToSong$,
        builder: (BuildContext context, AsyncSnapshot<List<SuggestionTagSong>> snapshot) {
          if (!snapshot.hasData) return LoadingWidget();
          final List<SuggestionTagSong> recordList = snapshot.data;
          if (recordList.length == 0) return EmptyScreenV2();
          return PageView.builder(
            key: PageStorageKey<String>("tags-song"),
            controller: controller,
            pageSnapping: false,
            physics: PageScrollPhysics(),
            itemCount: recordList.length,
            itemBuilder: (context, index) {
              return Container(
                child: Column(
                  children: [
                    Expanded(
                      child: recordList[index].songSuggestion.length == 0
                          ? Container(child: EmptyScreenV2())
                          : ListView.builder(
                              itemCount: recordList[index].songSuggestion.length,
                              itemBuilder: (BuildContext context, int i) {
                                return Container(
                                  child: RadioListTile(
                                    groupValue: _globalBloc.suggestionBloc.selectedSong$.value,
                                    title: Text(recordList[index].songSuggestion[i].name),
                                    activeColor: Theme.of(context).primaryColor,
                                    value: recordList[index].songSuggestion[i].id,
                                    onChanged: (String val) => _globalBloc.suggestionBloc.selectSong(val),
                                  ),
                                );
                              },
                            ),
                    ),
                  ],
                ),
              );
            },
          );
        },
      ),
    );
  }

Sample Bloc Class

class SuggestionBloc {
  BehaviorSubject<String> _selectedSong$;

  BehaviorSubject<String> get selectedSong$ => _selectedSong$;


  selectSong(String recordId) {
    _selectedSong$.add(recordId);
    print("----");
    print(_selectedSong$.value == recordId);
    print(_selectedSong$.value);
    print(recordId);
  }
}

【问题讨论】：

标签： flutter dart

【解决方案1】：

这里是您问题的解决方案：-

您需要用 StatefulBuilder 包装 RadioListTile
然后在 RadioListTile 中的 onChanged 方法上使用setState((){})
最后用 KeepAlivePage 自定义小部件包裹整个 PageView child

KeepAlivePage自定义小部件，请查看此帖子-> Losing widget state when switching pages in a Flutter PageView

StatefulBuilder使用参考代码：

StatefulBuilder(
   builder: (context, setState) {
     return Container(
         child: RadioListTile(
              groupValue: _globalBloc.suggestionBloc.selectedSong$.value,
              title: Text(recordList[index].songSuggestion[i].name),
              activeColor: Theme.of(context).primaryColor,
              value: recordList[index].songSuggestion[i].id,
              onChanged: (String val) {
                 setState(() => _globalBloc.suggestionBloc.selectSong(val))
             },
           ),
         );
       },
),

【讨论】：