flutter - 添加到联系人列表的搜索栏

Question

所以我正在学习一个教程，我想在联系人列表页面的顶部添加一个搜索栏，但是我似乎无法让搜索栏显示在我的应用程序中。我最初能够让搜索栏在我的代码中正常工作，但它不会像以前那样显示出来。我确定它与结构有关，但任何建议都很好，我似乎无法正确处理。

Answer 1

我们不需要 _SearchBar 类。我们必须合并 _SearchBar 和 ContactsPage 的 AppBar。我们必须将 ContactsPage 设置为 Stateful，它将状态变量作为

 Icon actionIcon
 Widget appBarTitle

更新代码:

  import 'package:flutter/material.dart';

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

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

  class _ContactPage extends State<ContactsPage> {
    @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) {
                            print(value);
                            //filter your contact list based on value
                          },
                        );
                      } else {
                        widget.actionIcon =
                            new Icon(Icons.search); //reset to initial state
                        widget.appBarTitle = new Text("Contacts");
                      }
                    });
                  },
                ),
              ],
            ),
            body: new Text("contact list")),
            // replace the body with your contacts list view
      );
    }
  }

  void main() {
    runApp(new ContactsPage());
  }