flutter，Switch小部件在showDialog中无法正常工作

Question

我找到了this site，然后运行了代码。该示例代码运行良好。此代码在这里。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _State createState() => _State();
}

class _State extends State<MyApp> {
  bool isSwitched = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Flutter - tutorialkart.com'),
        ),
        body: Center(
          child: Switch(
            value: isSwitched,
            onChanged: (value) {
              setState(() {
                isSwitched = value;
                print(isSwitched);
              });
            },
            activeTrackColor: Colors.lightGreenAccent,
            activeColor: Colors.green,
          ),
        )
    );
  }
}

固定在ShowDialog内的开关小部件。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _State createState() => _State();
}

class _State extends State<MyApp> {
  bool isSwitched = false;

  @override
  Widget build(BuildContext context) {

    return Scaffold(
        body: Center(
          child: RaisedButton(onPressed: () {
            var ret = showDialog(
              context: context,
              builder: (BuildContext context) {
                return AlertDialog(

                  content: Container(

                    height: MediaQuery.of(context).size.height / 3,
                    child: Center(
                      child: Switch(
                        value: isSwitched,
                        onChanged: (value) {
                          setState(() {
                            isSwitched = value;
                            print(isSwitched);
                          });
                        },
                        activeTrackColor: Colors.lightGreenAccent,
                        activeColor: Colors.green,
                      ),
                    ),
                  ),
                );
              },
            );
          },child: Text("show toggle button"),),
        ),
    );
  }
}

isSwitched变量未更改。

如果单独运行“开关小部件”，它将正常工作。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}
class MyApp extends StatefulWidget {
  @override
  _State createState() => _State();
}

class _State extends State<MyApp> {

  @override
  Widget build(BuildContext context) {

    return Scaffold(
        body: Center(
          child: RaisedButton(onPressed: () {
            showDialog(
              context: context,
              builder: (BuildContext context) {
                return AlertDialog(

                  content: Container(

                    height: MediaQuery.of(context).size.height / 3,
                    child: Center(
                      child: SwitchWidget(),
                    ),
                  ),
                );
              },
            );
          },child: Text("show toggle button"),),
        ),
    );
  }
}

class SwitchWidget extends StatefulWidget {
  @override
  _SwitchWidgetState createState() => _SwitchWidgetState();
}

class _SwitchWidgetState extends State<SwitchWidget> {
  bool isSwitched = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.transparent,
        body: Center(
          child: Switch(
            value: isSwitched,
            onChanged: (value) {
              setState(() {
                isSwitched = value;
                print(isSwitched);
              });
            },
            activeTrackColor: Colors.lightGreenAccent,
            activeColor: Colors.green,
          ),
        )
    );
  }
}

是否有一种方法可以将Switch Widget放到ShowDialog中而不将其分成另一个有状态的Widget？

Answer 1

您可以在下面复制粘贴运行完整代码您可以在StatefulBuilder的content属性中使用AlertDialog

代码段

 return AlertDialog(content: StatefulBuilder(
                    builder: (BuildContext context, StateSetter setState) {
                  return Container(

工作演示

完整代码

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _State createState() => _State();
}

class _State extends State<MyApp> {
  bool isSwitched = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          onPressed: () {
            var ret = showDialog(
              context: context,
              builder: (BuildContext context) {
                return AlertDialog(content: StatefulBuilder(
                    builder: (BuildContext context, StateSetter setState) {
                  return Container(
                    height: MediaQuery.of(context).size.height / 3,
                    child: Center(
                      child: Switch(
                        value: isSwitched,
                        onChanged: (value) {
                          setState(() {
                            isSwitched = value;
                            print(isSwitched);
                          });
                        },
                        activeTrackColor: Colors.lightGreenAccent,
                        activeColor: Colors.green,
                      ),
                    ),
                  );
                }));
              },
            );
          },
          child: Text("show toggle button"),
        ),
      ),
    );
  }
}

Answer 2

有很多方法可以实现，但是正确的方法是对所有AlertDialog使用单独的StateFul小部件，您可以检查与此主题here相关的其他答案。

另一方面，我建议您在只需要处理简单数据的情况下使用ValueNotifier，这非常简单，请尝试下一个：

class _State extends State<MyApp> {
  ValueNotifier<bool> _isSwitched = ValueNotifier(false);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          onPressed: () {
            var ret = showDialog(
              context: context,
              builder: (BuildContext context) {
                return AlertDialog(
                  content: Container(
                    height: MediaQuery.of(context).size.height / 3,
                    child: Center(
                      child: ValueListenableBuilder<bool>(
                          valueListenable: _isSwitched,
                          builder: (context, currentState, child) {
                            return Switch(
                              value: currentState,
                              onChanged: (value) {
                                _isSwitched.value = value;
                              },
                              activeTrackColor: Colors.lightGreenAccent,
                              activeColor: Colors.green,
                            );
                          }),
                    ),
                  ),
                );
              },
            );
          },
          child: Text("show toggle button"),
        ),
      ),
    );
  }
}

希望有帮助。