这里我自己封装了一个swiper
来源:6-4 轮播图Banner组件封装

酱卤小郡肝
2022-09-16
我参考慕课手记完成的封装swiper,老师看看有啥问题吗。麻烦老师提出改进哈
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:my_demo/core/hi_state.dart';
class HiBaner extends StatefulWidget {
final List<String> _images;
double height;
ValueChanged<int> onTap;
Curve curves;
HiBaner(this._images,
{Key? key,
this.height = 200,
required this.onTap,
this.curves = Curves.linear})
: super(key: key);
State<HiBaner> createState() => _HiBanerState();
}
class _HiBanerState extends State<HiBaner> with TickerProviderStateMixin {
PageController? _pageController;
Timer? _timer;
int _curIndex = 0;
void initState() {
super.initState();
_pageController = PageController();
_initTimer();
}
void dispose() {
super.dispose();
_timer?.cancel();
_timer = null;
}
Widget build(BuildContext context) {
return Stack(
alignment: Alignment.bottomCenter,
children: <Widget>[
_buildPageView(),
_buildIndicator(),
],
);
}
Widget _buildPageView() {
var length = widget._images.length;
/// 点击到图片的时候取消定时任务
_cancelTimer() {
if (_timer != null) {
_timer?.cancel();
_timer = null;
_initTimer();
}
}
return SizedBox(
height: widget.height,
child: PageView.builder(
controller: _pageController,
onPageChanged: (index) {
if (index == 0) {
setState(() {
_curIndex = length;
});
} else {
setState(() {
_curIndex = index;
});
}
},
itemBuilder: (context, index) {
return GestureDetector(
onPanDown: (details) {
_cancelTimer();
},
onTap: () {
widget.onTap(index);
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('当前 page 为 ${index % length}'),
duration: const Duration(milliseconds: 500),
),
);
},
child: Image.network(
widget._images[index % length],
fit: BoxFit.cover,
),
);
}),
);
}
Widget _buildIndicator() {
var length = widget._images.length;
return Positioned(
bottom: 10,
child: Row(
children: widget._images.map((s) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 3.0),
child: ClipOval(
child: Container(
width: 8,
height: 8,
color: s == widget._images[_curIndex % length]
? Colors.white
: Colors.grey,
),
),
);
}).toList(),
),
);
}
void _initTimer() {
_timer = Timer.periodic(const Duration(seconds: 3), (t) {
int index = _curIndex + 1;
setState(() {
_curIndex++;
});
_pageController?.animateToPage(
index,
duration: const Duration(milliseconds: 300),
curve: Curves.linear,
);
});
}
}
写回答
1回答
-
CrazyCodeBoy
2022-09-16
你运行的时候左右滚动有白屏的问题么012022-09-19
相似问题