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(),

比如我这里

相关推荐
阅文作家助手开发团队_山神1 小时前
第四章(下):Delta 到 HTML 转换的核心方法解析
flutter
xiaoyan20154 小时前
flutter3.32+deepseek+dio+markdown搭建windows版流式输出AI模板
flutter·openai·deepseek
阅文作家助手开发团队_山神4 小时前
第四章(上):HTML 到 Delta 转换的核心方法解析
flutter
stringwu4 小时前
Flutter高效开发利器:Riverpod框架简介及实践指南
flutter
耳東陈4 小时前
Flutter开箱即用一站式解决方案2.0-全局无需Context的Toast
flutter
阅文作家助手开发团队_山神20 小时前
第三章: Flutter-quill 数据格式Delta
flutter
阅文作家助手开发团队_山神20 小时前
第二章:Document 模块与 DOM 树详解
flutter
程序员老刘21 小时前
20%的选择决定80%的成败
flutter·架构·客户端
肥肥呀呀呀1 天前
flutter 中Stack 使用clipBehavior: Clip.none, 超出的部分无法响应所有事件
flutter
SY.ZHOU1 天前
Flutter如何支持原生View
flutter