在码农的世界里，优美的应用体验，来源于程序员对细节的处理以及自我要求的境界，年轻人也是忙忙碌碌的码农中一员，每天、每周，都会留下一些脚印，就是这些创作的内容，有一种执着，就是不知为什么，如果你迷茫，不妨来瞅瞅码农的轨迹。
- 优美的音乐节奏带你浏览这个效果的编码过程
- 坚持每一天，是每个有理想青年的追求
- 追寻年轻人的脚步，也许你的答案就在这里
- 如果你迷茫 不妨来瞅瞅这里
本文章的效果图：
1 基本使用
已将轮播图封装成 BannerWidget 大家可以直接拷贝使用：
- 自动轮播
- 手指按下时停止轮播
基本使用代码如下：
class HomeItemDemoPage extends StatefulWidget {
@override
_HomeItemDemoPageState createState() => _HomeItemDemoPageState();
}
class _HomeItemDemoPageState extends State<HomeItemDemoPage> {
List<String> _list = [
"assets/images/banner1.png",
"assets/images/banner1.png",
"assets/images/banner1.png",
"assets/images/banner1.png",
"assets/images/banner1.png"
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Demo"),
),
backgroundColor: Colors.white,
///填充布局
body: BannerWidget(
imageList: _list,
),
);
}
}
2 BannerWidget 的定义
首先是定义
class BannerWidget extends StatefulWidget {
final List<String> imageList;
///轮播的时间
final Duration loopDuration;
BannerWidget({
//必传参数
@required this.imageList,
//轮播时间
this.loopDuration = const Duration(seconds: 3),
});
@override
_BannerWidgetState createState() => _BannerWidgetState();
}
class _BannerWidgetState extends State<BannerWidget> {
//显示的轮播总页数
int _total = 5;
//当前显示的页数
int _current = 1;
//计时器
Timer _timer;
PageController _pageController;
@override
void initState() {
super.initState();
//轮播图个数
_total = widget.imageList.length;
//轮播控制器
_pageController = new PageController(initialPage: 5000);
//开始轮播
startLoopFunction();
}
@override
void dispose() {
_timer.cancel();
super.dispose();
}
}
然后 build 中的构建如下：
@override
Widget build(BuildContext context) {
//轮播 图
return Container(
color: Colors.red,
height: 200,
width: MediaQuery.of(context).size.width,
child: GestureDetector(
//手指按下的回调
onTapDown: (TapDownDetails details) {
LogUtils.e("手指按下，停止轮播");
stopLoopFunction();
},
//手指抬起的回调
onTap: () {
LogUtils.e("手指抬起，开始轮播");
startLoopFunction();
},
//手指按下后滑动移出的回调
onTapCancel: () {
LogUtils.e("手指移出，开始轮播");
startLoopFunction();
},
child: buildStack(),
),
);
}
然后开始轮播与结束轮播的方法定义
//定义开始轮播的方法
void startLoopFunction() {
//定时器
_timer = Timer.periodic(widget.loopDuration, (timer) {
//滑动到下一页
_pageController.nextPage(
curve: Curves.linear,
duration: Duration(
milliseconds: 200,
),
);
});
}
//定义停止轮播的方法
void stopLoopFunction() {
if (_timer.isActive) {
_timer.cancel();
}
}
然后轮播图与指示器是层叠在一起的
Stack buildStack() {
return Stack(
children: [
//第一层 轮播
Positioned.fill(
child: PageView.builder(
//控制器
controller: _pageController,
//总页数
itemCount: 10000,
//滑动时回调 value 当前显示的页面
onPageChanged: (value) {
setState(() {
_current = value % widget.imageList.length;
});
},
itemBuilder: (BuildContext context, int index) {
String image = widget.imageList[index % widget.imageList.length];
return Image.asset(
image,
fit: BoxFit.fill,
);
},
),
),
//第二层 指示器
Positioned(
right: 14,
bottom: 14,
child: buildContainer(),
),
],
);
}
右下角对齐的指示器
Container buildContainer() {
return Container(
alignment: Alignment.center,
width: 50,
height: 24,
decoration: BoxDecoration(
color: Colors.grey[200].withOpacity(0.5),
//设置圆角
borderRadius: BorderRadius.all(Radius.circular(12))),
child: Text(
"$_current/$_total",
textAlign: TextAlign.center,
),
);
}
完毕
不局限于思维，不局限语言限制，才是编程的最高境界。
以小编的性格，肯定是要录制一套视频的，随后会上传
有兴趣 你可以关注一下 西瓜视频 — 早起的年轻人