list - 如何使用 checkboxListTile 设置选定项目的值
问题描述
Setstate 的 checkboxListTile 获得切换按钮和附加值的正确方法是什么?
我想要的是当您选中该框时,您会看到选中按钮。然后将价值添加到基本价格中。请帮助。
CheckboxListTile(
activeColor: Colors.blue,
dense: true,
//font change
title: new Text(
listTopping[i].price.toStringAsFixed(0) +
' บาท',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
value: listTopping[i].isCheck,
secondary: Container(
height: 50,
width: 300,
child: Text(
listTopping[i].topping,
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
),
onChanged: (bool? val) {
itemChange(val!, i);
},
),
这是我认为是错误的 setstate ......
void itemChange(bool val, int i) {
setState(() {
listTopping[i].isCheck = val;
});
}
}
解决方案
这是您的代码的一个小示例。由于您没有提供AddonTopping
课程,因此我为自己创建了一个简单的版本。您可以尝试一下并在您的MaterialApp
. 一切都应该按预期工作。
class AddonTopping {
AddonTopping({
required this.id,
required this.topping,
required this.isCheck,
required this.price,
});
final int id;
final String topping;
bool isCheck;
final int price;
}
class Americano extends StatefulWidget {
@override
_AmericanoState createState() => _AmericanoState();
}
class _AmericanoState extends State<Americano> {
List<AddonTopping> listTopping = [
AddonTopping(
id: 8,
topping: 'Whipcream',
price: 0,
isCheck: true,
),
AddonTopping(
id: 9,
topping: 'Javachip',
price: 30,
isCheck: false,
),
AddonTopping(
id: 10,
topping: 'SoyMilk',
price: 20,
isCheck: false,
),
AddonTopping(
id: 11,
topping: 'ExtraSyrup',
price: 30,
isCheck: false,
),
];
@override
Widget build(BuildContext context) {
return Column(
children: [
Text('SUM: ${calculatePrice()}'),
ListView.builder(
shrinkWrap: true,
itemCount: listTopping.length,
itemBuilder: (context, i) => CheckboxListTile(
activeColor: Colors.blue,
dense: true,
//font change
title: Text(
listTopping[i].price.toStringAsFixed(0),
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
value: listTopping[i].isCheck,
secondary: Container(
height: 50,
width: 300,
child: Text(
listTopping[i].topping,
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
),
onChanged: (bool? val) {
itemChange(val!, i);
},
),
),
],
);
}
void itemChange(bool val, int i) {
setState(() {
listTopping[i].isCheck = val;
});
}
double calculatePrice() {
if (listTopping.isNotEmpty) {
double _price = 0.0;
// Get those toppings that are chosen (`isCheck` is true)
final chosenTopping = listTopping.where((element) => element.isCheck);
// Calculate the sum
for (final AddonTopping item in chosenTopping) {
if (item.isCheck) {
_price += item.price;
}
}
return _price;
}
return 0.00;
}
}
推荐阅读
- python - 为什么 Pycharm 在重构时会自动重命名 Jupyter notebook 中的某些方法,而其他方法则不会?
- docker - 使用 k6 docker 映像安装扩展的最佳方式?
- aws-lambda - EventBridge 消息是否总是进入 CloudWatch 日志?
- javascript - 单击按钮后程序两次进入 eventListener
- r - 如何根据字符串的匹配部分合并 R 中的两个数据框?
- java - 如何创建和初始化(在 Java 中)列表
在同一个声明中?(编者请注意:这*不*与列表相同 ) - matlab - 在 MATLAB 中验证 MPC 模型时出错
- python - pandas.read_sql 不返回所有记录
- javascript - CSS Flexbox 布局未按预期工作
- apache-nifi - NiFi ConsumeKafkaRecord 轮询的消息远远多于 max.poll.records