Question

我在使用底表中的开关时遇到了一些问题。当我点击它时，它不会更改其状态。状态只有第一次才正确更改。

这是我正在使用的简单代码：

  bool _switchValue = false;

  @override
  Widget build(BuildContext context)
  {
    return new Scaffold(
      body: Center(
        child: RaisedButton(
          child: const Text('SHOW BOTTOM SHEET'),
          onPressed: () {
            showModalBottomSheet<void>(context: context, builder: (BuildContext context) {
              return Container(
                child: CupertinoSwitch(
                  value: _switchValue,
                  onChanged: (bool value) {
                    setState(() {
                      _switchValue = value;
                    });
                  },
                )
              );
            });
          }
        )
      )
    );
  }

有人可以帮助我吗？

Answer 1

您需要将开关置于其自己的StatefulWidget中，并使用回调将值返回给主类。底部工作表使用了不同的上下文，因此在上面的示例中调用setState无效。

class _MyHomePageState extends State<MyHomePage> {
  bool _switchValue = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: RaisedButton(
            child: const Text('SHOW BOTTOM SHEET'),
            onPressed: () {
              showModalBottomSheet<void>(
                context: context,
                builder: (BuildContext context) {
                  return BottomSheetSwitch(
                    switchValue: _switchValue,
                    valueChanged: (value) {
                      _switchValue = value;
                    },
                  );
                },
              );
            },
          ),
        ),
      ),
    );
  }
}

class BottomSheetSwitch extends StatefulWidget {
  BottomSheetSwitch({@required this.switchValue, @required this.valueChanged});

  final bool switchValue;
  final ValueChanged valueChanged;

  @override
  _BottomSheetSwitch createState() => _BottomSheetSwitch();
}

class _BottomSheetSwitch extends State<BottomSheetSwitch> {
  bool _switchValue;

  @override
  void initState() {
    _switchValue = widget.switchValue;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: CupertinoSwitch(
          value: _switchValue,
          onChanged: (bool value) {
            setState(() {
              _switchValue = value;
              widget.valueChanged(value);
            });
          }),
    );
  }
}

Answer 2

使用 StatefulBuilder 更改BottomSheet内部开关的状态

    showModalBottomSheet(
     context: context, builder: (BuildContext context) {  
      return Container(  
       child: StatefulBuilder(  
        builder: (BuildContext context, StateSetter stateSetter) {  
         return CupertinoSwitch(  
           value: _switchValue,  
           onChanged: (val) {  
             stateSetter(() => _switchValue = val); 
           },);  
         },  
       ),  
      )  
   });

在底页中切换时不会更改Flutter上的状态

2 个答案: