Question

我在ListView中有带有RaisedButton的ListTile作为结尾，我想更改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标志，该标志保持点击状态。单击时将其设置为true，如果已经为true，则将其设置为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);
              })
        ]));
  }
}

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

1 个答案: