本文将通过 PageView 实现页面的整页横向切换。
1 PageView 的基本使用
///封装方法构建PageView组件
PageView buildBodyFunction() {
///可实现左右页面滑动切换
return PageView(
//当页面选中后回调此方法
//参数[index]是当前滑动到的页面角标索引 从0开始
onPageChanged: (int index){
print("当前的页面是 $index");
///滑动PageView时，对应切换选择高亮的标签
setState(() {
currentSelectIndex = index;
});
},
//值为flase时 显示第一个页面 然后从左向右开始滑动
//值为true时 显示最后一个页面 然后从右向左开始滑动
reverse: false,
//滑动到页面底部无回弹效果
physics: BouncingScrollPhysics(),
//横向滑动切换
scrollDirection: Axis.horizontal,
//页面控制器
controller: pageController,
//所有的子Widget
children: pageList,
);
}
}
controller 与pageList
///当前显示标签页面的标识
int currentSelectIndex = 0;
///保存页面的List
List<Widget> pageList=[];
/// 初始化控制器
PageController pageController;
@override
void initState() {
super.initState();
///创建控制器的实例
pageController = new PageController(
///用来配置PageView中默认显示的页面 从0开始
initialPage: 0,
///为true是保持加载的每个页面的状态
keepPage: true,
);
///PageView设置滑动监听
pageController.addListener(() {
//PageView滑动的距离
double offset = pageController.offset;
print("pageView 滑动的距离 $offset");
});
///保存标签页面
pageList=[
LeftPage(),
RightPage(),
];
}
使用 controller 来实现PageView的整屏切换
pageController.animateTo(
MediaQuery.of(context).size.width*currentSelectIndex,
duration: Duration(milliseconds: 200),
curve: Curves.linear);
使用PageView滑动到顶部
pageController.animateTo(
0,
duration: Duration(milliseconds: 200),
curve: Curves.linear);
2 案例实战 使用PageView实现引导页面
首先是通过 Stack 将圆点指示器 与 PageView 叠在一起显示，如下代码清单2-1所示：
///代码清单 2-1
class LeftPageViewPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new LeftPageViewPageState();
}
}
class LeftPageViewPageState extends State<LeftPageViewPage> {
///控制器
final PageController _controller = new PageController();
///可滑动的页面 使用到的图片
final List<String> _pages = <String>[
"http://b-ssl.duitang.com/uploads/item/201311/02/20131102150044_YGB5u.jpeg",
"http://b-ssl.duitang.com/uploads/item/201311/02/20131102150044_YGB5u.jpeg",
"http://b-ssl.duitang.com/uploads/item/201311/02/20131102150044_YGB5u.jpeg",
];
@override
Widget build(BuildContext context) {
///层叠布局
return new Stack(
children: <Widget>[
//底层的PageView
buildPageView(),
//表层的圆点指示器
buildPositioned(),
],
);
}
}
通过 buildPageView 方法来构建一个 PageView ，如下代码清单 2-2 所示：
///代码清单 2-2
///构建 PageView
PageView buildPageView() {
///懒加载模式构建
return PageView.builder(
///设置滑动模式
physics: new AlwaysScrollableScrollPhysics(),
///添加控制器
controller: _controller,
///构建每一屏的视图 UI
itemBuilder: (BuildContext context, int index) {
return buildItemWidget(index);
},
///条目个数
itemCount: _pages.length,
);
}
PageView 通过 itemBuilder 属性来构建每一屏页面显示UI，在这里通过 buildItemWidget 方法封装构建如下代码清单2-3所示：
///代码清单 2-3
///构建每一页的Item UI效果
Widget buildItemWidget(int index){
return new ConstrainedBox(
constraints: const BoxConstraints.expand(),
///网络图片
child: Image.network(
///图片地址
_pages[index],
///加载中的占位
loadingBuilder: (BuildContext context,
Widget child,
ImageChunkEvent loadingProgress) {
///这里使用了一个进度圆圈
return new SizedBox(
width: 24.0,
height: 24.0,
child: new CircularProgressIndicator(
strokeWidth: 2.0,
),
);
},),
);
}
通过方法 buildPositioned 来 结合Positioned 使用圆点组件在 Stack 中底部对齐，如下代码清单 2-4所示：
///代码清单 2-4
///表层的圆点指示器
Positioned buildPositioned() {
return new Positioned(
///底部对齐
bottom: 0.0, left: 0.0,right: 0.0,
child: new Container(
color: Colors.white,
padding: const EdgeInsets.all(20.0),
child: new Center(
///自定义的圆点切换指示器
child: buildDotsIndicator(),
),
),
);
}
buildDotsIndicator 方法用来构建建表层的圆点指示器，如下代码清单 2-5所示：
///代码清单 2-5
///自定义的圆点切换指示器
DotsIndicator buildDotsIndicator() {
return new DotsIndicator(
///与PageView联动的控制器
controller: _controller,
///小圆点的个数
itemCount: _pages.length,
///点击小圆点的回调
onPageSelected: (int pageIndex) {
///主动切换页面
_controller.animateToPage(
pageIndex,
duration: Duration(milliseconds: 300),
curve: Curves.ease,
);
});
}
对于 DotsIndicator 是自定义的一个 AnimatedWidget，如下代码清单2-6所示：
///代码清单 2-6
class DotsIndicator extends AnimatedWidget {
DotsIndicator({
this.controller,
this.itemCount,
this.onPageSelected,
this.color: Colors.red,
}) : super(listenable: controller);
final PageController controller;
final int itemCount;
final ValueChanged<int> onPageSelected;
final Color color;
static const double _kDotSize = 8.0;
static const double _kMaxZoom = 2.0;
static const double _kDotSpacing = 25.0;
Widget _buildDot(int index) {
double selectedness = Curves.easeOut.transform(
max(
0.0,
1.0 - ((controller.page ?? controller.initialPage) - index).abs(),
),
);
double zoom = 1.0 + (_kMaxZoom - 1.0) * selectedness;
return new Container(
width: _kDotSpacing,
child: new Center(
child: new Material(
color: color,
type: MaterialType.circle,
child: new Container(
width: _kDotSize * zoom,
height: _kDotSize * zoom,
child: new InkWell(
onTap: () => onPageSelected(index),
),
),
),
),
);
}
Widget build(BuildContext context) {
return new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: new List<Widget>.generate(itemCount, _buildDot),
);
}
}
【1】 目前在西瓜视频上免费刊登 Flutter 系列教程，每日更新，欢迎关注接收提醒点击查看提示
【2】 本公众号会首发系列专题文章，付费的视频课程会在公众号中免费刊登，在你上下班的路上或者是睡觉前的一刻，本公众号都是你浏览知识干货的一个小选择，收藏不如行动，在那一刻，公众号会提示你该学习了。
