flutter - 我怎样才能使这个单选 flutter ？

Question

我有一个应用程序，该应用程序具有带有响应按钮的列表 View 。当用户单击任何一个爱图标，然后用红色填充时，我想这样做。
enter image description here
enter image description here
像这张图片一样，问题是当我单击该爱图标之一时，所有图标都变成了红色，但是我只想更改被选中的图标的爱的颜色。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool like;
  @override
  List<String> user = ['Dipto', 'Dipankar', "Sajib", 'Shanto', 'Pranto'];
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ListView Demu'),
      ),
      body: Center(
          child: Container(
        child: ListView.builder(
          itemCount: user.length,
          itemBuilder: (context, index) {
            return Container(
              padding: EdgeInsets.all(10),
              height: 50,
              width: MediaQuery.of(context).size.width * 0.8,
              color: Colors.yellowAccent,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    user[index],
                  ),
                  Positioned(
                    child: IconButton(
                      icon: _iconControl(like),
                      onPressed: () {
                        if (like == false) {
                          setState(() {
                            like = true;
                            _iconControl(like);
                          });
                        } else {
                          setState(() {
                            like = false;
                            _iconControl(like);
                          });
                        }
                      },
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      )),
    );
  }

  _iconControl(bool like) {
    if (like == false) {
      return Icon(Icons.favorite_border);
    } else {
      return Icon(
        Icons.favorite,
        color: Colors.red,
      );
    }
  }
}

我也尝试使用参数，但是失败了:

 child: IconButton(
                  icon: _iconControl(true),
                  onPressed: () {
                    if (false) {
                      setState(() {
                        _iconControl(true);
                      });
                    } else {
                      setState(() {
                        _iconControl(false);
                      });
                    }
                  },
                ),

你能帮我吗。提前致谢

Answer 1

您可以创建一个模态类来管理列表的选择
只需创建一个模态类并添加一个 bool(boolean) 变量以保持选择使用。 bool(boolean) 变量
样本代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool like;
  List<Modal> userList = List<Modal>();

  @override
  void initState() {
    userList.add(Modal(name: 'Dipto', isSelected: false));
    userList.add(Modal(name: 'Dipankar', isSelected: false));
    userList.add(Modal(name: 'Sajib', isSelected: false));
    userList.add(Modal(name: 'Shanto', isSelected: false));
    userList.add(Modal(name: 'Pranto', isSelected: false));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ListView Demu'),
      ),
      body: Center(
          child: Container(
            child: ListView.builder(
              itemCount: userList.length,
              itemBuilder: (context, index) {
                return Container(
                  padding: EdgeInsets.all(10),
                  height: 50,
                  width: MediaQuery
                      .of(context)
                      .size
                      .width * 0.8,
                  color: Colors.yellowAccent,
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        userList[index].name,
                      ),
                      Positioned(
                        child: IconButton(
                          icon: _iconControl( userList[index].isSelected),
                          onPressed: () {
                            setState(() {
                              userList.forEach((element) {
                                element.isSelected = false;
                              });

                              userList[index].isSelected = true;
                            });
                          },
                        ),
                      ),
                    ],
                  ),
                );
              },
            ),
          )),
    );
  }

  _iconControl(bool like) {
    if (like == false) {
      return Icon(Icons.favorite_border);
    } else {
      return Icon(
        Icons.favorite,
        color: Colors.red,
      );
    }
  }
}

class Modal {
  String name;
  bool isSelected;

  Modal({this.name, this.isSelected = false});
}