Flutter - 如何使用 BloC 实现下拉列表？

Question

我想在我的应用程序中添加一个包含“名称”的下拉列表，而不是像下面的代码中那样添加一个 TextField。 我如何使用 BloC 做到这一点？

class PersonPage extends StatefulWidget {

  PersonPage(this.person);
  final Person person;

  @override
  _PersonPageState createState() => _PersonPageState();
}

class Names{
  const Item(this.name);
  final String name;
}

class _PersonPageState extends State<PersonPage> {
  Item selectedUser;
  List<Item> names = <Names>[
   const Item('Thomas'),
   const Item('John'),
   const Item('Mary'),
   const Item('Lukas'),
  ];
 TextEditingController _nameController;

 final _bloc = PersonBloc();

 @override
 void initState() {

  _bloc.setPerson(widget.person);
  _nameController = TextEditingController(text: widget.person.name);

  super.initState();
 }
@override
void dispose() {
 _nameController.dispose();
 super.dispose();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("MyApp"),
    ),
    body: Container(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ListView(
          children: <Widget>[             
            Container(
              child: TextField(
                decoration: InputDecoration(labelText: "Name"),
                controller: _nameController,
                onChanged: _bloc.setName,
              ),
            ),
            Container(
              height: 20,
            ),              
            RaisedButton(
              child: Text("Save"),
              onPressed: () {
                if (_bloc.insertOrUpdate()) {
                  Navigator.pop(context);
                }
              },
            )
          ],
        ),
      ),
    ),
  );
}

谢谢。

Answer 1

我会给你一个例子，你尝试在你的代码中应用

class _PersonPageState extends State<PersonPage> {
  final _bloc = PersonBloc();

  @override
  void initState() {

    _bloc.setPerson(widget.person);
    _nameController = TextEditingController(text: widget.person.name);

   super.initState();
  }

  @override
  void dispose() {
    _nameController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("MyApp"),
    ),
    body: Container(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ListView(
          children: <Widget>[             
            StreamBuilder(
              stream: bloc.outName,
              builder: (context, snapshot) {
                if (!snapshot.hasData)
                  return Container();

                return DropdownButton(
                  hint: Text("Names"),
                  value: snapshot.data,
                  items: bloc.names.map((item) {
                    return DropdownMenuItem(
                      value: item,
                      child: Row(children: <Widget>[Text(item),]),
                    );
                  }).toList(),
                  onChanged: bloc.inName,
                );
              },
            ),
            Container(
              height: 20,
            ),              
            RaisedButton(
              child: Text("Save"),
              onPressed: () {
                if (_bloc.insertOrUpdate()) {
                  Navigator.pop(context);
                }
              },
            )
          ],
        ),
      ),
    ),
  );
}

将您的姓名列表更改为您的 BLoC，并创建名称 BehaviorSubject

PersonBloc{

  List<String> names = ['Thomas', 'John', 'Mary', 'Lukas'];

  final _name = BehaviorSubject<String>.seeded("");
  Stream<String> get outName  => _name.stream;
  Function(String) get inName => _name.sink.add;
  //TODO - Don't forget to dispose this _name

}

现在您的_name 具有选定的名称，要获取名称，您只需要这样做

Person.name = _name.stream.value;

这个例子可以改进，只是草稿