Slider 小部件在模态底部表中禁用

Question

我正在尝试在具有 slider 的模态底板内构建一个表单。 但是，无论我做什么，slider 都保持禁用状态。

我的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中的 setState 传递，但这并没有改变任何东西

在此处观看视频： https://youtu.be/uSg5YC0vFkI

Answer 1

添加 SingleChildScrollView(),

返回 SingleChildScrollView()

Answer 2

它没有改变，因为productData在构建方法中，并且每次它都获得以前的 state。

使用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;
                        });
                      },