Flutter Scrollbar滑动条与SingleChildScrollView的结合使用的小细节

我在业务开发中,ListView是竖向滑动的,然后 ListView中的每一个小条目比较长,我需要横向滑动,所以 就有了 ListView中多个SingleChildScrollView(横向滑动),但是在视觉上,我期望告知用户可以横向滑动,所以有了 Scrollbar 结合 SingleChildScrollView 来使用。

但是两者来使用,多多少少会有点问题,本文章记录小问题。 先来看下我的效果

最终的核心代码是

dart 复制代码
    Scrollbar(
      thickness: 2.0,//滑动条的高度
      interactive: true,//滑动条为true 可拖动
      isAlwaysShown: true,//一直显示滑动条
      controller: ScrollController(),//滑动条使用的控制器
      child: SingleChildScrollView(
        scrollDirection : Axis.horizontal,
        primary: true,
        physics: const BouncingScrollPhysics(),
        child: Row(
          children: [...此处省略],
        ),
      ),
    ),

1 错误一 The Scrollbar's ScrollController has no ScrollPosition attached.

解决方法就是设置一下滑动组件的 primary 属性为 true

2 错误二 Failed assertion: line 243 pos 14: 'notification.metrics.axis == widget.axis': is not true.

我要在一个页面循环渲染多个ListView、SingleChildScrollView 横向滚动组件,导致了滚动手势监听溢出冲突的问题 解决方法就是 设置一下 physics 属性值

dart 复制代码
physics: const BouncingScrollPhysics(),

比如我这里

相关推荐
qq_2468397533 分钟前
记一次 Flutter 预热帧引起的初始化问题
android·flutter
心中有国也有家1 小时前
AtomGit Flutter 鸿蒙客户端:MoodStorage 的 CRUD 集成验证
android·服务器·flutter·华为·harmonyos
心中有国也有家2 小时前
AtomGit Flutter 鸿蒙客户端:错误处理与优雅降级策略
android·javascript·flutter·华为·harmonyos
左有道18 小时前
用 Flutter 做一个更顺手的日历组件:calendarview_flutter
flutter
一枚菜鸟_20 小时前
Flutter + Cursor 一天出 App?这 3 个坑让开发者多花了 3 小时
flutter·cursor
心中有国也有家1 天前
AtomGit Flutter 鸿蒙客户端:零外部资源的应用打包策略
android·javascript·flutter·华为·harmonyos
心中有国也有家1 天前
AtomGit Flutter 鸿蒙客户端:为 E-Brufen 注入情感节律的文案设计哲学
javascript·学习·flutter·华为·harmonyos
恋猫de小郭1 天前
Fluter 共享内存多线程正在落地,IsolateGroupBound 来了
android·前端·flutter
太子釢2 天前
Flutter 与 Native 混合开发策略调研与方案对比
flutter
西西学代码2 天前
Flutter---Stack
flutter