android - 当onTap时，所有图标都会更改颜色，如何在单击时仅更改一个？

Question

所以这里发生的是我正在尝试使其工作，就像我单击一个按钮时，它应该仅更改其颜色，而是更改所有三种颜色。我知道有办法为所有图标声明变量并对其全部进行初始化，但这将显示重复的代码并使它变得复杂

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,),),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Answer 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做同样的事情。