如何在警报对话框中实现搜索功能?

时间:2019-06-16 14:05:35

标签: flutter

我想为“警报对话框”中的ListView项目实现搜索栏过滤器。但是我认为set State不适用于Alert Dialog,因为我没有得到想要的结果。有办法实现吗?

我的代码

class _CreateTaskScreenState extends State<CreateTaskScreen> {

  List<String> societiesNames;
   var items = List<String>();

  @override
  void initState() {


  int length = widget.societies.length;

  List<String> list = new List<String>();

  for(var i = 0; i<length; i++){
    list.add(widget.societies[i].name);

  }

  setState(() {
    societiesNames = list;
  });


    items.addAll(societiesNames);

    super.initState();
  }



  String selected;

  //Searching the List

  void filterSearchResults(String query) {
    List<String> dummySearchList = List<String>();
    dummySearchList.addAll(societiesNames);
    if(query.isNotEmpty) {
      List<String> dummyListData = List<String>();
      dummySearchList.forEach((item) {
        if(item.contains(query)) {
          dummyListData.add(item);
        }
      });
      setState(() {
        items.clear();
        items.addAll(dummyListData);
      });
      return;
    } else {
      setState(() {
        items.clear();
        items.addAll(societiesNames);
      });
    }
  }


   @override Widget build(BuildContext context){

//searchbar

    Container searchBar = Container(
        child: TextField(
          onChanged: (value) {
            filterSearchResults(value);
          },
          controller: TextEditingController(),
          decoration: InputDecoration(
              labelText: "Search",
              border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(15.0)))),
        ),

    );

//alert dialog on calling show dialog 

    AlertDialog dialog = AlertDialog(
      title: searchBar,
      content: Container(

        child: ListView.builder(
          shrinkWrap: true,
          itemCount: items == null? 0: items.length,
          itemBuilder: (BuildContext context, int index) {
            return Ink(
              child: InkWell(
                onTap: (){
                  setState(() {
                    selected = items[index];
                    Navigator.pop(context);
                  });
                },
                child: ListTile(
                  title: Text(items[index]),
                ),
              ),
            );
          },
        ),
      ),
    );

    }

    }


该列表在我第一次打开时会正确显示,但是在搜索栏中键入内容不会发生变化。在关闭并重新打开对话框时,它显示为空列表。

1 个答案:

答案 0 :(得分:1)

您要调用的setState方法是'_CreateTaskScreenState'之一,因此您应该使用StatefulBuilder并包装AlertDialog的内容,就像将为您提供的setState方法一样,构建器返回的小部件!

喜欢:

 AlertDialog dialog = AlertDialog(
    title: searchBar,
    content: StatefulBuilder(
      builder: (context, setState) => Container(

        child: ListView.builder(
          shrinkWrap: true,
          itemCount: items == null? 0: items.length,
          itemBuilder: (BuildContext context, int index) {
            return Ink(
              child: InkWell(
                onTap: (){
                  setState(() {
                    selected = items[index];
                    Navigator.pop(context);
                  });
                },
                child: ListTile(
                  title: Text(items[index]),
                ),
              ),
            );
          },
        ),
      ),
    )
);