这篇“Flutter怎么实现滚动选择数字”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Flutter怎么实现滚动选择数字”文章吧。
类似这样的：
确定了样式就开始写吧。关于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怎么实现滚动选择数字”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。
