flutterPageView实现左右滑动切换视图
本⽂实例为⼤家分享了flutter PageView左右滑动切换视图的具体代码，供⼤家参考，具体内容如下
import 'dart:math';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_x/base/base_appbar_page.dart';
class LeftPageViewPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new LeftPageViewPageState();
}
}
class LeftPageViewPageState extends BaseAppBarPageState<LeftPageViewPage> {
@override
String buildInitState() {
buildBackBar("pageView", backIcon: Icons.arrow_back_ios);
return null;
}
final _controller = new PageController();
static const _kDuration = const Duration(milliseconds: 300);
static const _kCurve = Curves.ease;
final List<Widget> _pages = <Widget>[
new ConstrainedBox(
constraints: pand(),
child: new CachedNetworkImage(
width: double.infinity,
height: double.infinity,
fit: BoxFit.fill,
imageUrl:
"b-ssl.duitang/uploads/item/201311/02/20131102150044_YGB5u.jpeg",
placeholder: (context, url) => new SizedBox(
width: 24.0,
height: 24.0,
child: new CircularProgressIndicator(
strokeWidth: 2.0,
),
),
errorWidget: (context, url, error) => new ),
),
),
new ConstrainedBox(
constraints: pand(),
child: new CachedNetworkImage(
width: double.infinity,
height: double.infinity,
fit: BoxFit.fill,
imageUrl:
"b-ssl.duitang/uploads/item/201311/02/20131102150044_YGB5u.jpeg",
placeholder: (context, url) => new SizedBox(
width: 24.0,
height: 24.0,
child: new CircularProgressIndicator(
strokeWidth: 2.0,
),
)
,
errorWidget: (context, url, error) => new ),
),
),
new ConstrainedBox(
constraints: pand(),
child: new Stack(
//Stack即层叠布局控件，能够将⼦控件层叠排列
//alignment：此参数决定如何去对齐没有定位（没有使⽤Positioned）或部分定位的⼦widget。所谓部分定位，在这⾥特指没有在某⼀个轴上定位：left、right为横轴，top、bottom为纵轴，只要包含某个轴上的⼀个定位属性就算在该轴上有定位。 alignment: pStart,
children: <Widget>[
new CachedNetworkImage(
width: double.infinity,
height: double.infinity,
fit: BoxFit.fill,
imageUrl: "b-ssl.duitang/uploads/item/201311/02/20131102150044_YGB5u.jpeg",
placeholder: (context, url) => SizedBox(width: 24,height: 25,child: CircularProgressIndicator(strokeWidth: 2.0,),),
errorWidget: (context, url, error) => new ),
),
new Align(
alignment: Alignment.bottomCenter,
child: new Container(
margin: ly(bottom: 80.0),
child: FlatButton(onPressed: (){}, child: Text("⽴即体验")) ,
),
),
],
)),
];
@override
Widget buildWidget(BuildContext context) {
// TODO: implement buildWidget
return new Stack(
children: <Widget>[
//pageViw
PageView.builder(
flutter开发appphysics: new AlwaysScrollableScrollPhysics(),
controller: _controller,
itemBuilder: (BuildContext context, int index) {
return _pages[index];
},
//条⽬个数
itemCount: _pages.length,
),
/
/圆点指⽰器
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: new DotsIndicator(
controller: _controller,
itemCount: _pages.length,
onPageSelected: (int page) {
_controller.animateToPage(
page,
duration: _kDuration,
curve: _kCurve,
);
}),
),
),
),
]
,
);
}
}
class DotsIndicator extends AnimatedWidget {
DotsIndicator({
this.itemCount,
}) : super(listenable: controller);
/
// The PageController that this DotsIndicator is representing.
final PageController controller;
/// The number of items managed by the PageController
final int itemCount;
/// Called when a dot is tapped
final ValueChanged<int> onPageSelected;
/// The color of the dots.
///
/// Defaults to `Colors.white`.
final Color color;
// The base size of the dots
static const double _kDotSize = 8.0;
// The increase in the size of the selected dot
static const double _kMaxZoom = 2.0;
// The distance between the center of each dot
static const double _kDotSpacing = 25.0;
Widget _buildDot(int index) {
double selectedness = ansform(
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: ,
children: new List<Widget>.generate(itemCount, _buildDot),
);
}
}
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论