首页 > 解决方案 > 更改字符串列表的颜色 - Flutter

问题描述

我有一个字符串列表,当我点击其中一个时,我想更改颜色,这是我到目前为止的代码:

  var list = ["name", "city", "country", "email"];


appBar: AppBar(
    title:Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: List.generate(4, (index) {
            return GestureDetector(
              child: Container(
                margin: EdgeInsets.all(8),
                child: Text(
                  list[index],
                  style: TextStyle(color: Colors.red),
                ),
              ),
              onTap: () {},
            );
          }),
        ),
      
  ),

标签: androidiosflutterdartgesturedetector

解决方案


考虑到它是一个有状态的小部件,您可以按如下方式执行此操作:

var list = ["name", "city", "country", "email"];
List <int>tapped = [];

appBar: AppBar(
    title:Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: List.generate(4, (index) {
            return GestureDetector(
              child: Container(
                margin: EdgeInsets.all(8),
                child: Text(
                  list[index],
                  style: TextStyle(color: tapped.contains(index) ? Colors.red : Colors.black),
                ),
              ),
              onTap: () {
                if(tapped.contains(index)){
                  this.setState(() {tapped.remove(index);});
                } else {
                  this.setState(() {tapped.add(index);});
                }
              },
            );
          }),
        ),
      
  ),

推荐阅读