Flutter:用于 onClose 的 CupertinoPicker BottomSheet 监听器?
Flutter: CupertinoPicker BottomSheet listener for onClose?
我正在 Flutter Gallery 中查找与 CupertinoPicker 相关的代码。
相关代码摘录如下:
child: new GestureDetector(
// Blocks taps from propagating to the modal sheet and popping.
// onTap: () { },
child: new SafeArea(
child: new CupertinoPicker(
scrollController: scrollController,
itemExtent: _kPickerItemHeight,
backgroundColor: CupertinoColors.white,
onSelectedItemChanged: (int index) {
setState(() {
print(_selectedItemIndex);
_selectedItemIndex = index;
});
},
children: new List<Widget>.generate(coolColorNames.length, (int index) {
return new Center(child:
new Text(coolColorNames[index]),
);
}),
),
),
),
现在,当 CupertinoPicker 关闭时,我需要一个回调/侦听器,换句话说,当用户做出选择并且他的选择是最终的时,我需要知道他的最终选择是什么。
这里的用例是我想在 bottomsheet 关闭时根据他的最终选择进行 api 回调。
目前,我只能在用户旋转选择器时获取值,因为只有 onSelectedItemChanged 的回调。请参阅下面的 gif。
我看到 BottomSheet 小部件有一个 onClosing 回调:https://docs.flutter.io/flutter/material/BottomSheet-class.html
但我对如何获取它的实例感到困惑,因为 Flutter Gallery 示例正在使用以下代码调用 bottomsheet,并且没有从代码中获取 bottomsheet 的方法:
new GestureDetector(
onTap: () async {
await showModalBottomSheet<void>(
context: context,
builder: (BuildContext context) {
return _buildBottomPicker();
},
);
},
child: _buildMenu(),
),
有谁知道如何获得回调监听器?
编辑——基于 Remi 的解决方案,我在 onTap 回调中添加了 Navigator.of(context).pop(value) 代码。但是,CupertinoPicker 不是持久性的,因此如果用户触摸选择器外部,选择器将自行关闭并返回空值:
Widget _buildBottomPicker() {
final FixedExtentScrollController scrollController =
new FixedExtentScrollController(initialItem: _selectedItemIndex);
return new Container(
height: _kPickerSheetHeight,
color: CupertinoColors.white,
child: new DefaultTextStyle(
style: const TextStyle(
color: CupertinoColors.black,
fontSize: 22.0,
),
child: new GestureDetector(
// Blocks taps from propagating to the modal sheet and popping.
onTap: () { Navigator.of(context).pop(_selectedItemIndex);},
child: new SafeArea(
child: new CupertinoPicker(
scrollController: scrollController,
itemExtent: _kPickerItemHeight,
backgroundColor: CupertinoColors.white,
onSelectedItemChanged: (int index) {
setState(() {
// print(_selectedItemIndex);
// Navigator.of(context).pop(index);
_selectedItemIndex = index;
});
},
children: new List<Widget>.generate(coolColorNames.length, (int index) {
return new Center(child:
new Text(coolColorNames[index]),
);
}),
),
),
),
),
);
}
其实比你想的简单多了。
showDialog
及其对应项(包括 showModalBottomSheet
) returns 包含结果的 Future
。因此,您可以执行以下操作:
final selectedId = await showModalBottomSheet<int>(...);
唯一的要求是当弹出 modal/dialog/route/whatever 时,您 Navigator.of(context).pop(value)
发送该值。
正如前面的回答所说,需要的值以Future的形式返回给你。虽然这是真的,但我并不明白如何实施它。就我而言,我想在同一屏幕上按类别列表过滤待办事项列表。因此,通过使用 onSelectedItemChanged 返回的 int 键,我能够像这样进行过滤...
Widget _buildCategoryPicker(BuildContext context, _todoBloc) {
final FixedExtentScrollController scrollController =
FixedExtentScrollController(initialItem: _selectedIndex);
return GestureDetector(
onTap: () async {
await showCupertinoModalPopup<String>(
context: context,
builder: (BuildContext context) {
return _buildBottomPicker(
CupertinoPicker(
(...)
onSelectedItemChanged: (int index) {
setState(() => _selectedIndex = index);
},
children: (...),
), // CupertinoPicker
);
},
); // await showCupertinoModalPopup
// Filters the todoList.
_todoBloc.filter.add(categories[_selectedIndex]);
},
child: _buildMenu(
...
),
);
}
您不需要在您的 showCupertinoModalPopup 或类似的东西上设置最终...
final selectedId = await showCupertinoModalPopup<String>(...);
像这样:
future.whenComplete(() => requestRefresh());
showModalBottomSheet(
context: context,
builder: (_) {
return GestureDetector(
onTap: () => Navigator.of(context).pop(), // closing showModalBottomSheet
child: FlutterLogo(size: 200),
);
},
);
我正在 Flutter Gallery 中查找与 CupertinoPicker 相关的代码。
相关代码摘录如下:
child: new GestureDetector(
// Blocks taps from propagating to the modal sheet and popping.
// onTap: () { },
child: new SafeArea(
child: new CupertinoPicker(
scrollController: scrollController,
itemExtent: _kPickerItemHeight,
backgroundColor: CupertinoColors.white,
onSelectedItemChanged: (int index) {
setState(() {
print(_selectedItemIndex);
_selectedItemIndex = index;
});
},
children: new List<Widget>.generate(coolColorNames.length, (int index) {
return new Center(child:
new Text(coolColorNames[index]),
);
}),
),
),
),
现在,当 CupertinoPicker 关闭时,我需要一个回调/侦听器,换句话说,当用户做出选择并且他的选择是最终的时,我需要知道他的最终选择是什么。
这里的用例是我想在 bottomsheet 关闭时根据他的最终选择进行 api 回调。
目前,我只能在用户旋转选择器时获取值,因为只有 onSelectedItemChanged 的回调。请参阅下面的 gif。
我看到 BottomSheet 小部件有一个 onClosing 回调:https://docs.flutter.io/flutter/material/BottomSheet-class.html
但我对如何获取它的实例感到困惑,因为 Flutter Gallery 示例正在使用以下代码调用 bottomsheet,并且没有从代码中获取 bottomsheet 的方法:
new GestureDetector(
onTap: () async {
await showModalBottomSheet<void>(
context: context,
builder: (BuildContext context) {
return _buildBottomPicker();
},
);
},
child: _buildMenu(),
),
有谁知道如何获得回调监听器?
编辑——基于 Remi 的解决方案,我在 onTap 回调中添加了 Navigator.of(context).pop(value) 代码。但是,CupertinoPicker 不是持久性的,因此如果用户触摸选择器外部,选择器将自行关闭并返回空值:
Widget _buildBottomPicker() {
final FixedExtentScrollController scrollController =
new FixedExtentScrollController(initialItem: _selectedItemIndex);
return new Container(
height: _kPickerSheetHeight,
color: CupertinoColors.white,
child: new DefaultTextStyle(
style: const TextStyle(
color: CupertinoColors.black,
fontSize: 22.0,
),
child: new GestureDetector(
// Blocks taps from propagating to the modal sheet and popping.
onTap: () { Navigator.of(context).pop(_selectedItemIndex);},
child: new SafeArea(
child: new CupertinoPicker(
scrollController: scrollController,
itemExtent: _kPickerItemHeight,
backgroundColor: CupertinoColors.white,
onSelectedItemChanged: (int index) {
setState(() {
// print(_selectedItemIndex);
// Navigator.of(context).pop(index);
_selectedItemIndex = index;
});
},
children: new List<Widget>.generate(coolColorNames.length, (int index) {
return new Center(child:
new Text(coolColorNames[index]),
);
}),
),
),
),
),
);
}
其实比你想的简单多了。
showDialog
及其对应项(包括 showModalBottomSheet
) returns 包含结果的 Future
。因此,您可以执行以下操作:
final selectedId = await showModalBottomSheet<int>(...);
唯一的要求是当弹出 modal/dialog/route/whatever 时,您 Navigator.of(context).pop(value)
发送该值。
正如前面的回答所说,需要的值以Future的形式返回给你。虽然这是真的,但我并不明白如何实施它。就我而言,我想在同一屏幕上按类别列表过滤待办事项列表。因此,通过使用 onSelectedItemChanged 返回的 int 键,我能够像这样进行过滤...
Widget _buildCategoryPicker(BuildContext context, _todoBloc) {
final FixedExtentScrollController scrollController =
FixedExtentScrollController(initialItem: _selectedIndex);
return GestureDetector(
onTap: () async {
await showCupertinoModalPopup<String>(
context: context,
builder: (BuildContext context) {
return _buildBottomPicker(
CupertinoPicker(
(...)
onSelectedItemChanged: (int index) {
setState(() => _selectedIndex = index);
},
children: (...),
), // CupertinoPicker
);
},
); // await showCupertinoModalPopup
// Filters the todoList.
_todoBloc.filter.add(categories[_selectedIndex]);
},
child: _buildMenu(
...
),
);
}
您不需要在您的 showCupertinoModalPopup 或类似的东西上设置最终...
final selectedId = await showCupertinoModalPopup<String>(...);
像这样:
future.whenComplete(() => requestRefresh());
showModalBottomSheet(
context: context,
builder: (_) {
return GestureDetector(
onTap: () => Navigator.of(context).pop(), // closing showModalBottomSheet
child: FlutterLogo(size: 200),
);
},
);