设想
我正在尝试创建一个具有两个屏幕的 Flutter 应用程序:ContactsScreen
和EditContactScreen
. 在ContactsScreen
中,用户将看到一个DropdownButton
和Text
。DropdownButton
保存Contact
通过 api 获取的对象列表。每当用户从 中选择一个Contact
时DropdownButton
,该Text
对象将显示有关该特定联系人的信息。此外,在Contact
选择时,RaisedButton
将出现一个,单击它时,将引导用户到EditContactScreen
编辑选定的Contact
。我正在使用 BloC 模式。我创建了两个 BloC,每个屏幕一个:ContactsScreenBloc
和EditContactScreenBloc
. ContactsScreenBloc
持有 aStream<Contact>
和 aSink<Contact>
用于管理选定的Contact
. 而EditContactScreenBloc
持有流和汇Contact
字段。最后,我有一个GlobalBloc
包含Contact
s 的列表。是GlobalBloc
一个InheritedWidget
包裹MaterialApp
. 该应用程序过于简单,并且是较大应用程序的一部分,因此,我无法合并ContactsScreenBloc
and EditContactScreenBloc
,并且应该有一个GlobalBloc
具有Contact
s 列表的应用程序。
问题
我实际上对 Flutter 还很陌生,所以我不确定我的方法是否合理。如果是,那么当用户导航到EditContactScreen
并成功更新 时Contact
,我如何将其反映在所Contact
选中ContactsScreen
?
代码片段
联系人.dart
class Contact {
final String id;
final String firstName;
final String lastName;
final String phoneNumber;
Contact({this.id, this.firstName, this.lastName, this.phoneNumber});
Contact.fromJson(Map<String, dynamic> parsedJson)
: id = parsedJson['id'],
firstName = parsedJson['firstName'],
lastName = parsedJson['lastName'],
phoneNumber = parsedJson['phoneNumber'];
copyWith({String firstName, String lastName, String phoneNumber}) => Contact(
id: id,
firstName: firstName ?? this.firstName,
lastName: lastName ?? this.lastName,
phoneNumber: phoneNumber ?? this.phoneNumber
);
@override
bool operator ==(other) => other.id == this.id;
@override
int get hashCode => id.hashCode;
}
全局.bloc.dart
class GlobalBloc {
final _repo = Repo();
final _contacts = BehaviorSubject<List<Contact>>(seedValue: []);
Stream<List<Contact>> get contacts => _contacts.stream;
Function(List<Contact>) get updateContacts => _contacts.sink.add;
Future refreshContacts() async{
final contacts = await _repo.getContacts();
updateContacts(contacts);
}
}
Contacts_screen.bloc.dart
class ContactsScreenBloc {
final _selectedContact = BehaviorSubject<Contact>(seedValue: null);
Stream<Contact> get selectedContact => _selectedContact.stream;
Function(Contact) get changeSelectedContact => _selectedContact.sink.add;
}
edit_contacts_screen.bloc.dart
class ContactsScreenBloc {
final _selectedContact = BehaviorSubject<Contact>(seedValue: null);
Stream<Contact> get selectedContact => _selectedContact.stream;
Function(Contact) get changeSelectedContact => _selectedContact.sink.add;
}
global.provider.dart
class GlobalProvider extends InheritedWidget {
final bloc = GlobalBloc();
static GlobalBloc of(BuildContext context) => (context.inheritFromWidgetOfExactType(GlobalProvider) as GlobalProvider).bloc;
bool updateShouldNotify(_) => true;
}
联系人.screen.dart
class ContactsScreen extends StatelessWidget {
final bloc = ContactsScreenBloc();
@override
Widget build(BuildContext context) {
final globalBloc = GlobalProvider.of(context);
return Column(
children: <Widget>[
StreamBuilder<List<Contact>>(
stream: globalBloc.contacts,
builder: (context, listSnapshot) {
return StreamBuilder<Contact>(
stream: bloc.selectedContact,
builder: (context, itemSnapshot) {
return DropdownButton<Contact>(
items: listSnapshot.data
?.map(
(contact) => DropdownMenuItem<Contact>(
value: contact,
child: Text(contact.firstName + ' ' + contact.lastName),
),
)
?.toList(),
onChanged: bloc.changeSelectedContact,
hint: Text('Choose a contact.'),
value: itemSnapshot.hasData ? itemSnapshot.data : null,
);
},
);
},
), // end for DropdownButton StreamBuilder
StreamBuilder<Contact>(
stream: bloc.selectedContact,
builder: (context, snapshot) {
return snapshot.hasData
? Row(children: <Widget>[
Text(snapshot.data.firstName + ' ' + snapshot.data.lastName + ' ' + snapshot.data.phoneNumber),
FlatButton(
child: Text('Edit Contact'),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) =>
EditContactScreen(contact: snapshot.data)));
},
),
],
)
: null;
}, // End for text description
)
],
);
}
}
edit_contact.screen.dart
class EditContactScreen extends StatelessWidget {
final bloc = EditContactScreenBloc();
final Contact contact;
EditContactScreen({this.contact});
@override
Widget build(BuildContext context) {
final globalBloc = GlobalProvider.of(context);
return Column(
children: <Widget>[
TextField(onChanged: (firstName) => bloc.updateContact(contact.copyWith(firstName: firstName))),
TextField(onChanged: (lastName) => bloc.updateContact(contact.copyWith(firstName: lastName))),
TextField(onChanged: (phoneNumber) => bloc.updateContact(contact.copyWith(firstName: phoneNumber))),
RaisedButton(child: Text('Update'), onPressed: () async {
await bloc.update();
await globalBloc.refreshContacts();
Navigator.of(context).pop();
},)
],
);
}
}