Flutter:更改 ListView.builder 中选定按钮的背景颜色

Posted

技术标签:

【中文标题】Flutter:更改 ListView.builder 中选定按钮的背景颜色【英文标题】:Flutter: Change the background color of selected button in ListView.builder 【发布时间】:2021-10-30 19:22:22 【问题描述】:

我有一个项目列表和默认颜色。

List<String> items = ['A', 'B', 'C'];
Color _color = Colors.transparent;

根据我的代码,它改变了按钮的所有背景颜色。

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) 

    return ElevatedButton(
      style: ButtonStyle(backgroundColor: MaterialStateProperty.all(_color)),
      onPressed: () 
        setState(() 
          _color = Colors.blue;
        );
      ,
      child: Text(items[index]),
    );

  ,
);

所以,我只想要选中的按钮来改变背景颜色。

【问题讨论】:

试试this如果你按下按钮然后改变按钮的颜色 【参考方案1】:

请试试这个

List<String> items = ['A', 'B', 'C'];
List<Color> _color = [Colors.transparent,Colors.transparent,Colors.transparent ];

ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) 
          return ElevatedButton(
            style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(_color[index])),
            onPressed: () 
              setState(() 
                if (_color[index] == Colors.blue) 
                  _color[index] = Colors.transparent;
                 else 
                  _color[index] = Colors.blue;
                
              );
            ,
            child: Text(items[index]),
          );
        ,
      );

输出:

【讨论】:

不错。如果这些按钮的作用类似于单选按钮怎么办?例如,选择按钮 A,然后我点击按钮 B,然后我希望按钮 B 成为唯一具有蓝色背景颜色的按钮。 是的,但我忘了提到按钮,就像收音机一样。 Nvm,我在这里找到了它link

以上是关于Flutter:更改 ListView.builder 中选定按钮的背景颜色的主要内容,如果未能解决你的问题,请参考以下文章

Flutter Firestore 地理查询

Flutter:更改 CircularProgressIndicator 颜色

Flutter:如何在 Flutter 中使用 Switch 更改主题 - 我已经使用 Provider 实现了这个明暗主题,但不能使用 switch 更改

VSCode Flutter - 停止跟踪 Flutter repo 更改

如何在flutter中更改公司域名?

Flutter 动态更改应用程序启动图标