在警告对话框中未显示颤振开关动画

Question

我有一个带有开关的警报对话框。如果我按下开关，布尔值就会像我想要的那样改变(我设置了它，所以主页的背景颜色会根据bool值改变)，但是开关动画不会注册，直到我关闭警报对话框并重新打开它。我试着把它包装在一个statfulbuilder就像我在另一个帖子看到的，但在这种情况下，动画工作，但bool不改变。我试图在整个应用程序中共享这个bool值，所以我使用共享偏好。

这里是完整的代码

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage();
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool bulb = false;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: bulb ? Colors.white : Colors.blue,
appBar: AppBar(actions: <Widget>[
IconButton(
icon: Icon(Icons.settings),
onPressed: () {
showDialog(
context: context,
builder: (ctx) => AlertDialog(
content: Column(children: [
Switch(
value: bulb,
onChanged: (bool isChecked) async {
final prefs = await SharedPreferences.getInstance();
setState(() {
bulb = isChecked;
prefs.setBool('bulb', isChecked);
});
},
),
StatefulBuilder(builder:
(BuildContext context, StateSetter setState) {
return Column(children: [
Switch(
value: bulb,
onChanged: (bool isChecked) async {
final prefs =
await SharedPreferences.getInstance();
setState(() {
bulb = isChecked;
prefs.setBool('bulb', isChecked);
});
},
),
]);
})
])));
})
]),
body: Center(),
);
}
}

解决方案:

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage();
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool bulb = false;
Future openDialog() => showDialog(
context: context,
builder: (context) => StatefulBuilder(
builder: (context, setState) => AlertDialog(
content: Column(children: [
Switch(
value: bulb,
onChanged: (bool isChecked) async {
final prefs = await SharedPreferences.getInstance();
setState(() {
bulb = isChecked;
prefs.setBool('bulb', isChecked);
});
},
),
ElevatedButton(
onPressed: () => Navigator.of(context).pop(),
child: Text("Save")),
]))));
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: bulb ? Colors.white : Colors.blue,
appBar: AppBar(actions: <Widget>[
IconButton(
icon: Icon(Icons.settings),
onPressed: () async {
await openDialog();
setState(() {});
}),
]),
body: Center(),
);
}
}

Answer 1

您必须使用StatefulBuilder本身。

现在，当你在对话框内调用setState时，只有对话框内的状态在改变。屏幕的状态保持不变。这就是为什么开关改变动画发生，但bulb值在屏幕上没有改变。

解决方法是，当开关的值发生变化时，您也可以使用回调函数在屏幕中调用setState。