我在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
,当它为false时,复选框颜色变为 unselectedWidgetColor
.
我知道代码仍在工作,因为复选框会相应更改,并且保存的列表会继续相应地附加和删除,只是颜色停止表现 . 这是引擎中的故障还是我在代码中遗漏了什么?
谢谢
布里
编辑:继续进一步研究它似乎在 Form.of(context).reset
重建时, activeColor
属性以某种方式丢失,而其他一切都被保留 . 也许这是设计,任何想法?