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

比如我这里

相关推荐
年小个大14 小时前
受 go-zero 启发,我给 Flutter 写了一套 CLI 脚手架
android·flutter·架构
GitLqr1 天前
Flutter 居然能直接跑在 Apple Watch 上了?玩转 flutter-watchos
flutter·全栈·apple watch
你听得到111 天前
排查 App 问题:别只盯着报错,把前后发生的事情串起来
android·前端·flutter
天空之城--1 天前
近一周Android Flutter行业动态与实用参考
android·flutter
GitLqr2 天前
玩转 Flutter 项目依赖:从 pubspec.yaml 到实战包管理
flutter·面试·全栈
程序员老刘2 天前
Qwen 3.8 max干了20分钟没干完,免费模型3分17秒搞定,问题出在哪?
flutter·ai编程
飞凌嵌入式2 天前
告别多端重复开发:Buildroot+Flutter实现全平台UI风格统一
flutter·ui
FungLeo2 天前
Flutter 带 TTL 的多级缓存设计:内存+磁盘+网络三层实战
网络·flutter·缓存·性能优化
FungLeo2 天前
Flutter 可复用公共组件库设计与落地:AppDialog/BottomSheet 等实战
flutter
Fungleo1069973 天前
Flutter/Android Release 包连不上网?AndroidManifest INTERNET 权限排查实录
flutter