flutter - Flutter:如何将值传递给有状态的小部件?
问题描述
我是 Flutter 新手,我可以轻松创建无状态小部件并在创建对象时需要设置值(@required this.value)
但是,我对如何使用有状态的小部件来做这件事有点迷茫。
查看下面的代码时,我希望能够从创建的对象中获取“提示”值,进入有状态的小部件构造函数,然后进入下拉菜单。我希望这是有道理的。
class MyDropdownButton extends StatefulWidget { MyDropdownButton({
this.hint, }); String hint; @override _MyDropdownButtonState createState() => _MyDropdownButtonState(); }
class _MyDropdownButtonState extends State<MyDropdownButton> { String dropdownValue; String hint;
@override Widget build(BuildContext context) {
return Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'TO',
style: TextStyle(color: kColourGreyText),
),
DropdownButton<String>(
value: dropdownValue != null ? dropdownValue : null,
hint: Text(hint),
icon: Icon(Icons.arrow_downward),
iconSize: 24,
elevation: 16,
style: TextStyle(color: kColourGreyText),
underline: Container(
height: 2,
color: kColorPrimary,
),
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items:
accountNameList.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
],
),
); } }
解决方案
发现您的代码存在多个问题,
class MyDropdownButton extends StatefulWidget {
MyDropdownButton({@required this.hint}); // use @required for required parameters, like this one here
final String hint; // use final
@override
_MyDropdownButtonState createState() => _MyDropdownButtonState();
}
// below line you missed `<MyDropdownButton>` after `State`,
// I'd suggest using a recommended IDE with a recommended Flutter
// Extention to generate code samples
class _MyDropdownButtonState extends State<MyDropdownButton> {
String dropdownValue;
// I added below 3 lines to avoid the errors in this sample code
List<String> accountNameList = [];
Color kColorPrimary = Colors.blue;
Color kColourGreyText = Colors.grey;
@override
Widget build(BuildContext context) {
// You don't need `Expanded` here, just wrap it with `Row` only
return Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('TO', style: TextStyle(color: kColourGreyText)),
DropdownButton(
value: dropdownValue != null ? dropdownValue : null,
// when accessing parsed values in Statful,
// use widget.<variable name>
hint: Text(widget.hint),
icon: Icon(Icons.arrow_downward),
iconSize: 24,
elevation: 16,
style: TextStyle(color: kColourGreyText),
underline: Container(height: 2, color: kColorPrimary),
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: accountNameList.map((String value) {
return DropdownMenuItem(value: value, child: Text(value));
}).toList(),
),
],
);
}
}
再一次,我建议使用推荐的 IDE 和推荐的 Flutter 扩展来生成代码示例
推荐阅读
- symfony - Symfony 4 - Webpack-encore 使用 FosJsRouting:路由未定义
- postman - 如何从使用“setNextRequest”创建 ID 的 POST 请求中按 ID 调用下一个 GET 请求
- r - 将时间序列数据除以每年的第一个值
- flutter - 在中心对齐列,但在 Flutter 中将文本对齐到屏幕左侧
- sql-server - 合并与删除并插入选择
- python - 如何在 bitbucket 中查看 python 文件?
- dax - DAX:如何检查 A 列中的值在 B 列中是否有 2 个不同的值?
- javascript - 图片继续在浏览器中打开而不是运行点击事件
- php - 每个自定义帖子类型文件的自定义部分
- pointers - Ifort:指针属性上的 move_alloc(),intent(in) 触发错误