我正在处理flutter listview.builder 我只想更改用户单击的Row 小部件中3 个项目的背景颜色，但它会更改listview 中所有项目的颜色。只想根据用户点击在特定索引处更改颜色。这是我的代码...
import 'dart:convert';
import 'package:dotted_border/dotted_border.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:fluttergyancare/ColorLoader3.dart';
import 'package:fluttergyancare/Models/AddAttendanceModel.dart';
import 'package:fluttergyancare/Models/serializers.dart';
import 'package:gradient_app_bar/gradient_app_bar.dart';
import 'package:http/http.dart' as http;
class AddAttendance extends StatelessWidget {
final String id;
final String section;
final String school;
final String Class;
AddAttendance({this.id, this.section, this.school, this.Class});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFFEEEEEE),
appBar: GradientAppBar(
title: Text('Normal'),
centerTitle: true,
backgroundColorStart: Color(0xFFFF9844),
backgroundColorEnd: Color(0xFFFD7267),
),
body: FutureBuilderUI(
id: id,
section: section,
school: section,
Class: Class,
),
);
}
}
Future<AddAttendanceModel> call(http.Client client, String id, String section,
String school, String Class) async {
var send =
await http.post("http://localhost/app/api/get_students", body: {
"teacher_id": "1",
"class_id": id,
"section": section,
"school_name": school,
"Class": Class,
});
return compute(parseJson, (send.body));
}
AddAttendanceModel parseJson(String json) {
final jsonStr = jsonDecode(json);
AddAttendanceModel article = standardSerializers.deserializeWith(
AddAttendanceModel.serializer, jsonStr);
return article;
}
class FutureBuilderUI extends StatelessWidget {
final String id;
final String section;
final String school;
final String Class;
FutureBuilderUI({this.id, this.section, this.school, this.Class});
@override
Widget build(BuildContext context) {
return FutureBuilder<AddAttendanceModel>(
future: call(http.Client(), id, section, school, Class),
builder: (context, snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none:
case ConnectionState.active:
case ConnectionState.waiting:
return Center(
child: ColorLoader3(
radius: 25.0,
dotRadius: 10.0,
),
);
case ConnectionState.done:
if (snapshot.hasError) print(snapshot.error);
print(snapshot.data.studentsInfo.length.toString() +
" StudentsInfo Length");
if (snapshot.data.studentsInfo.length != 0) {
return snapshot.hasData
? AddAttendanceUI(students: snapshot.data)
: Container();
} else {
return Container(
padding: EdgeInsets.all(10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Align(alignment: Alignment.center, child: Text("No..")),
],
),
);
}
}
return null;
// return ListView.builder(
// itemBuilder: (context, index) {
// return ListTile(
// title: Text(snapshot.data[index].status),
// );
// },
// );
},
);
}
}
class AddAttendanceUI extends StatefulWidget {
final AddAttendanceModel students;
AddAttendanceUI({this.students});
@override
_AddAttendanceUIState createState() => _AddAttendanceUIState();
}
class _AddAttendanceUIState extends State<AddAttendanceUI> {
var pColor = Colors.green;
var aColor = Colors.grey;
var nColor = Colors.grey;
int _onSelectedindex = 0;
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: widget.students.studentsInfo.length,
itemBuilder: (BuildContext context, int index) {
return Card(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(width: 10),
Spacer(),
Padding(
padding: const EdgeInsets.only(right: 10.0),
child: Row(
children: <Widget>[
GestureDetector(
child: pSelector(),
onTap: () {
print(index);
setState(() {
// final a = widget.students.studentsInfo
// .where((l) =>
// l.id ==
// widget.students.studentsInfo[index].id)
// .toList();
_onSelectedindex = index;
aColor = Colors.grey;
pColor = Colors.green;
nColor = Colors.grey;
});
},
),
SizedBox(width: 12),
GestureDetector(
onTap: () {
setState(() {
print(widget.students.studentsInfo[index].id);
aColor = Colors.red;
pColor = Colors.grey;
nColor = Colors.grey;
});
},
child: aSelector()),
SizedBox(width: 12),
GestureDetector(
child: nSelector(),
onTap: () {
setState(() {
print(widget.students.studentsInfo[index].id);
aColor = Colors.grey;
pColor = Colors.grey;
nColor = Colors.orange;
});
},
),
],
),
)
],
),
);
});
}
hello() {}
Widget pSelector() {
return Padding(
padding: const EdgeInsets.only(top: 5.0),
child: ClipOval(
child: Container(
color: pColor,
height: 30,
width: 30,
child: DottedBorder(
strokeWidth: 2.5,
borderType: BorderType.Circle,
color: Colors.white,
child: Center(
child: Text(
"A",
style: TextStyle(color: Colors.white),
),
),
),
),
),
);
}
Widget aSelector() {
return Padding(
padding: const EdgeInsets.only(top: 5.0),
child: ClipOval(
child: Container(
color: aColor,
height: 30,
width: 30,
child: DottedBorder(
strokeWidth: 2.5,
borderType: BorderType.Circle,
color: Colors.white,
child: Center(
child: Text(
"B",
style: TextStyle(color: Colors.white),
),
),
),
),
),
);
}
Widget nSelector() {
return Padding(
padding: const EdgeInsets.only(top: 5.0),
child: ClipOval(
child: Container(
color: nColor,
height: 30,
width: 30,
child: DottedBorder(
strokeWidth: 2.5,
borderType: BorderType.Circle,
color: Colors.white,
child: Center(
child: Text(
"C",
style: TextStyle(color: Colors.white),
),
),
),
),
),
);
}
}
我尝试将 streamBuilder 与列表视图中的每个项目附加但不工作。
我希望当用户仅在该索引颜色处点击 A/B/C 时，它应该会改变，但它会改变所有项目的颜色