Flutter怎么实现滚动选择数字

这篇"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 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怎么实现滚动选择数字"这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注行业资讯频道。