Flutter实现滚动选择数字

 更新时间:2022年03月22日 16:43:13   作者:Bob康康  
这篇文章主要为大家详细介绍了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 刘海屏适配总结(推荐)

    Android 刘海屏适配总结(推荐)

    这篇文章主要介绍了Android 刘海屏适配总结(推荐),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • Android使用SoundPool实现播放音效

    Android使用SoundPool实现播放音效

    这篇文章主要为大家详细介绍了Android使用SoundPool实现播放音效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • Android 中WebView 截图的实现方式

    Android 中WebView 截图的实现方式

    这篇文章主要介绍了Android 中WebView 截图的实现方式,WebView 作为一种特殊的控件,自然不能像其他系统 View 或者截屏的方式来获取截图。本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧
    2017-12-12
  • Android微信Tinker热更新详细使用

    Android微信Tinker热更新详细使用

    这篇文章主要介绍了Android微信Tinker热更新的详细使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • Android Selector获取焦点后文本背景修改的实现代码

    Android Selector获取焦点后文本背景修改的实现代码

    这篇文章主要介绍了Android Selector获取焦点后文本背景修改的实现代码,本文通过demo展示和实现代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • Android多国语言转换Excel及Excel转换为string详解

    Android多国语言转换Excel及Excel转换为string详解

    这篇文章主要给大家介绍了关于Android多国语言转换Excel以及Excel转换为string的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧
    2019-01-01
  • Android中post和get的提交方式【三种】

    Android中post和get的提交方式【三种】

    本文主要对Android中三种POST和GET的提交方式进行详细介绍。通过任何一种方式可以实现的功能是,从安卓手机端提交数据到服务器端,服务器端进行判断,并返回相应的结果。三种方式各有利弊,实现效果相同,在实际的使用过程中可以根据本身的需要进行选择。
    2016-12-12
  • Android XML数据解析要点介绍

    Android XML数据解析要点介绍

    这篇文章主要为大家介绍了Android XML数据解析要点介绍,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • Android Camera开发实现可复用的相机组件

    Android Camera开发实现可复用的相机组件

    这篇文章主要为大家详细介绍了Android Camera开发实现可复用的相机组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • Android AccessibilityService 事件分发原理分析总结

    Android AccessibilityService 事件分发原理分析总结

    这篇文章主要介绍了Android AccessibilityService 事件分发原理分析总结,AccessibilityService有很多用来接收外部调用事件变化的方法,这些方法封装在内部接口Callbacks中,文章围绕AccessibilityService相关资料展开详情,需要的朋友可以参考一下
    2022-06-06

最新评论