更改特定行中 listView 中的图标

Question

我在 listView 中有 4 个图标。

当我按下第一个图标时，我希望第一个图标变为另一个图标。但是当我按下时，第四个图标也会改变。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'), 
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  List<String> litems = ["1", "0", "0", "1"];
  bool click = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: ListView.builder(
            shrinkWrap: true,
            itemCount: litems.length,
            itemBuilder: (BuildContext context, int index) {
              String value = litems[index];

              Widget icon;
              if (value == "1") {
                icon = Container(
                    height: 25,
                    width: 25,
                    child: IconButton(
                        iconSize: 15,
                        onPressed: () {
                          click = true;
                          setState(() {});
                        },
                        icon: click == true
                            ? Icon(Icons.cloud_upload,
                                color: Colors.green, size: 15)
                            : Icon(Icons.cloud_off,
                                color: Colors.red, size: 15)));
              } else {
                icon = Container(
                    height: 25,
                    width: 25,
                    child: IconButton(
                        iconSize: 15,
                        onPressed: () {},
                        icon: Icon(Icons.cloud_upload,
                            color: Colors.green, size: 15)));
              }
              return icon;
            }));
  }
}

如何只改变第一个图标？

Answer 1

您必须更改 litems 值：

     onPressed: () {
                    setState(() {
                      litems[index] = litems[index] == "0" ? "1" : "0";
                    });
                  },


              return Container(
                height: 25,
                width: 25,
                child: IconButton(
                  iconSize: 15,
                  onPressed: () {
                    setState(() {
                      litems[index] = litems[index] == "0" ? "1" : "0";
                    });
                  },
                  icon: value == "0"
                      ? Icon(Icons.cloud_upload, color: Colors.green, size: 15)
                      : Icon(Icons.cloud_off, color: Colors.red, size: 15),
                ),
              );

//               Widget icon;
//               if (value == "1") {
//                 icon = Container(
//                     height: 25,
//                     width: 25,
//                     child: IconButton(
//                         iconSize: 15,
//                         onPressed: () {
//                           click = true;
//                           setState(() {});
//                         },
//                         icon: click == true
//                             ? Icon(Icons.cloud_upload,
//                                 color: Colors.green, size: 15)
//                             : Icon(Icons.cloud_off,
//                                 color: Colors.red, size: 15)));
//               } else {
//                 icon = Container(
//                     height: 25,
//                     width: 25,
//                     child: IconButton(
//                         iconSize: 15,
//                         onPressed: () {},
//                         icon: Icon(Icons.cloud_upload,
//                             color: Colors.green, size: 15)));
//               }
//               return icon;

更改特定行中 listView 中的图标

Change icon in listView in specific row

icons

dart

flutter