我想使LIstTile
像checkbox
一样,但是问题是当我单击其中的一个时,它们全部都是selected
。
children: <Widget>[
new Expanded(
child:FutureBuilder<List<Workers>>(
future: fetchWorkers(http.Client()),
builder: (context, snapshot) {
if (snapshot.hasError) print(snapshot.error);
return snapshot.hasData
? WorkerList(workers: snapshot.data)
: Center(child: CircularProgressIndicator());
},
),),
这是我从json获取值并将其显示给我的ListTile
Future<List<Workers>> fetchWorkers(http.Client client) async {
final response = await http.post(app_configuration.getUrl() + 'api/Worker/getAll/');
return compute(parseWorkers, response.body);
}
static List<Workers> parseWorkers(String responseBody) {
final parsed = json.decode(responseBody).cast<Map<String, dynamic>>();
return parsed.map<Workers>((json) => Workers.fromJson(json)).toList();
}
这是我的Workers
class Workers {
final String UserId;
final String Fullname;
Workers(
{
this.UserId,
this.Fullname
});
factory Workers.fromJson(Map<String, dynamic> json) {
return Workers(
UserId: json['UserId'] as String,
Fullname: json['Fullname'] as String,
);
}
}
class WorkerList extends StatefulWidget {
@override
_WorkerListState createState() => new _WorkerListState();
final List<Workers> workers;
WorkerList({Key key, @required this.workers}) : super(key: key);
}
class _WorkerListState extends State<WorkerList> {
var isSelected = false;
var mycolor=Colors.white;
@override
Widget build(BuildContext context) {
return ListView.builder(
physics: ClampingScrollPhysics(),
shrinkWrap: true,
itemCount: widget.workers.length,
itemBuilder: (context, index) {
return Column(
children: <Widget>[
Card(
child: new ListTile(
selected: isSelected,
leading: const Icon(Icons.info),
title: new Text(widget.workers[index].Fullname),
subtitle: new Text(widget.workers[index].UserId),
onTap: toggleSelection // what should I put here,
),),
],
);
},
);
}
void toggleSelection() {
setState(() {
if (isSelected) {
mycolor=Colors.blue;
isSelected = false;
} else {
mycolor=Colors.grey[300];
isSelected = true;
}
});
}
}
这是屏幕截图
我该如何解决?我想念什么吗?
答案 0 :(得分:1)
您可以执行以下操作:
在您的bool
类中添加一个Workers
class Workers {
final String UserId;
final String Fullname;
bool isSelected=false;//the initializtion is mandatory
Workers(
{
this.UserId,
this.Fullname
});
factory Workers.fromJson(Map<String, dynamic> json) {
return Workers(
UserId: json['UserId'] as String,
Fullname: json['Fullname'] as String,
);
}
}
,然后在_WorkerListState
中像这样修复ListView
:
@override
Widget build(BuildContext context) {
return ListView.builder(
physics: ClampingScrollPhysics(),
shrinkWrap: true,
itemCount: widget.workers.length,
itemBuilder: (context, index) {
return Column(
children: <Widget>[
Card(
child: new ListTile(
selected: widget.workers[index].isSelected,
leading: const Icon(Icons.info),
title: new Text(widget.workers[index].Fullname),
subtitle: new Text(widget.workers[index].UserId),
onTap: (){
//this will select the deselected item
//and will deselect the selected item
setState(() {
widget.workers[index].isSelected != widget.workers[index].isSelected
});
}
),),
],
);
},
);
}