我通过 API 获取了一些兴趣(数据),并向他们展示了使用未来的构建器作为容器。我想在单击容器时更改容器的背景颜色。这是我所做的,当我单击一个容器时,它会更改所有容器的背景颜色。
我在容器的颜色中添加了一个 if 条件来检查它是否被单击
颜色:是否被点击?颜色.白色:颜色(0xFFFFEBE7),
并在单击时将 isClicked 状态设置为 true。
bool isClicked = false;
FutureBuilder(
future: GetInterests.getInterests(),
builder: (context, snapshot) {
final datalist = snapshot.data;
if (snapshot.connectionState ==
ConnectionState.done) {
return Expanded(
child: SizedBox(
height: 35,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return Wrap(
direction: Axis.vertical,
children: <Widget>[
GestureDetector(
onTap: (){
final inte_id = "${datalist[index]['_id']}";
log(inte_id);
setState(() {
isClicked = true;
});
},
child: new Container(
margin: EdgeInsets.only(right: 7),
height: 30,
width: MediaQuery.of(context)
.size
.width /
5.2,
decoration: BoxDecoration(
color: isClicked? Colors.white : Color(0xFFFFEBE7),
border: Border.all(
color: Color(0xFFE0E0E0)),
borderRadius:
BorderRadius.only(
topLeft:
Radius.circular(
50.0),
topRight:
Radius.circular(
50.0),
bottomRight:
Radius.circular(
50.0),
bottomLeft:
Radius.circular(
0.0))),
child: Center(
child: Text(
"${datalist[index]['iname']}",
style: TextStyle(
fontFamily: 'Montserrat',
color: Color(0xFFFF5E3A),
fontSize: 13),
),
),
),
),
],
);
},
itemCount: datalist.length,
),
),
);
}
return Padding(
padding: const EdgeInsets.only(left: 140.0),
child: Center(
child: CircularProgressIndicator(),
),
);
},
)
我能够在属于我单击的容器的控制台中打印兴趣 ID。但不知道如何只改变它的颜色