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的同学。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
Android Selector获取焦点后文本背景修改的实现代码
这篇文章主要介绍了Android Selector获取焦点后文本背景修改的实现代码,本文通过demo展示和实现代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2019-11-11
Android多国语言转换Excel及Excel转换为string详解
这篇文章主要给大家介绍了关于Android多国语言转换Excel以及Excel转换为string的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧2019-01-01
Android AccessibilityService 事件分发原理分析总结
这篇文章主要介绍了Android AccessibilityService 事件分发原理分析总结,AccessibilityService有很多用来接收外部调用事件变化的方法,这些方法封装在内部接口Callbacks中,文章围绕AccessibilityService相关资料展开详情,需要的朋友可以参考一下2022-06-06


最新评论