Flutter滚动组件之SingleChildScrollView使用详解

 更新时间:2022年03月22日 15:16:30   作者:PuTTY本无树  
这篇文章主要为大家详细介绍了Flutter滚动组件之SingleChildScrollView使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

SingleChildScrollView

SingleChildScrollView类似于Android中的ScrollView,它只能接收一个子组件。定义如下:

const SingleChildScrollView({
    Key key,
    this.scrollDirection = Axis.vertical,
    // 是否按照阅读方向相反的方向滑动,如:scrollDirection值为Axis.horizontal,如果阅读方向是从左到右(取决于语言环境,阿拉伯语就是从右到左)。
    // reverse为true时,那么滑动方向就是从右往左。其实此属性本质上是决定可滚动组件的初始滚动位置是在“头”还是“尾”,取false时,初始滚动位置在“头”,反之则在“尾”。
    this.reverse = false,
    this.padding,
    // 指是否使用widget树中默认的PrimaryScrollController;当滑动方向为垂直方向(scrollDirection值为Axis.vertical)并且没有指定controller时,primary默认为true.
    bool primary,
    this.physics,
    this.controller,
    this.child,
    this.dragStartBehavior = DragStartBehavior.start,
  }) : assert(scrollDirection != null),
       assert(dragStartBehavior != null),
       assert(!(controller != null && primary == true),
          'Primary ScrollViews obtain their ScrollController via inheritance from a PrimaryScrollController widget.'
          'You cannot both set primary to true and pass an explicit controller.'
       ),
       primary = primary ?? controller == null && identical(scrollDirection, Axis.vertical),
       super(key: key);

除了在简介我们介绍过的可滚动组件的通用属性外,我们重点看一下reverse和primary两个属性:

  • reverse:该属性API文档解释是:是否按照阅读方向相反的方向滑动,如:scrollDirection值为Axis.horizontal,如果阅读方向是从左到右(取决于语言环境,阿拉伯语就是从右到左)。reverse为true时,那么滑动方向就是从右往左。其实此属性本质上是决定可滚动组件的初始滚动位置是在“头”还是“尾”,取false时,初始滚动位置在“头”,反之则在“尾”,可以自己试验。
  • primary:指是否使用widget树中默认的PrimaryScrollController;当滑动方向为垂直方向(scrollDirection值为Axis.vertical)并且没有指定controller时,primary默认为true

需要注意的是,通常SingleChildScrollView只应在期望的内容不会超过屏幕太多时使用,这是因为SingleChildScrollView不支持基于Sliver的延迟实例化模型,所以如果预计视口可能包含超出屏幕尺寸太多的内容时,那么使用SingleChildScrollView将会非常昂贵(性能差),此时应该使用一些支持Sliver延迟加载的可滚动组件,如ListView。

示例:

下面是一个将大写字母A-Z沿垂直方向显示的例子,由于垂直方向空间会超过屏幕视口高度,所以我们使用SingleChildScrollView:

class SingleChildScrollViewTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    return Scrollbar( // 显示进度条
      child: SingleChildScrollView(
        padding: EdgeInsets.all(16.0),
        child: Center(
          child: Column( 
            //动态创建一个List<Widget>  
            children: str.split("") 
                //每一个字母都用一个Text显示,字体为原来的两倍
                .map((c) => Text(c, textScaleFactor: 2.0,)) 
                .toList(),
          ),
        ),
      ),
    );
  }
}

运行效果如图:

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

相关文章

  • Flutter状态管理Provider的使用示例详解

    Flutter状态管理Provider的使用示例详解

    这篇文章主要为大家介绍了Flutter状态管理Provider的使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • Android中微信小程序支付倒计时功能

    Android中微信小程序支付倒计时功能

    大家在使用微信的时候都注意过微信支付倒计时功能,怎么实现的呢?今天小编给大家分享微信小程序支付倒计时功能实现思路详解,一起看看吧
    2016-12-12
  • Android开发技巧之像QQ一样输入文字和表情图像

    Android开发技巧之像QQ一样输入文字和表情图像

    QQ聊天输入框,在输入框中可以同时输入文字和表情图像。实际上,这种效果在Android SDK中只需要几行代码就可以实现,本文将会介绍如何实现像QQ一样输入表情图像
    2013-01-01
  • Android星级评分条的实现代码

    Android星级评分条的实现代码

    这篇文章主要为大家详细介绍了Android星级评分条的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • Android自定义view实现左滑删除的RecyclerView详解

    Android自定义view实现左滑删除的RecyclerView详解

    RecyclerView是Android一个更强大的控件,其不仅可以实现和ListView同样的效果,还有优化了ListView中的各种不足。其可以实现数据纵向滚动,也可以实现横向滚动(ListView做不到横向滚动)。接下来讲解RecyclerView的用法
    2022-11-11
  • Android自定义Drawable实现圆角效果

    Android自定义Drawable实现圆角效果

    这篇文章主要为大家详细介绍了Android自定义Drawable实现圆角效果,实现一个圆形和圆角的背景图片效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • Android实现水波纹特效

    Android实现水波纹特效

    这篇文章主要为大家详细介绍了Android实现水波纹特效,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-01-01
  • Android关于BottomNavigationView使用指南

    Android关于BottomNavigationView使用指南

    本文主要介绍了Android关于BottomNavigationView使用指南,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • Android实现按钮拖拽还原功能

    Android实现按钮拖拽还原功能

    这篇文章主要介绍了Android按钮拖拽还原功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • Android实现左右滑动切换图片

    Android实现左右滑动切换图片

    这篇文章主要为大家详细介绍了Android实现左右滑动切换图片,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05

最新评论