Flutter ListView 搜索后不可见

Question

我正在创建一个带有文本字段和列表视图的搜索页面以显示搜索结果。当我进行搜索（调用 onChange ）时，结果不会出现。我知道该方法可以满足我的要求，但我无法显示结果我正在使用 bloc/cubit 架构为什么会这样？我该如何解决？

这是我的代码

搜索

class Search extends StatelessWidget {
  const Search({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BlocConsumer<LayoutCubit, LayoutStates>(listener: (context, state) {
    }, builder: (context, state) {
      var cubit = LayoutCubit.get(context);
      return Scaffold(
          appBar: AppBar(
              title: const Text(
            'Search',
            style: TextStyle(letterSpacing: 2.0, color: Colors.black54),
          )),
          body: Column(children: [
            Container(
              margin: const EdgeInsets.symmetric(horizontal: 10),
              padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 20),
              decoration: BoxDecoration(
                color: Colors.black38.withAlpha(10),
                borderRadius: const BorderRadius.all(
                  Radius.circular(20),
                ),
              ),
              child: Row(children: [
                Expanded(
                  child: TextField(
                    decoration: InputDecoration(
                      hintText: "Search users",
                      hintStyle: TextStyle(
                        color: Colors.black.withAlpha(120),
                      ),
                      border: InputBorder.none,
                    ),
                    onChanged: (String keyword) {
                      cubit.search();
                    },
                  ),
                ),
                Icon(
                  Icons.search,
                  color: Colors.black.withAlpha(120),
                )
              ]),
            ),
            state is LayoutSearchSuccesState
                ? Expanded(
                    child: ListView.separated(
                    padding: const EdgeInsets.only(top: 10),
                    itemCount: cubit.searchUsers.length,
                    separatorBuilder: (context, int index) {
                      return const Divider(
                        color: Colors.grey,
                      );
                    },
                    itemBuilder: (context, index) {
                      String _titleName =
                          cubit.searchUsers[index].name.toTitleCase() +
                              ' ' +
                              cubit.searchUsers[index].lastName.toTitleCase();
                      return ListTile(
                          leading: Column(children: [
                            Container(
                                height: 55,
                                width: 55,
                                decoration: const BoxDecoration(
                                    shape: BoxShape.circle,
                                    image: DecorationImage(
                                      fit: BoxFit.cover,
                                      image:
                                          AssetImage('assets/images/boy.jpg'),
                                    )))
                          ]),
                          title: Text(
                            _titleName,
                            style: const TextStyle(
                                fontWeight: FontWeight.bold, fontSize: 18),
                          ),                                
                          ]),
                          onTap: () {});
                    },
                  ))
                : Text('data')
          ]));
    });
  }
}

肘

  void search() {
    List<UserData> searchUsers = [];
    searchUsers = allUsers
        .where((element) => element.toJson().containsValue('javier'))
        .toList();
    emit(LayoutSearchSuccesState());
    print('all' + allUsers.length.toString());
    print('search' + searchUsers.length.toString());
  }

Answer 1

作为您问题的另一种解决方案，您可以使用搜索委托，它易于使用，您可以对其进行自定义 https://api.flutter.dev/flutter/material/SearchDelegate-class.html

Flutter ListView 搜索后不可见

Flutter ListView is not visible after search

flutter

bloc