在模式底部工作表中禁用滑块小部件

Question

我正试图在带有滑块的模式底部表单中构建一个表单。但是，无论我做什么，滑块都会保持禁用状态。

我的showModalBottomSheet呼叫：

void getForm(BuildContext context) async {
final data = await showModalBottomSheet<Map<String, dynamic>?>(
constraints: BoxConstraints.tight(const Size.square(400)),
context: context,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8),
topRight: Radius.circular(8),
),
),
builder: (context) {
return StatefulBuilder(builder: (context, setState) {
return Padding(
padding: const EdgeInsets.all(10.0),
child: ResearchInput(setState),
);
});
},
);

我的表单代码：

class ResearchInput extends StatefulWidget {
const ResearchInput(this.setFunction, {Key? key}) : super(key: key);
static const String routeName = '/research-input';
final Function(void Function()) setFunction;
@override
_ResearchInputState createState() => _ResearchInputState();
}
class _ResearchInputState extends State<ResearchInput> {
final _formKey = GlobalKey<FormState>();
final _ebayPattern = RegExp(
r'^(https?://)?(www.)?ebay.com/itm/d+$',
);
final _trendsPattern = RegExp(
r'^(https?://)?trends.google.com/trends/explore?geo=US&q=(.*)$',
);
@override
Widget build(BuildContext context) {
Map<String, dynamic> productData = {
'date': DateTime.now(),
'variations': 0.0,
};
return Form(
key: _formKey,
child: Center(
child: SizedBox(
width: 500,
child: SingleChildScrollView(
child: Column(
children: <Widget>[
//TextFields
Row(
children: [
const Text('Variations'),
Slider(
key: const ValueKey('variations'),
value: 0,
onChanged: (value) {
setState(() {
productData['variations'] = value;
});
},
min: 0,
max: 4,
divisions: 4,
label: "${productData['variations']}",
),
],
),
//other TextFields             

我尝试过使用StatefulBuilder中的pass-through setState，但这不会改变

请参阅此处的视频：https://youtu.be/uSg5YC0vFkI

Answer 1

它不会改变，因为productData在构建方法内部，每次它都会得到以前的状态。

使用initState

late Map<String, dynamic> productData;
@override
void initState() {
productData = {
'date': DateTime.now(),
'variations': 0.0,
};
super.initState();
}

并重命名StatfulBuilder的setstate以避免混淆，并使用它来更新对话框UI。

return StatefulBuilder(
builder: (context, setStateSB) {
//...
onChanged: (value) {
setStateSB(() {
productData['variations'] = value;
});
},

Answer 2

添加SingleChildScrollView((，

return SingleChildScrollView((