Question

所以我正在关注一个教程，我想在联系人列表页面的顶部添加一个搜索栏，但是我似乎无法使搜索栏甚至出现在我的应用程序中。我最初可以使搜索栏在我的代码中正常工作，但是它不会像使用过的那样显示出来。我敢肯定它将与结构有关，但是任何建议都将是很棒的，我似乎无法正确地做到这一点。

Answer 1

我们不需要_SearchBar类。我们必须合并AppBar和_SearchBar中的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());
  }

搜索栏已添加到联系人列表

1 个答案: