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的同学。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。