如何在 Flutter 中使用 Bloc 正确设置 DropdownButton 的值?
Posted
技术标签:
【中文标题】如何在 Flutter 中使用 Bloc 正确设置 DropdownButton 的值?【英文标题】:How to properly set value of DropdownButton using Bloc in Flutter? 【发布时间】:2019-05-20 01:14:36 【问题描述】:我是 Bloc 编程模式的新手,在使用 Dropdown 时遇到问题 那是在我的集体课上:
final _dropDown = BehaviorSubject<String>();
Stream<String> get dropDownStream => _dropDown.stream;
Sink<String> get dropDownSink => _dropDown.sink;
final _dropdownValues = BehaviorSubject<List<String>>(seedValue: [
'One',
'Two',
'Three',
'Four',
].toList());
Stream<List<String>> get dropdownValuesStream => _dropdownValues.stream;
在我的小部件页面中,我添加了以下下拉小部件,以便所有内容都由 Bloc 类处理:
StreamBuilder<List<String>>(
stream: _exampleBloc.dropdownValuesStream,
builder: (BuildContext contextValues, AsyncSnapshot snapshotValues)
return StreamBuilder<String>(
stream: _exampleBloc.dropDownStream,
builder: (BuildContext context, AsyncSnapshot snapshot)
return InputDecorator(
decoration: InputDecoration(
icon: const Icon(Icons.color_lens),
labelText: 'DropDown',
),
child: DropdownButtonHideUnderline(
child: DropdownButton<String>(
value: snapshot.data,
onChanged: (String newValue) => _exampleBloc.dropDownSink.add(newValue),
items: snapshotValues.data != null ? snapshotValues.data.map<DropdownMenuItem<String>>((String value)
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
).toList() : <String>[''].map<DropdownMenuItem<String>>((String value)
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
).toList(),
),
),
);
,
);
,
),
但是这样做,在设置 DropdownButton 的值(值:snapshot.data)时出现此错误:
I/flutter ( 5565): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter ( 5565): The following assertion was thrown building StreamBuilder<String>(dirty, state:
I/flutter ( 5565): _StreamBuilderBaseState<String, AsyncSnapshot<String>>#70482):
I/flutter ( 5565): 'package:flutter/src/material/dropdown.dart': Failed assertion: line 514 pos 15: 'items == null ||
I/flutter ( 5565): value == null || items.where((DropdownMenuItem<T> item) => item.value == value).length == 1': is not
I/flutter ( 5565): true.
I/flutter ( 5565):
I/flutter ( 5565): Either the assertion indicates an error in the framework itself, or we should provide substantially
I/flutter ( 5565): more information in this error message to help you determine and fix the underlying cause.
I/flutter ( 5565): In either case, please report this assertion by filing a bug on GitHub:
I/flutter ( 5565): https://github.com/flutter/flutter/issues/new?template=BUG.md
I/flutter ( 5565):
I/flutter ( 5565): When the exception was thrown, this was the stack:
I/flutter ( 5565): #2 new DropdownButton (package:flutter/src/material/dropdown.dart:514:15)
I/flutter ( 5565): #3 _ExamplePageState.build.<anonymous closure>.<anonymous closure>.<anonymous closure> (package:financeiro_mobile/src/ui/exemple/example_page.dart:129:42)
I/flutter ( 5565): #4 StreamBuilder.build (package:flutter/src/widgets/async.dart:423:74)
I/flutter ( 5565): #5 _StreamBuilderBaseState.build (package:flutter/src/widgets/async.dart:125:48)
I/flutter ( 5565): #6 StatefulElement.build (package:flutter/src/widgets/framework.dart:3809:27)
I/flutter ( 5565): #7 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3721:15)
I/flutter ( 5565): #8 Element.rebuild (package:flutter/src/widgets/framework.dart:3547:5)
I/flutter ( 5565): #9 StatefulElement.update (package:flutter/src/widgets/framework.dart:3878:5)
I/flutter ( 5565): #10 Element.updateChild (package:flutter/src/widgets/framework.dart:2742:15)
I/flutter ( 5565): #11 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3732:16)
I/flutter ( 5565): #12 Element.rebuild (package:flutter/src/widgets/framework.dart:3547:5)
I/flutter ( 5565): #13 BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2286:33)
I/flutter ( 5565): #14 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:676:20)
I/flutter ( 5565): #15 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:219:5)
I/flutter ( 5565): #16 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:990:15)
I/flutter ( 5565): #17 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:930:9)
I/flutter ( 5565): #18 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:842:5)
I/flutter ( 5565): #19 _invoke (dart:ui/hooks.dart:154:13)
I/flutter ( 5565): #20 _drawFrame (dart:ui/hooks.dart:143:3)
I/flutter ( 5565): (elided 2 frames from class _AssertionError)
我尝试了很多想法,例如在设置时检查 snapshotValues.data 是否不为空。我知道该值必须是列表中的某个值或 null。但是我放在那里的任何逻辑都没有使这个错误消失。 如果我将值设置为 null,它可以工作,但所选值不会显示。 我做错了吗?有更好的方法吗?我该如何解决这个问题? 谢谢!
【问题讨论】:
我也尝试使用 StreamBuilder 实现 Dropdown(即应用我认为很棒的 Bloc 模式),但我得到了完全相同的错误。在此期间你能以某种方式修复它吗? 【参考方案1】:我使用 bloc 中的两个流解决了它,一个用于 elemtns 列表,另一个用于值。因此,在构建中,您需要两个链式 StreamBuilder,当您获得两个包含数据的快照时,您将加载构建。像这样:
Widget _holdingDropDown()
return StreamBuilder(
stream: bloc.holding,
builder: (BuildContext context, AsyncSnapshot<Holding> snapshot)
return Container(
child: Center(
child: snapshot.hasData
? StreamBuilder(
stream: bloc.obsHoldingList,
builder: (BuildContext context,
AsyncSnapshot<List<Holding>> holdingListSnapshot)
return holdingListSnapshot.hasData ?
DropdownButton<Holding>(
value: snapshot.data,
items: _listDropDownHoldings,
onChanged: (Holding h)
_changeDropDownItemHolding(h);
,
): CircularProgressIndicator();
,
)
: CircularProgressIndicator(),
),
);
);
如果我没有包含数据的快照,我会使用循环进度指示器返回。 希望对您有所帮助。
【讨论】:
【参考方案2】:那是因为你使用的是 StreamBuilder,所以当你的快照第一次为空时,你必须做一个验证:
return snapshot.hasData ?
InputDecorator(
decoration: InputDecoration(
icon: const Icon(Icons.color_lens),
labelText: 'DropDown',
),
child: DropdownButtonHideUnderline(
child: DropdownButton<String>(
value: snapshot.data,
onChanged: (String newValue) => _exampleBloc.dropDownSink.add(newValue),
items: snapshotValues.data != null ? snapshotValues.data.map<DropdownMenuItem<String>>((String value)
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
).toList() : SizedBox(height: 0.0)
),
) : SizedBox(height: 0.0);
显示一个空的小部件SizedBox(height: 0.0)
或CircleProgressIndicator
【讨论】:
这样做时我仍然会遇到同样的错误,即使我在 snapshotValues 上做同样的事情 我更新了我的代码,如果错误仍然存在,请在这里写下错误所在的行。以上是关于如何在 Flutter 中使用 Bloc 正确设置 DropdownButton 的值?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 flutter_bloc 添加 CircularProgressIndicator
Bloc 模式是不是适合在 Flutter 应用中管理导航?
MultiBlocProvider 未实例化所有 bloc 提供程序 - 如何正确使用 MultiBlocProvider?