flutter DART：筛选和搜索无法正常工作

我对Flutter和Dart是新手，所以这可能是一个愚蠢的问题。
我试图添加搜索和过滤的功能，我从公共API（https://randomuser.me/api/?results=1）获得的一些数据。出于一些奇怪的原因，当我过滤性别时，我得到的结果是好坏参半的。它们从来都不是正确的。我可能会过滤男性，我会得到5个男性记录和一个女性记录在结果的尾部。我也有问题得到搜索功能的工作以及。我正在粘贴我的home.dart文件中的所有代码。这应该足够了，如果没有，让我知道，我会补充更多。

`import 'dart:html';

import 'package:flutter/material.dart';
// import 'package:flutterapp/model/user_name.dart';
import '../model/user.dart';
import '../services/user_api.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  List<User> users = [];
  final TextEditingController _searchController = TextEditingController();
  final List<String> filterOptions = [
    'All',
    'Male',
    'Female',
  ];
  String selectedFilter = 'All';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Resting API Call'),
        centerTitle: mounted,
        backgroundColor: Colors.black54,
        shadowColor: Colors.blue,
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextField(
              controller: _searchController,
              decoration: const InputDecoration(
                hintText: "Search users...",
              ),
            ),
          ),
          DropdownButton(
            value: selectedFilter,
            items: filterOptions
                .map((e) => DropdownMenuItem(
                      value: e,
                      child: Text(e),
                    ))
                .toList(),
            onChanged: (value) {
              setState(() {
                selectedFilter = value as String;
              });
            },
          ),
          Expanded(
            child: ListView.builder(
              addRepaintBoundaries: true,
              padding: const EdgeInsets.only(top: 5),
              itemBuilder: (context, index) {
                final user = users[index];
                // final email = user.email;
                final gender = user.gender;
                // final color = user.gender == 'male' ? Colors.blue : Colors.white10;
                final imageUrl = user.picture.thumbnail;
                // final searchText = _searchController.text;

                // bool isMatch = user.fullName
                //     .toLowerCase()
                //     .contains(searchText.toLowerCase());

                return Card(
                  elevation: 4,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(18.0),
                  ),
                  child: ListTile(
                    leading: ClipRRect(
                      borderRadius: BorderRadius.circular(180),
                      child: Image.network(imageUrl),
                    ),
                    title: Text(user.fullName),
                    // subtitle: Text(user.location.country),
                    subtitle: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(user.location.fullStreetName),
                        Text(user.location.city),
                        Text(user.location.state),
                        Text(user.location.country),
                        Text(user.location.fullcoordinates),
                        Text(user.email),
                        Text(user.gender),
                      ],
                    ),
                  ),
                );
              },
              itemCount: users.where((user) {
                if (selectedFilter == 'All') {
                  return true;
                } else {
                  return user.gender == selectedFilter.toLowerCase();
                }
              }).length,
            ),
          ),
        ],
      ),
    );
  }

  Future<void> fetchUsers() async {
    final response = await UserApi.fetchUsers();
    setState(() {
      users = response;
    });
  }
}`

在下面的代码块中。我希望如果我选择“全部”，我的查询中的所有记录都会出现。如果我选择“All”以外的任何选项，我的querey将根据过滤器返回记录。

itemCount: users.where((user) {
       if (selectedFilter == 'All') {
                  return true;
                } else {
                  return user.gender == selectedFilter.toLowerCase();
                }
              }).length,

itemCount属性用于指定列表中的项数。
请改为执行以下操作：
在build方法中，根据过滤器获取用户列表，并将其分配给一个变量：

final searchKeyword = _searchController.text.toLowerCase();
final filteredUsers = users.where((user) {
    // handle filter
    if (selectedFilter == 'All') {
        return true;
    } else {
        return user.gender == selectedFilter.toLowerCase();
    }
}).where((user) {
    // handle search
    return searchKeyword.isEmpty || user.fullName.toLowerCase().contains(searchKeyword);
}).toList();

然后将其提供给ListView小部件：

ListView.builder(
    // ...
    itemBuilder: (context, index) {
        final user = filteredUsers[index];
        // ...
    },
    itemCount: filteredUsers.length,
),

flutter DART：筛选和搜索无法正常工作

1条答案

相关问题

热门标签

最新问答