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

Question

我在 ListView 中有 ListTile，RaisedButton 作为尾随，我想在点击 btn 时更改颜色和图标，问题是如果我在 setstate 方法上更改它，所有 listTile 按钮都会更改。那么如何确定每一个呢？

  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

找到这个示例，所有需要的是模型类中的bool 标志，它维护点击状态。点击设置为真，如果已经为真则设置为假。

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);
              })
        ]));
  }
}