Mam aplikacje, które posiadają listView z przyciskiem reakcyjnym w trzepotanie. Chcę to zrobić, gdy użytkownik kliknął dowolną ikonę miłości, to jest wypełnione czerwonym kolorem.

wprowadź opis obrazu tutaj

Wprowadź opis obrazu tutaj Podobnie jak ten obraz, ale problem polega na tym, kiedy kliknąłem jedną z tej ikony miłości, wszystkie ikony zamieniły się w kolor czerwony, ale chcę zmienić kolor miłości ikony, którą jest wybrany.

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

Spróbuję również za pomocą parametru, ale tak nie powiodło się:

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

Czy możesz mi pomóc. Z góry dziękuję

0
Dipankar Dedbnath 20 lipiec 2020, 10:37

1 odpowiedź

Najlepsza odpowiedź

Możesz utworzyć klasę modalną do zarządzania wyborem listy

Wystarczy utworzyć klasę modalną i dodać zmienną boolowską, aby zachować wybór używając. ta zmienna boolowska

PRZYKŁADOWY KOD

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});
}
1
AskNilesh 20 lipiec 2020, 07:47