Question

因此，我正在按照本教程https://medium.com/@XensS/flutter-v-material-design-ii-7b0196e7b42d进行操作，并且尝试使之类似于联系人列表，您可以在其中单击联系人，然后将您带到包含所有人员信息的另一个屏幕。但是我只是被卡住了，我不确定如何添加交互性，因此当您单击联系人时，它将带您到个人页面。到目前为止，这是我的代码。显示联系人列表和搜索栏的代码：

导入“ 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 ContactList(kContacts)),

    );
  }
}

class ContactPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("Contacts"),
        ),
        body: new ContactList(kContacts));
  }
}


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

  ContactList(this._contacts);

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

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

这是存储所有联系信息的代码：

class Contact {
  final String fullName;

  const Contact({this.fullName});
}


const kContacts = const <Contact>[
  const Contact(
      fullName: 'Joey Trib',

  ),
  const Contact(
      fullName: 'Johnny Boy',

  )
];

Answer 1

解决方案位于您参考的教程的存储库中

List<_ContactListItem> _buildContactList() {
return _contacts.map((contact) =>
                      new _ContactListItem(
                        contact: contact,
                        onTap: () { _showContactPage(context, contact); }
                      ))
                .toList();
}

void _showContactPage(BuildContext context, Contact contact) {
Navigator.push(context, new MaterialPageRoute<Null>(
  settings: const RouteSettings(name: ContactPage.routeName),
  builder: (BuildContext context) => new ContactPage(contact)
));
}

}

来源：

https://github.com/fabiomsr/Flutter-StepByStep/blob/master/step5/lib/module/contacts/contact_list_view.dart#L110

如何使联系人列表互动？

1 个答案: