Flutter滚动选择数字
Bob康康 人气:0前言
本来想百度查的,结果没查到,只有自己写,顺便记录一下,加深印象
页面需求要用户输入页码,之前选择的是使用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的同学。
加载全部内容