颤动如何从 ListTile 更改所选图块的背景颜色

Posted

技术标签:

【中文标题】颤动如何从 ListTile 更改所选图块的背景颜色【英文标题】:Flutter how to change the background color of a selected tile from a ListTile 【发布时间】:2021-02-15 16:32:29 【问题描述】:

我正在尝试从 ListTile 更改所选磁贴的背景。

我搜索并找到了以下两个帖子,但是没有一个可以解决我的问题。

Post1 Post2

在@CopsOnRoad 的回答的帮助下,我得到了更好的帮助。

使用以下代码,如果我选择多个图块,则全部保持选中状态。如何一次只选择一个,然后取消选择之前选择的?

图块索引受itemCount: is books.length限制。

    List<Favorited> books;
    
    // todo: this needs to be changed, has a hard coded value of 200
    List<bool> _selected = List.generate(200, (i) => false); // Pre filled list
    
      @override
      Widget build(BuildContext context) 
        final booksProvider = Provider.of<Model>(context);
    
        return Container(
          child: StreamBuilder(
            stream: booksProvider.getUserFavList('103610812025'),
            builder: (context, AsyncSnapshot<List<Favorited>> snapshot) 
              if (snapshot.hasData) 
                books= snapshot.data.toList();
                return ListView.builder(
                    itemCount: books.length,
                    itemBuilder: (buildContext, index) 
                      return Container(
                        color: _selected[index] ? Colors.amber : Colors.transparent,
                        child: ListTile(
                          title: InkWell(
                              child: Text(snapshot.data[index].title),
                              onTap:() 
                                setState(() 
                                  _selected[index] = !_selected[index];
                                );
                              ),
                          subtitle: Text(snapshot.data[index].name),
                        ),
                      );
                    );
               else 
                return Text('Fetching');
              
            ),
        );

【问题讨论】:

【参考方案1】:

让一个变量保存选定的图块索引。



    List<Favorited> books;
    
    // todo: this needs to be changed, has a hard coded value of 200
    List<bool> _selected = List.generate(200, (i) => false); // Pre filled list
    int selectedIndex;
    
      @override
      Widget build(BuildContext context) 
        final booksProvider = Provider.of<Model>(context);
    
        return Container(
          child: StreamBuilder(
            stream: booksProvider.getUserFavList('103610812025'),
            builder: (context, AsyncSnapshot<List<Favorited>> snapshot) 
              if (snapshot.hasData) 
                books= snapshot.data.toList();
                return ListView.builder(
                    itemCount: books.length,
                    itemBuilder: (buildContext, index) 
                      return Container(
                        color: selectedIndex == index ? Colors.amber : Colors.transparent,
                        child: ListTile(
                          title: InkWell(
                              child: Text(snapshot.data[index].title),
                              onTap:() 
                                setState(() 
                                  selectedIndex = index;
                                );
                              ),
                          subtitle: Text(snapshot.data[index].name),
                        ),
                      );
                    );
               else 
                return Text('Fetching');
              
            ),
        );

【讨论】:

效果很好!一个如此简单的解决方案,我有很多东西要学 XD。感谢您的快速回答。 享受你的扑腾生活!

以上是关于颤动如何从 ListTile 更改所选图块的背景颜色的主要内容,如果未能解决你的问题,请参考以下文章

在颤动中创建一个带有分隔符的开关列表图块

如何将特定的 ListTile 变量传递给新的页面路由 onTap?

如何在 Flutter 中选择时更改 ListTile 的背景颜色

如何在颤动中将 ListTile 连接到音频小部件

重新格式化 ListTile UI Flutter

如何处理ListTile颤动中的右溢出