Question

因此，我已列出了静态联系人，并且尝试添加搜索栏，但是无法使用搜索栏搜索联系人。当我单击搜索栏时，它将打开，然后关闭。键盘会弹出一会儿，然后关闭。这样做的目的是使搜索具有预测性，因此，在键入名称时，它将根据数据库中的名称列出关闭的对象。有什么想法吗？

class ContactsPage extends StatefulWidget {
  Widget appBarTitle = new Text("Contacts");
  Icon actionIcon = new Icon(Icons.search);

Answer 1

我已通过预测搜索更新了代码，并删除了未使用的代码。

import 'package:flutter/material.dart';

class Contact {
  final String fullName;

  const Contact({this.fullName});
}

void main() => runApp(MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ContactsPage(),
    ));

class ContactsPage extends StatefulWidget {
  Widget appBarTitle = new Text("Contacts");
  Icon actionIcon = new Icon(Icons.search);
  final List<Contact> contacts = [
    Contact(
      fullName: 'Ganesh',
    ),
    Contact(
      fullName: 'Dinesh',
    ),
    Contact(
      fullName: 'Somesh',
    ),
    Contact(
      fullName: 'Ramesh',
    )
  ];

  @override
  State<StatefulWidget> createState() {
    return new _ContactPage(contacts);
  }
}

class _ContactPage extends State<ContactsPage> {
  List<Contact> filteredContacts;

  _ContactPage(this.filteredContacts);

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
          appBar: new AppBar(
            title: widget.appBarTitle,
            actions: <Widget>[
              new IconButton(
                icon: widget.actionIcon,
                onPressed: () {
                  setState(() {
                    if (widget.actionIcon.icon == Icons.search) {
                      widget.actionIcon = new Icon(Icons.close);
                      widget.appBarTitle = new TextField(
                        style: new TextStyle(
                          color: Colors.white,
                        ),
                        decoration: new InputDecoration(
                            prefixIcon:
                                new Icon(Icons.search, color: Colors.white),
                            hintText: "Search...",
                            hintStyle: new TextStyle(color: Colors.white)),
                        onChanged: (value) {
                          filterContacts(value);
                        },
                      );
                    } else {
                      widget.actionIcon =
                          new Icon(Icons.search); //reset to initial state
                      widget.appBarTitle = new Text("Contacts");
                      filteredContacts = widget.contacts;
                    }
                  });
                },
              ),
            ],
          ),
          body: new ContactList(filteredContacts)),
      // replace the body with your contacts list view
    );
  }

  void filterContacts(String value) {
    var temp = widget.contacts.where((contact) {
      return contact.fullName.contains(value);
    }).toList();
    setState(() {
      filteredContacts = temp;
    });
  }
}

class ContactList extends StatelessWidget {
  final List<Contact> _contacts;

  ContactList(this._contacts);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemBuilder: (context, index) {
          return new _ContactListItem(this._contacts[index]);
        },
        itemCount: this._contacts.length,
        padding: new EdgeInsets.symmetric(vertical: 8.0));
  }
}

class _ContactListItem extends ListTile {
  _ContactListItem(Contact contact)
      : super(
            title: new Text(contact.fullName),
            leading: new CircleAvatar(child: new Text(contact.fullName[0])));
}

请参阅屏幕截图：

无法搜索联系人

1 个答案: