[英]Flutter carousel slider indicator color not changing
我有一个简单的旋转木马 slider ,其中有指示点。 问题是我的点颜色一起改变。 表示当 _dotindicatoR 为 0 时,所有圆圈变为蓝色,当它变为 1、2 或 3 时,它变为灰色。 意味着所有的颜色一起变化
我的代码
final List<String> imgList = [
'images/diana-polekhina-F68HtpYHu_w-unsplash.jpg',
'images/diana-polekhina-F68HtpYHu_w-unsplash.jpg',
'images/diana-polekhina-F68HtpYHu_w-unsplash.jpg',
'images/diana-polekhina-F68HtpYHu_w-unsplash.jpg',
];
final List<Widget> imageSliders = imgList
.map((item) => Container(
child: Container(
margin: EdgeInsets.all(5.0),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(5.0)),
child: Stack(
children: <Widget>[
Image.asset(
item,
fit: BoxFit.cover,
),
Positioned(
bottom: 0.0,
left: 0.0,
right: 0.0,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.red, Colors.blue],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
),
),
),
),
],
)),
),
))
.toList();
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
int _dotindicatoR = 0;
String notLength = "0";
Timer timer;
@override
void initState() {
super.initState();
}
@override
void dispose() {
timer?.cancel();
super.dispose();
}
double xOffset = 0;
double yOffset = 0;
int pageIndex = 0;
double scaleFactor = 1;
var rating = 3.0;
bool isDrawerOpen = false;
@override
Widget build(BuildContext context) {
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
print(width);
return AnimatedContainer(
transform: Matrix4.translationValues(xOffset, yOffset, 0)
..scale(scaleFactor)
..rotateY(isDrawerOpen ? -0.5 : 0),
duration: Duration(milliseconds: 370),
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(isDrawerOpen ? 40 : 0.0)),
child: GestureDetector(
onTap: () {
isDrawerOpen
? setState(() {
xOffset = 0;
yOffset = 0;
scaleFactor = 1;
isDrawerOpen = false;
})
: print('sada');
},
child: Container(
child: ClipRRect(
borderRadius: isDrawerOpen
? BorderRadius.circular(40.0)
: BorderRadius.circular(0),
child: Scaffold(
backgroundColor: Colors.white,
body: SingleChildScrollView(
child: Container(
child: Column(children: [
CarouselSlider(
options: CarouselOptions(
autoPlay: true,
aspectRatio: 1.85,
enlargeCenterPage: true,
enlargeStrategy: CenterPageEnlargeStrategy.height,
onPageChanged: (index, reason) {
print('index ${index}');
setState(() {
_dotindicatoR = index;
print('_current ${_dotindicatoR}');
});
}),
items: imageSliders,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: imgList.map((url) {
int index = imgList.indexOf(url);
return Container(
width: 8.0,
height: 8.0,
margin: EdgeInsets.symmetric(
vertical: 10.0, horizontal: 2.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: _dotindicatoR == index
? Color(0xff01a8dd)
: Color.fromRGBO(0, 0, 0, 0.4),
),
);
}).toList(),
),
])),
),
),
),
),
));
}
}
像这样
我想得到的是当索引相同时只有1个圆圈会改变颜色但这里所有的圆圈都在改变
问题在点行中。 你在哪里做int index = imgList.indexOf(url);
它没有设置个人价值。
像这样尝试 Listview.builder
SizedBox(
height: 30,
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: imgList.length,
itemBuilder: (context, i) {
return Container(
width: 8.0,
height: 8.0,
margin: EdgeInsets.symmetric(
vertical: 10.0, horizontal: 2.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: _dotindicatoR == i
? Color(0xff01a8dd)
: Color.fromRGBO(0, 0, 0, 0.4),
),
);
}),
),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.