flutter - 如何根据颤动中的ID从列表中获取项目？
问题描述
要求：
我使用创建了一个日期列表CheckboxlistTile，并且我希望当我选中任何复选框时button会显示，并且单击按钮 adialogue将显示用户可以在文本字段中添加时间的位置，然后单击对话框的提交按钮，textfield时间输入将转换为一个标签并将显示在checkbox.
这里我的屏幕在选中复选框之前看起来像
最初我设置了星期一复选框选中。
所以当我点击添加按钮（在复选框右侧）时，将显示此对话框
当我输入值并单击提交按钮后，标签将如下所示
问题：
问题是，当我检查星期二或任何其他复选框时，此标签显示在其列表中，而我没有选择星期二的时间或任何复选框，我想问题出在我传递给创建标签的列表中_timingTagListForToken
这是代码：
天数列表类
class CheckBoxListTileModelForToken {
int id;
String title;
bool isCheck;
CheckBoxListTileModelForToken({required this.id,required this.title, required this.isCheck});
static List<CheckBoxListTileModelForToken> getUsers() {
return <CheckBoxListTileModelForToken>[
CheckBoxListTileModelForToken(id:1,title: "Monday", isCheck: true,),
CheckBoxListTileModelForToken(id:2,title: "Tuesday", isCheck: false),
CheckBoxListTileModelForToken(id:3,title: "Wednesday", isCheck: false),
CheckBoxListTileModelForToken(id:4,title: "Thursday", isCheck: false),
CheckBoxListTileModelForToken(id:5,title: "Friday", isCheck: false),
CheckBoxListTileModelForToken(id:6,title: "Saturday", isCheck: false),
CheckBoxListTileModelForToken(id:7,title: "Sunday", isCheck: false),
];
}
}
我显示复选框的代码
customExpansionTile(context, "Token Distribution Time",
true,
Icon(Icons.timer, color: HexColor("#5344ed")),
<Widget>[
Container(
child: Row(
children: [
Expanded(
child: SizedBox(
height: MediaQuery.of(context).size.height * 0.45,
child: ListTile(
title: ListView.builder(
itemCount: checkBoxListTileModelForToken.length,
itemBuilder: (BuildContext context, int index) {
return new Card(
child: new Container(
padding: new EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
new CheckboxListTile(
controlAffinity:ListTileControlAffinity.leading,
activeColor: HexColor("#5344ed"),
dense: true,
title: new Text(
checkBoxListTileModelForToken[index].title,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
letterSpacing: 0.5),
),
value: checkBoxListTileModelForToken[index].isCheck? true:false,
secondary: Container(
alignment:Alignment.centerRight,
height: MediaQuery.of(context).size.height*0.9,
width: MediaQuery.of(context).size.width *0.2,
child:checkBoxListTileModelForToken[index].isCheck ==true?
IconButton(
tooltip:"Pick Time",
onPressed: () {
_tokenTimeDialogue(
checkBoxListTileModelForToken[index].id);
},
icon: Icon(Icons.add,color: HexColor("#5344ed"),)
)
: null),
onChanged: (bool? val) {
itemChangeforToken(val!, index);
}),
SizedBox10(),
Wrap(
direction:Axis.horizontal,
children:[
Container(
child:checkBoxListTileModelForToken[index].isCheck? Tags(
itemCount:_timingTagListForToken.length,
itemBuilder: (int index){
return ItemTags(
key: Key(index.toString()),
activeColor:HexColor("#5344ed"),
index: index,
title:_timingTagListForToken[index],
textStyle: TextStyle( fontSize: 14, ),
combine: ItemTagsCombine.withTextBefore,
removeButton: ItemTagsRemoveButton(
backgroundColor:HexColor("#5344ed"),
onRemoved: (){
setState(() {
_timingTagListForToken.removeAt(index);
});
return true;
},
),
onPressed: (item) => print(item),
onLongPressed: (item) => print(item),
);
},):Padding(
padding: const EdgeInsets.only(left: 70),
child:
Row(crossAxisAlignment: CrossAxisAlignment.center, children: []))
),
])]),
),
);
}),
))),
itemChangeforToken(bool val, int index) {
setState(() {
//id=checkBoxListTileModelForToken[index].id;
//print("id onchange "+ id.toString());
checkBoxListTileModelForToken[index].isCheck = val;
});
}
对话代码
_tokenTimeDialogue(dynamic id) {
AlertDialog alert = AlertDialog(
scrollable: true,
insetPadding: EdgeInsets.symmetric(vertical: 50),
title: Text("Add timing of the day",
style: TextStyle(fontWeight: FontWeight.bold, color: HexColor("#5344ed"))),
content: Container(
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(children: <Widget>[
textfieldforTimeDialogue(
context,
() async {
TimeOfDay? pickedTime = await showTimePicker(
initialTime: TimeOfDay.now(),
context: context,
builder:(context, child) {
return Theme(
data: Theme.of(context).copyWith(
colorScheme: ColorScheme.light(
primary: HexColor(
"#6610f2"), // header background color
onPrimary: Colors.black, // header text color
onSurface: Colors.black, // body text color
),
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(
primary: HexColor(
"#6610f2"), // button text color
),
),
),
child: child!,
);
},
);
if (pickedTime != null) {
setState(() {
fromTimeForToken.text = pickedTime.format(context);
});
} else {
print("Time is not selected");
}
},
Icons.timer_off,
fromTimeForToken,
"From",
"From",
),
SizedBox20(),
textfieldforTimeDialogue(
context,
() async {
FocusScope.of(context).unfocus();
TimeOfDay? pickedTime = await showTimePicker(
initialTime: TimeOfDay.now(),
context: context,
builder:(context, child) {
return Theme(
data: Theme.of(context).copyWith(
colorScheme: ColorScheme.light(
primary: HexColor(
"#6610f2"), // header background color
onPrimary: Colors.black, // header text color
onSurface: Colors.black, // body text color
),
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(
primary: HexColor(
"#6610f2"), // button text color
),
),
),
child: child!,
);
},
);
if (pickedTime != null) {
setState(() {
toTimeForToken.text = pickedTime.format(context);
});
} else {
print("Time is not selected");
}
},
Icons.timer_off,
toTimeForToken,
"To",
"To",
),
]),
)),
actions: [
TextButton(
onPressed: () {
setState(() {
fromTimeForToken.text="";
toTimeForToken.text="";
});
Navigator.pop(context);
},
child: Text(
"Submit",
style: TextStyle(
fontWeight: FontWeight.bold,
color: HexColor("#5344ed"),
fontSize: 20),
),
)
]);
showDialog(
context: context,
builder: (BuildContext context) {
return alert;
},
);
}
请帮助我做错了什么，我该怎么做？
解决方案
你是对的——你错误地处理了标签列表。对于每个星期一、星期二等，您都在循环浏览整个列表。
像这样的东西应该可以工作（我只更改了下面的第 2 行和第 3 行）
child:checkBoxListTileModelForToken[index].isCheck? Tags(
itemCount:_timingTagListForToken[index]==null?0:1, //show only a single tag for your option
itemBuilder: (int index2){ // here you must rename your variable, since we need access to index in the outer loop
return ItemTags(
key: Key(index.toString()),
activeColor:HexColor("#5344ed"),
index: index,
title:_timingTagListForToken[index],
textStyle: TextStyle( fontSize: 14, ),
combine: ItemTagsCombine.withTextBefore,
removeButton: ItemTagsRemoveButton(
backgroundColor:HexColor("#5344ed"),
onRemoved: (){
setState(() {
_timingTagListForToken.removeAt(index);
});
return true;
},
),
onPressed: (item) => print(item),
onLongPressed: (item) => print(item),
);
推荐阅读
- android - 无法读取 adbkit 中未定义的属性“管道”
- python - 如何仅裁剪 numpy 数组的一些值？
- javascript - 当我重构我的 JS 脚本时，我在 ubuntu 20.04 操作系统上使用 zendesk 代码库（使用“zat 主题预览”）时遇到问题
- jira - Jira 项目模板配置 json 文件文档在哪里？
- charts - 条形图chartjs的线性x轴
- css - FontAwesome 图标下载后不显示？（适用于 URL，不适用于 SRC）
- jquery - 如何使用 jquery 从数据表中检索单列值
- android - Android gradle appt 获取使用的详细 aapt 命令
- node.js - 如何在 bash 中将 JSON 转换为 TSV
- javascript - 时刻检查日期差异是否大于 X 个月