如何使用 onPressed 为选择的收藏图标选择单个颤振 ListTiles？

Posted 2023-02-23

【中文标题】如何使用 onPressed 为选择的收藏图标选择单个颤振 ListTiles？

【英文标题】：How do I select individual flutter ListTiles for a select favorite icon with onPressed?

【发布时间】：2020-05-28 08:33:17

【问题描述】：

这是我无法添加用户收藏列表的整个代码。我只是想让心形图标在被选为收藏时改变颜色，然后将保存的收藏项推送到保存的收藏页面。

我不知道还能做什么，因为我必须使用 itemLength。使用流构建器似乎不可能。

class Books extends StatefulWidget 
@override
_BooksState createState() => _BooksState();


class _BooksState extends State<Books> 
var firestoreDb = Firestore.instance.collection("books").snapshots();


static final int _itemLength = snapshot.data.documents[index]['title'].length;
List<bool> _isFavorited = List<bool>.generate(_itemLength, (_) => false);


@override
Widget build(BuildContext context) 
return Scaffold(
  appBar: AppBar(
    title: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Container(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                'Book List',
                style: GoogleFonts.lato(
                  fontSize: 22.0,
                  color: Colors.amberAccent.shade50,
                ),
              )),
          IconButton(
            icon: Icon(MdiIcons.gift, color: Color(0xffffe0b2), size: 32.0),
            onPressed: () 
              _launchURL();
            ,
          ),
        ]),
    backgroundColor: Colors.lightBlue,
    elevation: 50.0,
  ), //AppBar

  body: Container(
    width: MediaQuery.of(context).size.width,
    child: StreamBuilder(
        stream: firestoreDb,
        builder: (context, snapshot) 
          if (!snapshot.hasData) Text('Loading...');
          return StaggeredGridView.countBuilder(
            crossAxisCount: 2,
            mainAxisSpacing: 1.0,
            crossAxisSpacing: 1.0,
            padding: EdgeInsets.symmetric(horizontal: 2.0, vertical: 6.0),
            shrinkWrap: true,
            itemCount: snapshot.data.documents.length,
            itemBuilder: (context, int index) => Container(
              child: Column(
                children: <Widget>[
                  Card(
                    color: Colors.white,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(12.0),
                    ),

                    child: Column(children: <Widget>[
                      ListTile(
                        title: Text(
                          '$(snapshot.data.documents[index]['title'])',
                          style: GoogleFonts.lato(
                            fontSize: 20.0,
                            height: 1.2,
                            fontWeight: FontWeight.w500,
                          ),
                          textAlign: TextAlign.center,
                        ),

                        subtitle: Row(
                            mainAxisSize: MainAxisSize.max,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Expanded(
                                child: IconButton(
                                  icon: Icon(
                                    Icons.share,
                                    color: Colors.amberAccent,
                                  ),
                                  onPressed: () => Share.share(
                                    '$(snapshot.data.documents[index]['title'])',
                                  ),
                                ),
                              ),

                              Expanded(
                                child: IconButton(
                                  onPressed: () => setState(() =>
                                  _isFavorited[index] =
                                  !_isFavorited[index]),
                                  icon: _isFavorited[index]
                                      ? Icon(MdiIcons.heart,color: Colors.red)
                                      : Icon(MdiIcons.heartOutline,color: Colors.red,),
                                ),
                              ),

                              Expanded(
                                child: Text(
                                  '$(snapshot.data.documents[index]['subtitle'])',
                                  textAlign: TextAlign.right,
                                  style: GoogleFonts.lato(
                                    fontSize: 13.0,
                                    fontWeight: FontWeight.w900,
                                    fontStyle: FontStyle.italic,
                                    color: Colors.blue,
                                  ),
                                ), //subtitle: Text
                              ),
                            ] //children
                        ), //Row
                      ), //listtile
                    ]),
                  ),
                ],
              ),
            ),
            staggeredTileBuilder: (int index) => StaggeredTile.fit(2),
          );
        ),
  ),
);
 //build
 //class

_launchURL() async 
const url = 'https://amazon.com';
if (await canLaunch(url)) 
await launch(url);
 else 
throw 'Could not launch $url';

【参考方案1】：

您必须为所有ListTiles 维护_isFavorited 的值。所以bool _isFavorited 应该是List<bool> _isFavorited。然后可以修改 IconButton 的逻辑如下：

Expanded(
    child: IconButton(
        icon: _isFavorited[index]
            ? Icon(Icons.star)
            : Icon(Icons.star_border),                     
        onPressed: () => setState(() => _isFavorited[index] = !_isFavorited[index]),
    ), 
),

我在DartPad上为此创建了一个示例演示

【讨论】：

所以把 _isfavorited 变成一个列表并添加 .generate?我没有意识到这一点，两天试图弄清楚，你让它看起来很容易。谢谢你。如何将我的项目长度整合到 itemCount ， itemCount: snapshot.data.documents.length 到 static final int _itemLength = 20;

不客气。我很高兴能帮上忙。 snapshot.data.documents 是 FutureBuilder 的一部分？

我将 StreamBuilder 与 firestore 数据一起使用，我为 static final int _itemLength 返回的所有内容都会出错。

我已经使用 StreamBuilder 更新了 DartPad。您可以根据需要调整代码。

如果我在_itemLength =snapshot.data.length，snapshot.data.documents.length中使用任何组合；等等，总是说第一个项目没有定义，但我使用 itemCount: snapshot.data.documents.length 作为我的 StreamBuilder 数据。我错过了什么，是一种不必在代码中再次定义项目长度的方法，我仍然无法让它工作。