颤抖，开关小部件在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变量未更改。

如果单独运行Switch Widget，它将正常工作。

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

您可以在下面复制粘贴运行完整代码
您可以在{ "Logging": { "LogLevel": { "Default": "Trace", "Microsoft": "Warning", "Microsoft.Hosting.Lifetime": "Information" } } } 的{​​{1}}属性中使用StatefulBuilder

代码段

content

工作演示

完整代码

AlertDialog

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

希望有帮助。