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

比如我这里

相关推荐
yuanlaile3 小时前
2026年全新Flutter 跨平台开发全栈学习资料整理
flutter·getx·鸿蒙 next·flutter开发鸿蒙·flutter入门实战·flutter全栈
恋猫de小郭13 小时前
Genkit Dart 1.0 发布,Flutter 原生的 AI Agent 终于完整了
android·前端·flutter
第10086个小白13 小时前
flutter桌面端打包方式(Inno Setup Compiler)版本
前端·flutter
陆断枫1 天前
Flutter 3.47 动画引擎盘点:Impeller 全平台,和那些"新特性"
flutter
程序员老刘1 天前
Flet 1.0 思路很好,可惜来晚了
flutter·ai编程·客户端
m0_738185822 天前
Flutter 鸿蒙化实战:qr_code_scanner_plus 适配 OpenHarmony,二维码扫描
flutter·华为·harmonyos·鸿蒙
恋猫de小郭2 天前
Flutter + EmbeddingGemma 2,谷歌发布完全端侧的 AI Edge Foresight
android·前端·flutter
君赏2 天前
基于 FlutterPatch 快速接入 Flutter 热更新
flutter
律宏阔2 天前
Dart FFI 内存管理:用 using + Arena 替代嵌套 try-finally
前端·flutter
律宏阔2 天前
Flutter 调用 Go:从 c-shared + ffigen 到 @Native + Native Assets 踩坑记录
前端·flutter