我需要改变单个容器的颜色,但它会改变整个容器的颜色
I need to change color for single container but it's change color for whole container
AnimationController? controller;
Animation<double>? animation;
@override
void initState() {
super.initState();
controller =
AnimationController(duration: const Duration(seconds: 3), vsync: this)
..addListener(() => setState(() {}));
animation = Tween(begin: -500.0, end: 500.0).animate(controller!);
controller!.forward();
}
List tile = [
[true, true, true, true],
[true, true, true, true],
[true, true, true, true],
[true, true, true, true],
];
String? gettw;
Container(
color: Colors.white,
child: ListView.builder(
reverse: false,
itemCount: tile[0].length,
itemBuilder: (BuildContext context, int index) {
String? gettw;
if (tile[index][0]) {
if (gettw != 'transparent') {
gettw = 'black';
}
} else if (tile[index][0] == false) {
gettw = 'transparent';
}
print('gettw $gettw');
return GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () {
setState(() {
if (tile[index][0] == true) {
print('working');
gettw = 'transparent';
print('gettw $gettw');
} else if (tile[index][0] == false) {
gettw = 'red';
}
});
},
child: Transform.translate(
offset: Offset(0.0, animation!.value),
child: Container(
height: MediaQuery.of(context).size.height / 4,
color: (gettw == 'black')
? Colors.black
: (gettw == 'transparent')
? Colors.transparent
: (gettw == 'red')
? Colors.red
: Colors.green,
child: Text('${tile[index][0]}',
style: const TextStyle(color: Colors.purple)),
),
),
);
},
)),
我从上到下为 4 个容器制作动画。如果用户单击容器。容器颜色需要将黑色变为白色。但是所有 4 个容器的颜色都变了。 gettw 变量包含容器中需要显示的颜色。请哪位大侠帮我解决这个问题。
试试这个
import 'package:flutter/material.dart';
class ColorChanger extends StatefulWidget {
const ColorChanger({ Key? key }) : super(key: key);
@override
_ColorChangerState createState() => _ColorChangerState();
}
class _ColorChangerState extends State<ColorChanger> {
List<bool> widgetActive = List.generate(4, (index){
return false;
});
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView.builder(
itemCount: 4,
itemBuilder: (context, index){
return InkWell(
onTap: (){
setState(() {
widgetActive[index] = !widgetActive[index];
});
},
child: Container(
margin: EdgeInsets.all(30),
width: 40,
height:50,
color: widgetActive[index] ? Colors.black:Colors.red,
),
);
}),
);
}
}
AnimationController? controller;
Animation<double>? animation;
@override
void initState() {
super.initState();
controller =
AnimationController(duration: const Duration(seconds: 3), vsync: this)
..addListener(() => setState(() {}));
animation = Tween(begin: -500.0, end: 500.0).animate(controller!);
controller!.forward();
}
List tile = [
[true, true, true, true],
[true, true, true, true],
[true, true, true, true],
[true, true, true, true],
];
String? gettw;
Container(
color: Colors.white,
child: ListView.builder(
reverse: false,
itemCount: tile[0].length,
itemBuilder: (BuildContext context, int index) {
String? gettw;
if (tile[index][0]) {
if (gettw != 'transparent') {
gettw = 'black';
}
} else if (tile[index][0] == false) {
gettw = 'transparent';
}
print('gettw $gettw');
return GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () {
setState(() {
if (tile[index][0] == true) {
print('working');
gettw = 'transparent';
print('gettw $gettw');
} else if (tile[index][0] == false) {
gettw = 'red';
}
});
},
child: Transform.translate(
offset: Offset(0.0, animation!.value),
child: Container(
height: MediaQuery.of(context).size.height / 4,
color: (gettw == 'black')
? Colors.black
: (gettw == 'transparent')
? Colors.transparent
: (gettw == 'red')
? Colors.red
: Colors.green,
child: Text('${tile[index][0]}',
style: const TextStyle(color: Colors.purple)),
),
),
);
},
)),
我从上到下为 4 个容器制作动画。如果用户单击容器。容器颜色需要将黑色变为白色。但是所有 4 个容器的颜色都变了。 gettw 变量包含容器中需要显示的颜色。请哪位大侠帮我解决这个问题。
试试这个
import 'package:flutter/material.dart';
class ColorChanger extends StatefulWidget {
const ColorChanger({ Key? key }) : super(key: key);
@override
_ColorChangerState createState() => _ColorChangerState();
}
class _ColorChangerState extends State<ColorChanger> {
List<bool> widgetActive = List.generate(4, (index){
return false;
});
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView.builder(
itemCount: 4,
itemBuilder: (context, index){
return InkWell(
onTap: (){
setState(() {
widgetActive[index] = !widgetActive[index];
});
},
child: Container(
margin: EdgeInsets.all(30),
width: 40,
height:50,
color: widgetActive[index] ? Colors.black:Colors.red,
),
);
}),
);
}
}