我在Flutter中得到了异常效果,我不确定这是我的代码还是Flutter中的错误。
我正在尝试创建一个FormField对象,该对象是一个可以具有三个值的复选框:空,选中正或选中负。到目前为止,这是我的代码:
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Checkbox Test',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new Form(child: MyHomePage(title: 'Checkbox Test')),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<String> _savedList = [];
@override
Widget build(BuildContext context) {
ThemeData themeData = Theme.of(context);
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new CheckboxFormField(
title: "Option 1",
saved: _savedList,
themeData: themeData,
),
new CheckboxFormField(
title: "Option 2",
saved: _savedList,
themeData: themeData,
),
new CheckboxFormField(
title: "Option 3",
saved: _savedList,
themeData: themeData,
),
],
),
),
floatingActionButton: new FloatingActionButton(
onPressed: () {Form.of(context).reset();},
tooltip: 'Reset',
child: new Icon(Icons.refresh),
),
);
}
}
class CheckboxFormField extends FormField<dynamic> {
CheckboxFormField({
Key key,
bool checkState,
bool initialValue = false,
Color activeColor,
String title,
List<String> saved,
ThemeData themeData,
}) : super(
key: key,
initialValue: initialValue,
builder: (FormFieldState<dynamic> field) {
void onChange() {
if (field.value == false) {
activeColor = Colors.green;
print(activeColor);
checkState = true;
field.didChange(true);
saved.add(title);
print(saved);
} else if (field.value == true) {
activeColor = Colors.red;
print(activeColor);
checkState = null;
field.didChange(null);
saved.remove(title);
saved.add("Not " + title);
print(saved);
} else {
activeColor = themeData.textTheme.subhead.color;
checkState = false;
field.didChange(false);
saved.remove("Not " + title);
print(saved);
}
}
return Checkbox(
tristate: true,
value: field.value,
activeColor: activeColor,
onChanged: (value) => onChange());
});
}
现在,在首次启动该应用程序时,它可以很好地工作,并且完全符合预期,每次单击都会循环显示相应的颜色并将适当的值添加到列表中。
如果重置窗体,则会出现问题:从功能角度来说,它保持正常工作,但颜色更改停止工作。该复选框恢复为主题的基础togglableActiveColor
,因此尽管我的函数仍使用empty box -> positive check -> negative check -> repeat
进行了旋转,但设置为true或null时,复选框颜色变为togglableActiveColor
,并且{{1 }}为假。
我知道代码会随着复选框的适当更改而继续起作用,并且保存的列表会继续适当地添加和删除,只是颜色会停止变化。这是引擎故障还是我的代码中缺少某些内容?
谢谢
Bry
编辑:继续进行进一步研究,似乎在unselectedWidgetColor
的重建过程中,Form.of(context).reset
属性以某种方式丢失了,而其他所有内容都保留了下来。也许这是设计使然,有什么想法吗?