仅更新列表中点击的 ListTile 颜色

Question

How do I update the color of only the ListTile that is tapped?

Whatever I tried, it just changes the color of all tiles when tap. How can I retrieve the data and change the color?

class _DesignState extends State<Design> {
   var status=0;
  var score =0;
 Color getContainerColor() {
    if (status == 0) {
      return Colors.white;
    } else if (status == 1) {
      return Colors.green;
    } else {
      return Colors.red;
    }


  Widget _buildListItem(BuildContext context, DocumentSnapshot data) {
    final record = Record.fromSnapshot(data);
    final record1=  Firestore.instance.collection('creds').document('123').get().then((DocumentSnapshot ds) {
      var s =Record.fromSnapshot(ds);
      score= s.score;
    });

        child: ListTile(
          title: Text(record.name),
          trailing: Text(record.score.toString()),

          onTap: () { record.reference.updateData({'score': FieldValue.increment(score)}),
          setState(){
                status=1;

Answer 1

You're already on the right track, but it looks like you're managing the state of all of your list tile in the same StatefulWidget .

Instead you'll just need to split them up, so that every of your custom ListTile has it's on state. The loading of the data can happen in the parent component of your self build ListTile .

---

I'll provide you a short example application. The following example is without firebase, but it should be no problem to apply these changes to your application.

You'd simply have to do the data fetching inside the parent component and pass the score parameter of your example to MyListTile – just like the title in the example below.

This is runnablbe on it's own, you can simply copy it into a empty Flutter project:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            MyListTile(title: 'First'),
            MyListTile(title: 'Second'),
            MyListTile(title: 'Third'),
          ],
        ),
      ),
    );
  }
}

class MyListTile extends StatefulWidget {
  final String title;

  MyListTile({this.title});

  @override
  _MyListTileState createState() => _MyListTileState();
}

class _MyListTileState extends State<MyListTile> {
  int status = 0;

  get tileColor {
    switch(status) {
      case 0: {
        return Colors.white;
      }
      case 1: {
        return Colors.green;
      }
      default: {
        return Colors.red;
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: tileColor,
      child: ListTile(
        title: Text(widget.title),
        subtitle: Text('Status: $status'),
        onTap: () => setState(() {
          status++;
        }),
      ),
    );
  }
}