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

因此，我遵循一个教程，我想在联系人列表页面的顶部添加一个搜索栏，但我似乎无法让搜索栏显示在我的应用程序中。最初我能够让搜索栏在我的代码中独立工作，但它不会像以前那样显示。我相信这会和结构有关，但任何建议都是很好的，我只是觉得不太对劲

我们不需要

\u搜索栏

类。我们必须将

\u SearchBar

的

AppBar

和

ContactsPage

合并。我们必须将

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());
  }

导入“包装：颤振/材料.省道”；
类ContactsPage扩展StatefulWidget{
Widget appBarTitle=新文本（“联系人”）；
图标操作图标=新图标（Icons.search）；
@凌驾
状态createState（）{
返回新的联系人页面（）；
}
}
类_ContactPage扩展状态{
@凌驾
小部件构建（构建上下文）{
返回新材料PP(
家：新脚手架(
appBar：新的appBar(
标题：widget.appBarTitle，
行动：[
新图标按钮(
图标：widget.actionIcon，
已按下：（）{
设置状态（）{
if（widget.actionIcon.icon==Icons.search）{
widget.actionIcon=新图标（Icons.close）；
widget.appBarTitle=新文本字段(
样式：新文本样式(
颜色：颜色，白色，
),
装饰：新的输入装饰(
前缀：
新图标（Icons.search，颜色：Colors.white），
hintText:“搜索…”，
hintStyle:new TextStyle（颜色：Colors.white）），
一旦更改：（值）{
印刷品（价值）；
//根据值筛选联系人列表
},
);
}否则{
widget.actionIcon=
新图标（Icons.search）；//重置为初始状态
widget.appBarTitle=新文本（“联系人”）；
}
});
},
),
],
),
正文：新文本（“联系人列表”），
//用联系人列表视图替换正文
);
}
}
void main（）{
runApp（新联系人页面（））；
}

那么我如何合并到联系人页面？我将更新原始代码后