我通过 API 获取了一些兴趣(数据),并使用 future builder 作为容器来展示它们。我想在单击它时更改容器的背景颜色。这是我所做的,当我点击一个容器时,它改变了所有容器的背景颜色。
I added an if condition to the color of the container to check whether it is clicked or not
color: isClicked? Colors.white : Color(0xFFFFEBE7),
and set the isClicked state to true when clicked.
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。但不知道如何只改变它的颜色
最佳答案
除此之外,您还可以使用一个变量来存储 selectedIndex 并检查是否选择了 currentIndex 并比较是否选择了 currentIndex 并设置所选小部件的样式。
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatefulWidget {
_MyWidgetState createState()=>_MyWidgetState();
}
class _MyWidgetState extends State<MyWidget>{
List _selectedIndexs=[];
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: 4,
itemBuilder: (ctx,i){
final _isSelected=_selectedIndexs.contains(i);
return GestureDetector(
onTap:(){
setState((){
if(_isSelected){
_selectedIndexs.remove(i);
}else{
_selectedIndexs.add(i);
}
});
},
child:Container(
color:_isSelected?Colors.red:null,
child:ListTile(title:Text("Khadga")),
),
);
}
);
}
}
按照我在上述情况下所做的那样修改您的 ListView 生成器。
关于flutter - 在我的 flutter 应用程序中单击容器时更改容器的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60136011/