Flutter实现滚动选择数字
作者：Bob康康
这篇文章主要为大家详细介绍了Flutter实现滚动选择数字，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Flutter实现滚动选择数字的具体代码，供大家参考，具体内容如下
前言
本来想百度查的，结果没查到，只有自己写，顺便记录一下，加深印象
页面需求要用户输入页码，之前选择的是使用TextField。后来觉得用showDialog弹出选项，让用户自己选择。类似这样的：
确定了样式就开始写吧。关于Dialog的选择，我用的是SimpleDialog，有对细节上有要求的可以自己自定义一个。
showDialog(
context: context,
barrierDismissible: true,
builder: (ctx){
return SimpleDialog(
title: Text('页码选择'),
contentPadding: EdgeInsets.zero,
children: [
PageChoose(changeBookIdCallBack: (pageNum2){
setState(() {
pageNum = pageNum2;
});
}),
Divider(height: 1,),
FlatButton(
child: Text('取消'),
onPressed: () {
Navigator.of(context).pop();
},
),
Divider(height: 1,),
FlatButton(
child: Text('确认'),
onPressed: () {
}));
},
),
],
);
}
);我将contentPadding设置为零，看着舒服点。目前已经完成一部分了，还差中间的滚动选择数字。
新建文件，创建一个StatelessWidget组件，这里不需要用到StatefulWidget，用不到setState。滚动数字我首先想到的是PageView组件，将它的scrollDirection变为Axis.vertical,就可以实现上下的滑动，这里我需要预览当前前后两个数字，在设置PageController的时候就需要给viewportFraction值，这里我给了0.3，具体看你给组件的宽高。
class PageChoose extends StatelessWidget {
PageChoose({this.changeBookIdCallBack});
final ValueChanged<int> changeBookIdCallBack;
final PageController pagecontroller = new PageController(viewportFraction: 0.3,initialPage: 1);
@override
Widget build(BuildContext context) {
return Center(
child: Container(
alignment: Alignment.center,
height: 150,
width: 60,
child: Stack(
children: [
Center(
child: Container(
height: 50,
decoration: BoxDecoration(
border: Border(top: BorderSide(width: 0.5),bottom: BorderSide(width: 0.5))
),
),
),
PageView.builder(
itemCount: 50,
controller: pagecontroller,
scrollDirection: Axis.vertical,
pageSnapping: true,
physics: AlwaysScrollableScrollPhysics(),
itemBuilder: (ctx ,index ){
return Center(child: Text('$index',style: TextStyle(fontSize: 20),));
},
onPageChanged: (int index) {
changeBookIdCallBack(index);
},
),
],
),
),
);
}
}我还给组件加了子传父的方法，这样在选完后直接传值给父页面。这样就完成了。
总结
希望可以帮到初学Flutter的同学。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。