Flutter：如何使用 JSON 数据从 ListView.builder 创建搜索栏？

Question

我已经从我的 JSON（本地）文件在 FutureBuilder 中创建了 ListView.builder。我还创建了一个 TextField 小部件，使其成为我的 ListView.builder 的搜索栏。但我不知道如何在我的 TextField 和 ListView.builder 中实现搜索栏语法。

这是我的 FutureBuilder 小部件：

FutureBuilder(
  future: _isInit ? fetchDoa(context) : Future(null),
  builder: (context, _) {
    if (doaList != null) {
      return ListView.builder(
        itemCount: doaList.length,
        itemBuilder: (BuildContext context, int index) {
          Doa doa = doaList[index];
          return _itemList(index);
        },
      );
    } else {
      CircularProgressIndicator();
    }
    return CircularProgressIndicator();
  }),

这里是 _itemList(index) ：

_itemList(index) {
    Doa doa = doaList[index];
    return Container(
        margin: EdgeInsets.symmetric(horizontal: 24),
        child: ListTile(
            title: Text(doa.judul,
                style: TextStyle(fontFamily: "Poppins", fontSize: 16)),
            onTap: () {
              Navigator.of(context).push(MaterialPageRoute(
                  builder: (BuildContext context) => DetailDoa(doa: doa)));
            },
            trailing: Icon(
              Icons.arrow_forward_ios_rounded,
              color: Colors.teal,
            )));
  }

搜索栏与 FutureBuilder 是分开的，因为我在项目中使用了 Stack。这是我想用作搜索栏的 TextField：

_searchBar() {
    return SingleChildScrollView(
      child: Center(
        child: Container(
            margin: EdgeInsets.only(top: 60),
            width: context.widthPct(.8),
            height: context.widthPct(.8) / 6,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(34),
              color: Colors.grey[200],
            ),
            child: Container(
                child: Theme(
              data: new ThemeData(
                primaryColor: Colors.grey[200],
              ),
              child: TextField(
                onSubmitted: (String str) {
                  str = str.toLowerCase();
                  setState(() {});
                },
                autofocus: false,
                style:
                    TextStyle(color: Colors.grey[700], fontFamily: "Poppins"),
                cursorColor: Colors.white,
                decoration: InputDecoration(
                    suffixIcon: Icon(
                      Icons.search,
                      color: Colors.grey[700],
                    ),
                    contentPadding: EdgeInsets.fromLTRB(24, 16, 24, 16),
                    hintText: "Cari doa dulu yuk",
                    hintStyle: TextStyle(
                        color: Colors.grey[700], fontFamily: "Poppins"),
                    border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(200),
                        borderSide: new BorderSide(color: Colors.grey[200]))),
              ),
            ))),
      ),
    );
  }

这是我的应用程序的预览：

非常感谢您的帮助:)

Answer 1

要实现搜索功能，

• 你必须有条件地return _itemList(index);。

• return _itemList(index); 当搜索字符串为空时。

• 如果 search string 不为空，请检查 search string 与 doaList[index].judul 的任何匹配，如果匹配则 return _itemList(index); 或返回 Container()。

• 搜索字符串是搜索字段中给出的输入用户。

• 用最少的逻辑检查下面的sn-p，用你的案例搜索两个字符串。

  String searchSrc = doaList[index].judul.toString().toLowerCase();
  String searchTarget = searchString.toString().toLowerCase();
  
  if(searchTarget == "") return _itemList(index);
  
  if (searchSrc.contains(searchTarget)) {
    // found
    return _itemList(index);
  } else {
    // not found
    return Container();
  }