颤振开关-onChanged不变

时间:2018-09-07 12:34:39

标签: dart switch-statement flutter

使用以下Switch小部件时,isOn值始终返回true,并且从不更改。

Switch也仅在滑动上移动位置,轻按不会移动它。如何解决?

bool isInstructionView = false;

Switch(
    value: isInstructionView,
    onChanged: (bool isOn) {
      setState(() {
        isInstructionView = isOn;
        print(isInstructionView);
      });
    },
    activeColor: Colors.blue,
    inactiveTrackColor: Colors.grey,
    inactiveThumbColor: Colors.grey,
)

更新:为了更加清楚,onChanged始终将isOn作为true返回。为什么会这样?

7 个答案:

答案 0 :(得分:3)

这是我的切换按钮代码

B

答案 1 :(得分:2)

您只需要确保在Widget构建外部声明开关切换的布尔值即可使其全局且可用于SetState方法。无需初始化等。

    class ExampleClass extends StatefulWidget {
     @override
     _ExampleClassState createState() => _ExampleClassState();
    }

    class _ExampleClassState extends State<ExampleClass> {

     bool isInstructionView = false;

     @override
     Widget build(BuildContext context) {

      return Container(
       child:  Switch(
       value: isInstructionView,
       onChanged: (isOn) {

         setState(() {
           isInstructionView = isOn
         });

         print(isInstructionView);

        },
        ...
      ),
     );
    }
   }

答案 2 :(得分:1)

class Tab_b extends StatefulWidget {

bool isInstructionView = false;
@override
State<StatefulWidget> createState() => new _TabsPageState();
}

class _TabsPageState extends State<Tab_b>{

@override
Widget build(BuildContext context) {

return Scaffold(
    appBar: new AppBar(
    title: new Text("add data"),
),
body: new Container(
  child:  Switch(
    value: widget.isInstructionView,
    onChanged: (bool isOn) {
      print(isOn);
      setState(() {
        widget.isInstructionView = isOn;
        print(widget.isInstructionView);
      });
    },
    activeColor: Colors.blue,
    inactiveTrackColor: Colors.grey,
    inactiveThumbColor: Colors.grey,
  ),
),
);
}

答案 3 :(得分:1)

我根据@Zulfiqar的答案添加了其他代码块。我没有测试此代码,但我在项目中使用了类似的代码。如果要保存它并在另一个类中使用,或者要在每次加载时显示最新状态,则可以将状态保存在全局变量中,并在加载类时调用它。希望对您有帮助。

class Tab_b extends StatefulWidget {

  @override
  State<StatefulWidget> createState() => new _TabsPageState();
}

class _TabsPageState extends State<Tab_b>{
  bool isInstructionView;
  @override
  void initState() {
    isInstructionView = Global.shared.isInstructionView;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text("add data"),
      ),
      body: new Container(
        child:  Switch(
          value: isInstructionView,
          onChanged: (bool isOn) {
            print(isOn);
            setState(() {
             isInstructionView = isOn;
             Global.shared.isInstructionView = isOn;
             isOn =!isOn;
              print(isInstructionView);
            });
          },
          activeColor: Colors.blue,
          inactiveTrackColor: Colors.grey,
          inactiveThumbColor: Colors.grey,
        ),
      ),
    );
  }
}
class Global{
  static final shared =Global();
  bool isInstructionView = false;
}

答案 4 :(得分:0)

状态更改时,您需要重新构建窗口小部件。请参阅文档 https://docs.flutter.io/flutter/material/Switch/onChanged.html

答案 5 :(得分:0)

在实施CupertinoSwitch时,我也遇到了同样的问题。我能够将其打开,但无法将其关闭。

根据this的示例,我试图将Switch放入名为“语义”的小部件中,并神奇地开始工作。

下面是代码:

body: Column(
    children: <Widget>[
      SizedBox(height: 50.0,),
      Semantics(
        container: true,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            CupertinoSwitch(
              value: _switchValue,
              onChanged: (bool value){
                setState(() {
                  _switchValue = value;
                  _animating = value;
                });
              },
            ),

            Text(
              "${_switchValue ? "On" : "Off"}",
              style: TextStyle(fontSize: 20.0,
                              fontWeight: FontWeight.bold),
            ),
          ],  
        ),
        ),
        SizedBox(
          height: 50.0,
        ),
        Visibility(
            child: CupertinoActivityIndicator(
            animating: _animating,
            radius: 30.0,
          ),
          visible: _animating,
        ),
    ],

  ),

希望有帮助。

答案 6 :(得分:0)

为了让 Switch 工作,move the setState(() {}) outside of Switch in a callback function .

// Switch  Widget
    Switch( value: _toggleState,
            onChanged: _attemptChange,
            ),
    
//Callback
 void _attemptChange(bool newState) {
    setState(() {
      _toggleState = newState;
      newState ? _switchCase = 'ON' : _switchCase = 'OFF';
    });
相关问题