flutter windows RawScrollbar 修改ListView SingleChildScrollView滚动条样式

最新推荐文章于 2024-05-13 22:42:05 发布
最新推荐文章于 2024-05-13 22:42:05 发布
阅读量651 收藏
点赞数
分类专栏： Flutter 文章标签： flutter windows Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wan903531306/article/details/129662804
版权
当默认滚动条样式不满足需求时，可以使用Flutter的RawScrollbar组件来定制。设置包括child（滚动组件）、controller（避免报错）、color（滚动条颜色）和thumbVisibility（是否始终显示滚动条）。其他属性可以根据类中的英文说明进行调整，以实现所需效果。
摘要由CSDN通过智能技术生成

在开中组件自带的滚动条的样式不能满足当前的产品要求或者UI设计，那该如何修改滚动条的样式呢！

使用 RawScrollbar 来修改样式

看到此类有很多属性可以设置滚动条的样式，

child:你的滚动组件

controller：这个一般必须设置不然会报此错误

The Scrollbar's ScrollController has no ScrollPosition attached.

color:颜色

thumbVisibility：是否在列表有数据有直接就显示滚动条，在windows上，默认都是鼠标悬停或者滚动才显示滚动条，通过这个属性设置直接显示滚动条

别的属性我就不过多的介绍了，类中下边每个属性都有英文介绍，自己看看，也大概懂了

我想吃辣条
关注
专栏目录
android使用flutter的ListView实现滚动列表的示例代码
08-26
Android 使用 Flutter 的 ListView 实现滚动列表的示例代码 Android 使用 Flutter 的 ListView 可以轻松实现滚动列表的功能。滚动列表是一种常见的 UI 组件，例如头条、微博等 App 都会使用滚动列表来展示大量数据...
Flutter ListView组件详解及其使用（Scrollable）
Lastdoggod的博客
08-14 3003
Flutter ListView组件详解及其使用（Scrollable）
【无标题】
weixin_47880898的博客
12-28 517
SingleChildScrollView当滑动方向为垂直方向（scrollDirection值为。.vertical）并且没有指定controller时，primary默认为true。直接使用Scrollbar就会报错。而改变滑动方向成水平方向后，
Flutter Scrollbar滑动条与SingleChildScrollView的结合使用的小细节
代码小疯子
01-11 1339
我在业务开发中，ListView是竖向滑动的，然后 ListView中的每一个小条目比较长，我需要横向滑动，所以 就有了 ListView中多个SingleChildScrollView(横向滑动)，但是在视觉上，我期望告知用户可以横向滑动，所以有了 Scrollbar 结合 SingleChildScrollView 来使用。但是两者来使用，多多少少会有点问题，本文章记录小问题。先来看下我的效果最终的核心代码是。
Flutter 笔记 | Flutter 可滚动组件
川峰的博客
05-26 4341
Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚
【Flutter实战】自定义滚动条
老孟Flutter
06-29 6404
老孟导读：【Flutter实战】系列文章地址：http://laomengit.com/guide/introduction/mobile_system.html 默认情况下，Flutter 的滚动组件（比如 ListView）没有显示滚动条，使用 Scrollbar 显示滚动条： Scrollbar( child: ListView.builder( reverse: false, itemBuilder: (BuildContext context, int index) { ..
Flutter – ListView2 – 复杂样式 – weidget抽离
01-08
json_to_dart -在线生成model...Flutter滚动型容器组件 – ListView篇 ###效果图 ListViewTest_CustomVC 代码 (for循环造假数据) import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart
Android通过代码控制ListView上下滚动的方法
01-06
本文将介绍一种通过代码控制ListView上下滚动的方法。 先上图： 按下按钮会触发ListView滚动或停止。 实现该功能并不难，下面给出主要代码MainActivity.java package cn.guet.levide; import android.app.Activity...
Flutter入门：教程4 ListView
04-08
在本篇Flutter入门教程中，我们将深入探讨ListView控件，它是Flutter SDK中一个非常重要的组件，用于构建可滚动的列表视图。ListView适用于显示大量数据，例如应用中的用户列表、商品目录或者任何需要滚动查看的长...
flutter Listview可滚动组件
qq_45317844的博客
11-08 897
flutter Listview可滚动组件
Flutter第十弹 ScrollView滚动组件
joedan0104的专栏
04-16 2332
目标：1）滚动组件的特性？2）有哪些常用的滚动组件？
flutter 使用Scrollbar 时出现滚动条不置顶问题
q515656712的博客
05-13 542
Flutter 使用 CupertinoScrollbar 、Scrollbar 与 ListView.builder 结合使用时， 当把 ListView.builder 边距设置为 padding: const EdgeInsets.all(0) 的时候， Scrollbar 的滚动条不置顶。如图：右侧边上的滚动条。
Flutter两个ListView同步滚动。
C201008的专栏
04-20 1511
这里先添加Google开发团队开发的依赖库。
Flutter 中的 SingleChildScrollView 小部件：全面指南
smileKH的博客
05-13 1998
/ ... 使用 ListView.builder 构建列表),),// ... 多个 Widget),是 Flutter 中处理单一可滚动内容的核心小部件，它提供了灵活的滚动选项，使得在 Flutter 应用中实现滚动视图变得简单而高效。掌握的使用，可以帮助你创建出既美观又实用的滚动界面。
Flutter - SingleChildScrollView
a136447572的专栏
12-13 956
SingleChildScrollView类似于Android中的ScrollView，它只能接收一个子组件。
滚动条基本样式设置
神膘护体小月半的博客
12-26 8059
滚动条基本样式设置
使用Scrollbar时，提示“flutter: Interceptor: ══╡ EXCEPTION CAUGHT BY ANIMATION LIBRARY ╞═══”
qq_40467670的博客
01-31 598
问题如图所示，我写了一个小例子，来学习。
Flutter 滚动组件ListView,GridView,Sliver以及滚动监听
github_36850997的博客
04-17 1862
身是菩提树 心是明镜台 时时勤拂拭 模式染尘埃这玩意不难，就是东西多。。。
Flutter（六）可滚动组件
Sir的专栏
04-10 3775
Scrollable ：用于处理滑动手势，根据滑动偏移构建 Viewport。Viewport：显示的视窗，即列表的可视区域；Sliver：视窗里显示的元素。具体布局过程：Scrollable 监听到滑动后，根据滑动偏移构建 Viewport ，Viewport 将当前视图信息和配置信息通过 SliverConstraints 传递给 Sliver，Sliver 中对子组件按需进行构建和布局。顶部和底部灰色的区域为。
flutter listview 上下滚动 列表整行滚动
最新发布
07-19
在 Flutter 中，ListView 提供了一种灵活的方式来实现上下滚动。要实现列表整行滚动，你可以使用 `SliverList` 组件配合 `ScrollPhysics` 和适当的 `CrossAxisScrollbar`。这允许你在滑动时保持整个列表项而不是单个项目移动。以下是一个简单的示例： ```dart // 使用 SliverList 替代 ListView return SliverList( delegate: SliverChildBuilderDelegate( (context, index) { return ListTile( title: Text('Item ${index + 1}'), // 其他列表项内容... ); }, builderExtent: const Size.fromHeight(kListRowHeight), // 假设 kListRowHeight 是每个列表项的高度 ), physics: BouncingScrollPhysics(), // 或者根据需要选择其他滚动效果 ); // 如果你想在屏幕边缘添加滚动条，可以这样配置： return SliverList( ... scrollDirection: Axis.vertical, shrinkWrap: true, // 让列表只扩展到内容大小 scrollbar: AlwaysScrollableScrollController(), ); ``` 当用户滚动时，整个列表会一起移动，从而达到整行滚动的效果。如果你需要在软键盘弹出时自动滚动到最后一项，可以监听键盘事件并相应地调整 `ListView` 的位置，就像第二个引用中的解决方案那样： ```dart FocusNode focusNode = FocusNode(); TextEditingController textEditingController = TextEditingController(); // 在构建 ListView 之前设置焦点节点 TextField( controller: textEditingController, focusNode: focusNode, // 添加其他属性... ) // 监听键盘事件 focusNode.addListener(() { if (textEditingController.has焦点 && !KeyboardManager.isKeyboardShowing()) { // 当失去焦点且键盘隐藏时，滚动到底部 setState(() { List<Widget> items = _items.toList(); // 获取当前列表项 final lastItemIndex = items.length - 1; double offset = lastItemIndex * kListRowHeight; // 假设高度与之前一致 // 设置 ListView 的 ScrollPosition 的 offset Scrollable.of(context).position.animateTo( ScrollPosition.withOffset(offset), duration: Duration(milliseconds: 200), ); }); } }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我想吃辣条

觉得不错，就可怜可怜博主吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值