0

我正在处理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),
                  ),
                ),
              ),
            ),
          ),
        );
      }
    }

见下图 image1 image2 image3

我尝试将 streamBuilder 与列表视图中的每个项目附加但不工作。

我希望当用户仅在该索引颜色处点击 A/B/C 时,它应该会改变,但它会改变所有项目的颜色

4

1 回答 1

0

您对所有项目使用相同的 3 个变量 pColor、aColor、nColor。您应该有这些变量的列表或映射,每个项目一个。或者创建一个单独的小部件以在该小部件内部处理这些变量。

于 2019-10-19T19:30:55.770 回答