因此,我正在按照本教程https://medium.com/@XensS/flutter-v-material-design-ii-7b0196e7b42d进行操作,并且我正在尝试制作一些类似于联系人列表,您点击该联系人,它会将您带到另一个屏幕,其中包含所有人员信息。但我只是陷入困境,我不知道如何添加交互性,所以当你点击一个联系人时,它会带你到那里的个人页面。到目前为止这是我的代码。用于显示联系人列表和搜索栏的代码:
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 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',
)
];
解决方案是在您参考的教程的存储库中
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)
));
}
}
资源: