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

Question

如何仅更新被点击的ListTile的颜色？

无论我尝试了什么，点击时它只会更改所有图块的颜色。
如何获取数据并更改颜色？

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

您已经走上了正确的轨道，但似乎您正在同一StatefulWidget中管理所有列表图块的状态。

取而代之的是，您只需要将它们分解，以便您的每个自定义ListTile都处于启用状态。数据的加载可以在您自己构建的ListTile的父组件中进行。

我将为您提供一个简短的示例应用程序。以下示例没有Firebase，但将这些更改应用于应用程序应该没有问题。

您只需要在父组件内部进行数据获取，然后将示例的score参数传递给MyListTile，就像下面示例中的标题一样。

它本身就是runnablbe，您只需将其复制到一个空的Flutter项目中:

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++;
        }),
      ),
    );
  }
}