flutter - 将底部模态表提取到单独的小部件中会导致 BlocProvider 颤动
问题描述
首先,我希望您在这个全球范围内遭受重创的时期一切顺利。我正在重构我的屏幕代码的一部分,但我坚持这一点。我有一个底部模式表,我将其提取到一个单独的文件中,以保持我的MapScreen
UI 代码简洁明了,但出现了问题。我得到的错误是BlocProvider.of() called with a context that does not contain a Bloc of type TrackingBloc.
我必须在单独的文件中声明一个 BlocProvider 吗?它不会通过context:context
参数传递给小部件吗?然后我尝试添加它,但仍然得到错误。你能看出我做错了什么吗?一如既往,非常感谢您的时间和帮助,尤其是在这个非常困难的时期。
UI 模态底页:
showModalBottomSheet(
isScrollControlled: true,
context: context,
builder: (modal) {
// return AndroidTrackingSheet(routeName,
// isTracking, _textEditingController);
return Container(
color: Color(0xff757575),
child: SingleChildScrollView(
child: Container(
padding: EdgeInsets.only(
left: 20,
right: 20,
bottom: MediaQuery.of(modal)
.viewInsets
.bottom),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(20)),
),
child: Center(
child: Column(
// mainAxisAlignment:
// MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.stretch,
children: <Widget>[
SizedBox(
height: 10,
),
Text(
'Nuovo percorso',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 25,
color: Colors.orangeAccent,
fontWeight: FontWeight.w400,
),
),
SizedBox(
height: 10,
),
Text(
'Inserisci un nome per il tuo nuovo percorso, e scegli Inizia tracking. Quando sarai arrivato a destinazione premi di nuovo il bottone Tracking e scegli Fine tracking.',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18,
color: Colors.black,
fontWeight: FontWeight.w400),
),
SizedBox(
height: 10,
),
TextField(
controller:
_textEditingController,
autofocus: true,
textAlign: TextAlign.center,
showCursor: true,
decoration: InputDecoration(
hintText: isTracking
? routeName
: 'nome percorso',
labelStyle: TextStyle(
fontSize: 18,
color: Colors.black,
fontWeight:
FontWeight.w100),
border: OutlineInputBorder(),
// focusColor:
// Colors.lightGreenAccent,
focusedBorder:
OutlineInputBorder(
borderSide: BorderSide(
color: Colors.orange,
width: 1,
),
),
),
),
SizedBox(
height: 10,
),
FlatButton(
color: Colors.orangeAccent,
child: Text(
isTracking
? "Fine tracking"
: 'Inizia tracking',
style: TextStyle(
fontSize: 18,
color: Colors.white),
),
onPressed: () {
print(
"Action 2 is been clicked");
routeName =
_textEditingController.text;
Navigator.pop(context);
isTracking = !isTracking;
BlocProvider.of<TrackingBloc>(
context)
.add(StartStopTracking());
},
),
SizedBox(
height: 10,
),
FlatButton(
color: Colors.redAccent,
child: Text(
'Cancella',
style: TextStyle(
fontSize: 18,
color: Colors.white),
),
onPressed: () {
Navigator.pop(context);
},
),
SizedBox(
height: 10,
),
],
),
),
),
),
);
});
单独的小部件模式表:
class AndroidTrackingSheet extends StatelessWidget {
TextEditingController _textEditingController;
bool isTracking;
String routeName;
AndroidTrackingSheet(
this.routeName, this.isTracking, this._textEditingController);
@override
Widget build(BuildContext context) {
return Container(
color: Color(0xff757575),
child: SingleChildScrollView(
child: Container(
padding: EdgeInsets.only(
left: 20,
right: 20,
bottom: MediaQuery.of(context).viewInsets.bottom),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Center(
child: Column(
// mainAxisAlignment:
// MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
SizedBox(
height: 10,
),
Text(
'Nuovo percorso',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 25,
color: Colors.orangeAccent,
fontWeight: FontWeight.w400,
),
),
SizedBox(
height: 10,
),
Text(
'Inserisci un nome per il tuo nuovo percorso, e scegli Inizia tracking. Quando sarai arrivato a destinazione premi di nuovo il bottone Tracking e scegli Fine tracking.',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18,
color: Colors.black,
fontWeight: FontWeight.w400),
),
SizedBox(
height: 10,
),
TextField(
controller: _textEditingController,
autofocus: true,
textAlign: TextAlign.center,
showCursor: true,
decoration: InputDecoration(
hintText: isTracking ? routeName : 'nome percorso',
labelStyle: TextStyle(
fontSize: 18,
color: Colors.black,
fontWeight: FontWeight.w100),
border: OutlineInputBorder(),
// focusColor:
// Colors.lightGreenAccent,
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.orange,
width: 1,
),
),
),
),
SizedBox(
height: 10,
),
FlatButton(
color: Colors.orangeAccent,
child: Text(
isTracking ? "Fine tracking" : 'Inizia tracking',
style: TextStyle(fontSize: 18, color: Colors.white),
),
onPressed: () {
print("Action 2 is been clicked");
routeName = _textEditingController.text;
Navigator.pop(context);
isTracking = !isTracking;
BlocProvider.of<TrackingBloc>(context)
.add(StartStopTracking());
},
),
SizedBox(
height: 10,
),
FlatButton(
color: Colors.orangeAccent,
child: Text(
'Cancella',
style: TextStyle(fontSize: 18, color: Colors.white),
),
onPressed: () {
Navigator.pop(context);
},
),
SizedBox(
height: 10,
),
],
),
),
),
),
);
}
}
与块提供者分开底部表:
class AndroidTrackingBottomSheet extends StatelessWidget {
TextEditingController _textEditingController;
bool isTracking;
String routeName;
AndroidTrackingBottomSheet(
this.routeName, this.isTracking, this._textEditingController);
@override
Widget build(BuildContext context) {
return BlocProvider<TrackingBloc>(
create: (context) => TrackingBloc(),
child: Container(
color: Color(0xff757575),
child: SingleChildScrollView(
child: Container(
padding: EdgeInsets.only(
left: 20,
right: 20,
bottom: MediaQuery.of(context).viewInsets.bottom),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Center(
child: Column(
// mainAxisAlignment:
// MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
SizedBox(
height: 10,
),
Text(
'Nuovo percorso',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 25,
color: Colors.orangeAccent,
fontWeight: FontWeight.w400,
),
),
SizedBox(
height: 10,
),
Text(
'Inserisci un nome per il tuo nuovo percorso, e scegli Inizia tracking. Quando sarai arrivato a destinazione premi di nuovo il bottone Tracking e scegli Fine tracking.',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18,
color: Colors.black,
fontWeight: FontWeight.w400),
),
SizedBox(
height: 10,
),
TextField(
controller: _textEditingController,
autofocus: true,
textAlign: TextAlign.center,
showCursor: true,
decoration: InputDecoration(
hintText: isTracking ? routeName : 'nome percorso',
labelStyle: TextStyle(
fontSize: 18,
color: Colors.black,
fontWeight: FontWeight.w100),
border: OutlineInputBorder(),
// focusColor:
// Colors.lightGreenAccent,
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.orange,
width: 1,
),
),
),
),
SizedBox(
height: 10,
),
FlatButton(
color: Colors.orangeAccent,
child: Text(
isTracking ? "Fine tracking" : 'Inizia tracking',
style: TextStyle(fontSize: 18, color: Colors.white),
),
onPressed: () {
print("Action 2 is been clicked");
routeName = _textEditingController.text;
Navigator.pop(context);
isTracking = !isTracking;
BlocProvider.of<TrackingBloc>(context)
.add(StartStopTracking());
},
),
SizedBox(
height: 10,
),
FlatButton(
color: Colors.orangeAccent,
child: Text(
'Cancella',
style: TextStyle(fontSize: 18, color: Colors.white),
),
onPressed: () {
Navigator.pop(context);
},
),
SizedBox(
height: 10,
),
],
),
),
),
),
),
);
}
}
解决方案
我终于发现 Bloc 必须通过BlocProvider.value
而不是在小部件文件中提供给底部工作表,所以工作代码是:
showModalBottomSheet(
isScrollControlled: true,
context: context,
builder: (modal) {
return BlocProvider.value(
value: BlocProvider.of<TrackingBloc>(context),
child: AndroidTrackingBottomSheet(
widget.key,
routeName,
isTracking,
_textEditingController),
);
推荐阅读
- macos - 为什么 pyautogui 热键在 mac 上不起作用
- python - Pandas 高效构建路径
- angular - 如何将我的 styleFunc 的可点击属性值(在运行时)更改为 false,它赋予 agm-data-layer 元素的 style 属性?
- mysql - 如何创建可以将数据库迁移到另一个规范化数据库的脚本
- php - 如何修复响应中的前置标记
- laravel - 当表是动态的时将数据插入到相关模型中
- laravel - 动态全局变量
- c - 在 C 中处理文件中的库存数据时数据打印不正确
- javascript - Internet Explorer 无法理解溢出 div 的坐标
- python - 显示线条的底部图像并使用Opencv剪切上部图像