如何根据颤动中的id从列表中获取项目？
How to get the items from list according to id in flutter?
要求：
我使用 CheckboxlistTile 创建了一个天数列表，我希望当我选中任何复选框时 button 将显示，单击按钮 dialogue 将显示在用户可以访问的位置在文本字段中添加时间，然后单击对话的提交按钮，textfield 时间输入将转换为标签并显示在 checkbox.
下方
这里是选中复选框之前我的屏幕的样子
最初我选中了星期一复选框。
所以当我点击添加按钮（在复选框的右边）时，这个对话框会显示
当我输入值并单击提交按钮后，标签将如下所示
问题：
问题是，当我选中星期二或任何其他复选框时，此标签显示在其列表中，而我没有选择星期二或任何复选框的时间，我想问题出在我传递给的列表中创建标签 _timingTagListForToken
代码如下：
天数列表class
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),
);
要求：
我使用 CheckboxlistTile 创建了一个天数列表，我希望当我选中任何复选框时 button 将显示，单击按钮 dialogue 将显示在用户可以访问的位置在文本字段中添加时间，然后单击对话的提交按钮，textfield 时间输入将转换为标签并显示在 checkbox.
这里是选中复选框之前我的屏幕的样子
最初我选中了星期一复选框。
所以当我点击添加按钮（在复选框的右边）时，这个对话框会显示
当我输入值并单击提交按钮后，标签将如下所示
问题：
问题是，当我选中星期二或任何其他复选框时，此标签显示在其列表中，而我没有选择星期二或任何复选框的时间，我想问题出在我传递给的列表中创建标签 _timingTagListForToken
代码如下：
天数列表class
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),
);