如何使 ListTile 中的按钮更改颜色和图标

Question

I have ListTile in the ListView with RaisedButton as trailing, I want to change color and icon on btn clicked, trouble is if I change it on setstate method all listTile buttons change. So how to determine each one?

  Widget _getList(BuildContext context,int index,) {
    return Card(
      elevation: 3,
      child: Column(
        children: <Widget>[
          ListTile(
            leading: Image.asset(
              "assets/" + _allDevices[index].image,
              fit: BoxFit.cover,
            ),
            title: Text(_allDevices[index].name),
            subtitle: Text(_allDevices[index].desc),
            trailing: SizedBox.fromSize(
                size: Size(56, 56), // button width and height
                child: ClipOval(
                  child: RaisedButton(
                    elevation: 2,
                    splashColor: Colors.red,
                    color: Colors.blue,
                    onPressed: () {
                      setState(() {
                          //pro should do something here... switch index or something....
                      });
                    },
                    child: Icon(Icons.lock_open),
                  ),
                )),
            onTap: () {},
          )
        ],
      ),
    );
  }

Answer 1

Find this sample, All needed is bool flag in the model class which maintains the click status. On click set it true, if it's already true then set it as false.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class Devices {
  String name = '';
  bool isSelected = false;

  Devices(this.name, this.isSelected);
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  MyWidgetState createState() => MyWidgetState();
}

class MyWidgetState extends State<MyWidget> {

  var _allDevices = [
    Devices('Text', false),
    Devices('Text', false),
    Devices('Text', false),
    Devices('Text', false)
  ];

  Widget _getList(BuildContext context, int index) {
    return Card(
      elevation: 3,
      child: Column(
        children: <Widget>[
          ListTile(
            leading: Text('Text'),
            title: Text(_allDevices[index].name),
            subtitle: Text(_allDevices[index].name),
            trailing: SizedBox.fromSize(
                size: Size(56, 56), // button width and height
                child: ClipOval(
                  child: RaisedButton(
                    elevation: 2,
                    color: _allDevices[index].isSelected
                        ? Colors.green
                        : Colors.blue,
                    onPressed: () {
                      setState(() {
                        if (_allDevices[index].isSelected) {
                          _allDevices[index].isSelected = false;
                        } else{
                          _allDevices[index].isSelected = true;
                        }
                      });
                    },
                    child: Icon(Icons.lock_open),
                  ),
                )),
            onTap: () {},
          )
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
          ListView.builder(
              shrinkWrap: true,
              itemCount: 4,
              itemBuilder: (context, index) {
                return _getList(context, index);
              })
        ]));
  }
}