flutter中的dropdown_search库不刷新我的用户列表

问题描述 投票:0回答:2

大家好,感谢您花时间帮助我。

我仅在移动设备上的 flutter 中使用这个库 => pub.dev dropdown_search

当我单击下拉列表时,我会使用 API 调用加载用户列表。我想将它们称为 20 by 20。第一个调用完成得很好,我显示了前 20 个用户,当我到达列表底部时,我有一个新的 API 调用来显示接下来的 20 个。这部分也有效。

我的问题是,下拉列表中的列表视图不会刷新,也不会向我显示接下来的 20 个用户,但在控制台中,我的请求仍然显示我的 20 个新用户。如果我关闭并重新打开下拉列表,列表就会更新。

我联系了开发人员,他告诉我首先尝试将 this => myKey.currentState.reassemble() 与我的scrollController一起使用,但它不起作用。

然后他解释说,为了解决我的问题,他只能看到 Streambuilder 的使用。我试过了,但是没用。

您能给我一些提示或其他什么吗?

这是我在代码中所做的一些事情。在此示例中,我没有使用 StreamBuilder。

final GlobalObjectKey<DropdownSearchState<ListValueOptionList>> myKey = new GlobalObjectKey<DropdownSearchState<ListValueOptionList>>(50);
  bool isListValueModify = false;
  List<delegationModele.Delegation> listDelegations = [];
  int indexDelegationList;
  int pageCounter = 0;
  ScrollController _scrollController = ScrollController();

  List<ListValueOptionList> listValueOptionListModule;
  List<ListValueOptionList> listValueOptionListTypeOfDelegation;
  List<ListValueOptionList> listValueOptionsUserDelegation;
  List userAlreadyUse = [];

  @override
  void initState() {
    super.initState();

    _scrollController.addListener(() {
      if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {
        print("Scroll event");
        _loadValueOptionListSpecificPeople();
        setState(() {});
        myKey.currentState.reassemble();
      }
    });
  } 

  @override
  Widget build(BuildContext context) {
    return Padding(
      /// Allows resize when kerboard is open if
      /// padding == MediaQuery.of(context).viewInsets
      padding: padding,
      child: Container(
        decoration:BoxDecoration(
          color: appStyleMode.primaryBackgroundColor,
          borderRadius: BorderRadius.vertical(top: Radius.circular(25.0)),
        ),
        height: modalHeight,
        child: Padding(
          padding: const EdgeInsets.only(left:30, top:30.0, right: 30, bottom: 20),
          child: ListView(
            shrinkWrap: false,
            children: [
                getModificationItemListDelegationBuilder(),
              ],
            ),
          ),
        ),
    );
  }

  SingleChildScrollView getModificationItemListDelegationBuilder(){
    final appStyleMode = Provider.of<AppStyleModeNotifier>(context);
    return SingleChildScrollView(
      child: Column(
        children: [
          ///Add specific people
          Container(
            width: MediaQuery.of(context).size.width,
            margin: EdgeInsets.only(bottom: 10, top: 10),
            child: Text(
              "${getTranslated(context, "my_delegation_specific_user")} : ",
              style: TextStyle(
                color: specificPeopleisEmpty ? Colors.red : appStyleMode.blackWhiteColor,
                fontSize: 16,
              ),
              textAlign: TextAlign.start,
            ),
          ),
          Container(
            child: ListView.builder(
              shrinkWrap: true,
              itemCount: delegation.userDelegationRecipients.length ?? 0,
              itemBuilder: (context, index){
                return specificPeople(listValueOptionsUserDelegation, index);
              },
            ),
          ),
        ],
      ),
    );
  }

  Widget specificPeople(List<ListValueOptionList> listValueOptionList, int index){
    final appStyleMode = Provider.of<AppStyleModeNotifier>(context);
    delegationModele.UserDelegationRecipients userDelegation = delegation.userDelegationRecipients[index];

    String optionUserDescription;

    if(listValueOptionList != null){

      listValueOptionList.removeWhere((element) => userLoad.id.stringOf == element.idValue);

      for(ListValueOptionList valueOption in listValueOptionList){
          if(valueOption.idValue == userDelegation.delegationUserId){
            optionUserDescription = valueOption.listValueDescription;
          }
      }

      return Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Container(
            width: MediaQuery.of(context).size.width * 0.6,
            child: DropdownSearch<ListValueOptionList>(
              key: myKey,
              dropdownButtonProps: DropdownButtonProps(
                  color: appStyleMode.blackWhiteColor
              ),
              popupProps: PopupProps.menu(
                showSelectedItems: true,
                menuProps: MenuProps(
                  borderRadius: BorderRadius.all(Radius.circular(10.0)),
                  elevation: 5.0,
                  backgroundColor: appStyleMode.primaryBackgroundColor,
                ),
                textStyle: TextStyle(
                    color: appStyleMode.blackWhiteColor
                ),
                scrollbarProps: ScrollbarProps(
                  thumbVisibility: true,
                  thumbColor: appStyleMode.categorySelectorSelectedBackgroundColor,
                  interactive: true
                ),
                listViewProps: ListViewProps(
                  controller: _scrollController,
                  shrinkWrap: true,
                ),
                interceptCallBacks: true,
                itemBuilder: (context, list, isSelected){
                  return new Container(
                    child: ListTile(
                      selected: isSelected,
                      title: Text(
                        list?.listValueDescription,
                        style: TextStyle(
                            color: appStyleMode.blackWhiteColor
                        ),
                      ),
                    ),
                  );
                },
                loadingBuilder: (context, loadingText){
                  return Align(
                    alignment: Alignment.topCenter,
                    child: CircularProgressIndicator(),
                  );
                },
                emptyBuilder: (context, text){
                  return Align(
                    alignment: Alignment.topCenter,
                    child: Text(
                      "${getTranslated(context, "my_delegation_empty_search_user")}",
                      style: TextStyle(
                        color: appStyleMode.blackWhiteColor,
                      ),
                    ),
                  );
                },
                showSearchBox: true,
                searchDelay: Duration(seconds: 1),
                searchFieldProps: TextFieldProps(
                  decoration: InputDecoration(
                    enabled: true,
                    enabledBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(10.0),
                        borderSide: BorderSide(
                            color: appStyleMode.categorySelectorSelectedBackgroundColor,
                            style: BorderStyle.solid
                        )
                    ),
                    border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(10.0),
                        borderSide: BorderSide(
                            style: BorderStyle.solid
                        )
                    ),
                    prefixIcon: Icon(
                      Icons.search_rounded,
                      size: 20,
                    ),
                    hintText: "${getTranslated(context, "my_delegation_search_hint_text")}",
                    hintStyle: TextStyle(
                        fontSize: 13
                    ),
                  ),
                  style: TextStyle(
                    color: appStyleMode.blackWhiteColor,
                  ),
                ),
              ),
              onChanged: (newValue){
                //OnChanges is well used
              },
              compareFn: (value1, value2) => value1.idValue == value2.idValue,
              dropdownDecoratorProps: DropDownDecoratorProps(
                  dropdownSearchDecoration: InputDecoration(
                      border: InputBorder.none
                  )
              ),
              //items: listValueOptionsUserDelegation,
              asyncItems: (filter) async{
                return _loadValueOptionListSpecificPeople();
              },
              itemAsString: (ListValueOptionList list) => list.listValueDescription,
              selectedItem: new ListValueOptionList(idValue: userDelegation.delegationUserId, listValueDescription: optionUserDescription),
              dropdownBuilder: (context, selectedItem){
                if(optionUserDescription == null || optionUserDescription.isEmpty){
                  return Container();
                }else if(optionUserDescription == ""){
                  return Text("");
                }else{
                  selectedItem.listValueDescription = optionUserDescription;
                }
                return textValueDescription(selectedItem.listValueDescription, appStyleMode, TextAlign.start);
              },
            ),
          ),
        ],
      );
    }else{
      return Container();
    }
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }
}
flutter dart dropdown dropdownlistview
2个回答
0
投票

我有一个类似的应用程序。也许这段代码会有所帮助:

class PostsList extends StatefulWidget {
  @override
  State<PostsList> createState() => _PostsListState();
}

class _PostsListState extends State<PostsList> {
  final _scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_onScroll);
  }

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<PostBloc, PostState>(
      builder: (context, state) {
        switch (state.status) {
          case PostStatus.failure:
            return const Center(child: Text('failed to fetch posts'));
          case PostStatus.success:
            if (state.posts.isEmpty) {
              return const Center(child: Text('no posts'));
            }
            return ListView.builder(
              itemBuilder: (BuildContext context, int index) {
                return index >= state.posts.length
                    ? const BottomLoader()
                    : PostListItem(post: state.posts[index]);
              },
              itemCount: state.hasReachedMax
                  ? state.posts.length
                  : state.posts.length + 1,
              controller: _scrollController,
            );
          default:
            return const Center(child: CircularProgressIndicator());
        }
      },
    );
  }

  @override
  void dispose() {
    _scrollController
      ..removeListener(_onScroll)
      ..dispose();
    super.dispose();
  }

  void _onScroll() {
    if (_isBottom) context.read<PostBloc>().add(PostFetched());
  }

  bool get _isBottom {
    if (!_scrollController.hasClients) return false;
    final maxScroll = _scrollController.position.maxScrollExtent;
    final currentScroll = _scrollController.offset;
    return currentScroll >= (maxScroll * 0.9);
  }
}

我为此使用了 bloc,但它应该可以与未来的构建器和使用快照一起使用。基本上用户向下滚动,如果滚动超过列表的 90%,则会发送另一个 getter 以从 api 获取更多项目。如果您想复制整个集团(我强烈推荐),请查看此文档


-1
投票

你在哪里可以解决这个问题?有同样的问题

© www.soinside.com 2019 - 2024. All rights reserved.