当onTap所有图标改变颜色时如何让它在点击时只改变一个？答案

【问题标题】：when onTap all icons changes color how to make it change for only one when clicked?当onTap所有图标改变颜色时如何让它在点击时只改变一个？
【发布时间】：2020-10-04 17:24:00
【问题描述】：

所以这里发生的事情是我试图让它像我点击一个按钮时一样工作，它应该只改变它的颜色，而是改变所有三种颜色。我知道有办法为所有图标声明变量并将它们全部初始化，但这会显示重复的代码并使其变得复杂

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {

  Color colour= Colors.transparent;
  Color IconColour = Colors.black;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          MainBG(),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Padding(
                padding:
                    const EdgeInsets.only(left: 30.0, right: 30.0, top: 30.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Image(
                      image: AssetImage(
                        'assets/icon.png',
                      ),
                      height: 20,
                      width: 20,
                    ),
                    Icon(
                      Icons.shopping_cart,
                      color: Colors.black,
                    ),
                  ],
                ),
              ),
              SizedBox(
                height: 60,
              ),
              Padding(
                padding: const EdgeInsets.only(
                  left: 30.0,
                  right: 30.0,
                ),
                child: Column(
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.only(right: 20.0),
                      child: Text(
                        "Gocycle",
                        style: TextStyle(
                          color: Colors.black,
                          fontSize: 40,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                    SizedBox(
                      height: 10,
                    ),
                    Padding(
                      padding: const EdgeInsets.only(right: 70.0),
                      child: Text(
                        "Folding Bike",
                        style: TextStyle(
                          fontWeight: FontWeight.w400,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(bottom:45.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    InkWell(onTap: (){
                      setState(() {
                        colour = Colors.blue;
                        IconColour = Colors.white;
                      });
                    },
                      child: Container(width: 60,
                      height: 60,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(100),
                        color: colour,
                      ),
                      child: Icon(CupertinoIcons.home,color: IconColour,),),
                    ),
                    SizedBox(width: 30,),
                    InkWell(onTap: (){
                      setState(() {
                        colour = Colors.blue;
                        IconColour = Colors.white;
                      });
                    },
                      child: Container(width: 60,
                        height: 60,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(100),
                          color: colour,
                        ),
                        child: Icon(Icons.add,color: IconColour,),),
                    ),
                    SizedBox(
                      width: 30,
                    ),
                    InkWell(onTap: (){
                      setState(() {
                        colour = Colors.blue;
                        IconColour = Colors.white;
                      });
                    },
                      child: Container(width: 60,
                        height: 60,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(100),
                          color: colour,
                        ),
                        child: Icon(Icons.directions_bike,color: IconColour,),),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

【问题讨论】：

标签： android firebase flutter dart

【解决方案1】：

您必须制作颜色列表，并且您必须通过索引更改每个按钮的颜色

  List<Color> colour= [Colors.transparent,Colors.red];

//Button
 InkWell(onTap: (){
                      setState(() {
                        colour[1] = Colors.blue; // provide the index while changing it.
                        IconColour = Colors.white;
                      });
                    },
                      child: Container(width: 60,
                      height: 60,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(100),
                        color: colour[1], // provide the index of your list
                      ),
                      child: Icon(CupertinoIcons.home,color: IconColour,),),
                    ),

您也必须为 IconColour 做同样的事情。

【讨论】：