带控制器的SingleChildScrollView不会第一次滚动

是因为控制器的初始滚动位置没有被设置。

SingleChildScrollView是一个用于展示可滚动内容的组件，但它本身不具备滚动的功能。为了使SingleChildScrollView具备滚动能力，我们需要将它包裹在一个ScrollController中，并通过控制器来控制滚动的位置。

在第一次滚动时，如果我们没有显式地给控制器设置初始滚动位置，那么SingleChildScrollView不会进行滚动。这是因为控制器的默认初始滚动位置是0，而SingleChildScrollView在第一次滚动时并不会自动将内容滚动到顶部。

要解决这个问题，我们可以通过在控制器上调用jumpTo方法或animateTo方法来设置初始滚动位置。例如，我们可以将控制器的初始滚动位置设置为一个较小的负值，从而将内容滚动到顶部。

以下是一个示例代码片段，展示如何使用带控制器的SingleChildScrollView并设置初始滚动位置为顶部：

ScrollController _controller = ScrollController(initialScrollOffset: -1);

SingleChildScrollView(
  controller: _controller,
  child: // 内容部分
)

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云移动开发平台：https://cloud.tencent.com/product/baas
腾讯云服务器托管：https://cloud.tencent.com/product/cvm
腾讯云云原生应用平台：https://cloud.tencent.com/product/tke
腾讯云音视频服务：https://cloud.tencent.com/product/tcvs
腾讯云数据库服务：https://cloud.tencent.com/product/cdb
腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
腾讯云存储服务：https://cloud.tencent.com/product/cos
腾讯云区块链服务：https://cloud.tencent.com/product/tbc
腾讯云元宇宙服务：https://cloud.tencent.com/product/tencent-virtual-universe
腾讯云安全服务：https://cloud.tencent.com/product/safety

相关·内容

师于源码 | Flutter 区域视口双向滑动

比如 AndroidStudio 的文件树和编辑器区域，当宽度较窄时，水平方向通过拖拽底部滚动条来滚动视口。...竖直方向上的滑动控制器是 textController ，在 tag3 处和 Lines 组件绑定，也就是说 Lines 是一个竖直滚动的可滑动组件；水平方向上的滑动控制器是 horizontalController...，在 tag4 处和 SingleChildScrollView 组件绑定，支持横向的滚动。...如下所示，蓝色区域内有一行文字，当窗口宽度缩小到文本溢出时，底部会呈现滑动条支持水平滑动：这里先总结一下实现区域视口的双向滚动的步骤: 需要两个可滑动的视口: SingleChildScrollView...tag1 和 tag1 处是给出两个 Scrollbar，并绑定对应方向上的的滑动控制器; tag5 处对水平方向宽度约束的处理; tag6 处对竖直方向滚动条进行处理。

4972 0

Flutter 分页功能表格控件

老孟导读：前2天有读者问到是否有带分页功能的表格控件，今天分页功能的表格控件详细解析来来。...PaginatedDataTable PaginatedDataTable是一个带分页功能的DataTable，生成一批数据，项目中此一般通过服务器获取，定义model类： class User {...显示的数据过多时，需要将PaginatedDataTable包裹在SingleChildScrollView中，滚动显示数据： SingleChildScrollView( child: PaginatedDataTable...，数据并不会实际排序，对数据进行排序可以当用户点击表头时对数据按照本列数据进行排序，用法如下， var _sortAscending = true; _buildPaginatedDataTable(...，使用SingleChildScrollView包裹，显示不全时滚动显示，用法如下： SingleChildScrollView( scrollDirection: Axis.horizontal,

1.9K3 1

Flutter跨平台移动端开发丨SingleChildScrollView、ListView......

---- SingleChildScrollView（可滑动 View） SingleChildScrollView 类似 Android 中的 scrollview ，且同样的只可包含有一个子元素...controller：控制器对象，主要作用是控制滚动位置和监听滚动事件 primary：是否使用 widget 树中默认的 PrimaryScrollController 。...（在懒加载时，如果设置了包裹那么在此列表项滑出屏幕外时不会被GC。...controller：控制器对象，主要作用是控制滚动位置和监听滚动事件 primary：是否使用 widget 树中默认的 PrimaryScrollController 。...---- ScrollController（控制器）可设置滑动 View 的滚动位置，还可监听并获取滑动 View 的滚动状态及数据 ScrollController({ double initialScrollOffset

8.7K5 1

Flutter SingleChildScrollView 滚动控件

Flutter中的SingleChildScrollView类似于Android中的ScrollView，它只能接收一个子组件。...}) SingleChildScrollView常用属性值含义 scrollDirection 滚动方向，默认是垂直方向 reverse 决定可滚动组件的初始滚动位置是在“头”还是“尾”，false在...需要注意的是，通常SingleChildScrollView只应在期望的内容不会超过屏幕太多时使用，这是因为SingleChildScrollView不支持基于Sliver的延迟实例化模型，所以如果预计视口可能包含超出屏幕尺寸太多的内容时...，那么使用SingleChildScrollView将会非常昂贵（性能差），此时应该使用一些支持Sliver延迟加载的可滚动组件，如ListView。...可滚动组件中有很多都支持基于Sliver的延迟构建模型，如ListView、GridView，但是也有不支持该模型的，如SingleChildScrollView。

5.1K0 0

Flutter问题：Column里面嵌套两个SingleChildScrollView无法滚动

1、问题：今天测试SingleChildScrollView的时候，发现在Column里面嵌套两个SingleChildScrollView时，第二个SingleChildScrollView无法滚动...3、解决办法：在无法滚动的SingleChildScrollView控件外面嵌套一个Expanded控件。 Expanded控件会自适应子控件大小，子控件有多大就有多大。...children: str .split("") //每一个字母都用一个Text显示,字体为原来的两倍...children: str .split("") //每一个字母都用一个Text显示,字体为原来的两倍..., ) ], )); } } void main() { runApp(new MaterialApp( title: "滚动控件案例

3.9K1 0

Flutter实现webview与原生组件组合滑动的示例代码

, 不过这里webview自带滚动条, 滚动时是不带着title一块的....所以才需要使用与 SingleChildScrollView 相冲突的 Expanded , 所以这个问题变为了如何获取WebView的高度 ....获取WebView的高度在android中不会有这个破问题, 给 webview 设置 wrap_content 就可以了, 但是在Flutter中我没有找到类似布局方式....闪退时AndroidStudio不会展示错误日志, 通过 flutter run --verbose 命令运行可以获取到错误信息, 大体看了下是Flutter渲染的问题, 先反馈给官方以及 flutter_inappbrowser...使用此切分方案的前提是: body内部的html标签不会有超大范围的div包裹, 否则单个标签内容就超过高度了.

2.9K2 0

Flutter | 滚动组件，ListView，GridVIew等

风格的滚动指示器(滚动条)，如果要给可滚动组件添加滚动条，只需要将 Scroolbar 作为可滚动组件的任意一个父级组件即可，如： Scrollbar( child: SingleChildScrollView...可滚动组件中有很多都支持 Sliver 的延时构建模型，如 ListView，GridView ，但是也有不支持改模型的 SingleChildScrollView 主轴和纵轴在滚动组件的坐标描述中，...由于可滚动组件的默认方向一般都是沿垂直方向，所以默认情况下主轴就是指垂直方向，水平方向同理 SingleChildScrollView SingleChildScrollView 类似于 Android...需要注意的是，通常 SingleChildScrollView 只应用在期望内容不会超过屏幕太多时使用，这是因为 SingleChildScrollView 不支持 Sliver 的延时实例初始化模型...组件中；典型的，在一个懒加载的列表中，如果将列表包裹在 AutomaticKeepAlive 中，在改了吧划出视口时，他也不会被 GC 回收(垃圾回收)，他会使用 KeepAliveNotification

8.5K2 0

我什么都不会，进来玩的求大神带我飞。

我进来花了好几百快钱了就是搞不懂这个云计算是不是是不是万物想连的意思，用科技去创新，用互联网去创新的意思。好迷茫哦我只是一个高中毕业的5年通讯的小破孩，现在就是干业务，策划。...这个好深奥哦，有大神带我飞吗物联网就是把实物和网络想连接的意思，需要搭载物联网需要网络通讯设施强大有线是基础，无线是拓展。做到随时随地高效办公是不是？哦我玩的太杂了，不纯洁了。

4691 0

flutter - 如何在SingleChildScrollView中实现非滚动 ListView

我试图在这里实现一个不可滚动的ListView构建器，但似乎找不到解决方法。原因是因为我希望所有内容都是可滚动的，并且我不想在可滚动的父级中拥有可滚动的小部件。...context) { return Scaffold( appBar: AppBar(title: Text('App Bar Here')), body: SingleChildScrollView...context) { return Scaffold( appBar: AppBar(title: Text('App Bar Here')), body: SingleChildScrollView...itemCount: 50, ), ),],),)); }} 将物理属性设置为NeverScrollablePhysics()以便不滚动

2.4K3 0

Flutter开发-可滚动组件

我们先介绍一下常用的可滚动组件（如ListView、GridView等） SingleChildScrollView SingleChildScrollView类似于Android中的ScrollView...你如果需要在两个方向上收缩包装（在滚动轴和横轴）例如 dialog或者 pop-up菜单，在这种情况下，你可以用SingleChildScrollView包裹孩子ListBody。...需要注意的是，通常SingleChildScrollView只应在期望的内容不会超过屏幕太多时使用，这是因为SingleChildScrollView不支持基于Sliver的延迟实例化模型，所以如果预计视口可能包含超出屏幕尺寸太多的内容时...，那么使用SingleChildScrollView将会非常昂贵（性能差），此时应该使用一些支持Sliver延迟加载的可滚动组件，如ListView。...：这两个方法用于跳转到指定的位置，它们不同之处在于，后者在跳转时会执行一个动画，而前者不会。

4.5K2 0

Flutter 入门指北之滑动部件（超详细）

那么这里提下可滑动的容器部件 SingleChildScrollView 这个部件非常简单，不贴源码了。最简单的使用方式只需要提供一个 child 即可。...现在给前面写的 Text 包裹上一层 SingleChildScrollView 然后再运行，文字全部都展示出来了。...如果需要实现一个垂直的滚动列表，可以直接通过 SingleChildScrollView 包裹 Column 来实现，列表内容全部塞到 Column 即可 class SingleChildScrollDemoPage...那么如果需要实现横向滚动列表呢，稍稍做下修改就行了 body: SingleChildScrollView( // 设置滚动方向 scrollDirection: Axis.horizontal...通过 ListView.builder 实现通过 ListView.separated 实现带分割线列表 ListView children 第一种方法实现列表，和通过 SingleChildScrollView

2.4K3 0

Flutter 文本溢出

在这篇文章中，我们将使用不同的方法来解决 Flutter 中文本的溢出问题。..., ), ], ), 当文本占据的位置比 Row 挂件的可用位置多的时候，文本溢出就会发生。解决方案 1...., ), ), ), ], ), 这会使得文本在一行滚动展示： 5....使用 SingleChildScrollView 挂件包裹 Text 挂件，并被放在 Expended 挂件中，然后设定垂直滚动 Row( children: [ Expanded(..., ), ), ), ), ], ), 如果文本放在 container中，并设定了高度，就像上面代码，设定了文本垂直滚动效果：以上就是全部的内容

2K4 1

《Flutter》-- 6.高级组件

6.1.3 SingleChildScrollView组件是一个只能包含单一子组件的可滚动组件，其作用类似于iOS的UIScrollView组件或Android的ScrollView组件。...只能应用于内容不会超过屏幕尺寸太多的情况，因为SingleChildScrollView组件目前还不支持基于Sliver的延迟加载，如果视图内容超出屏幕尺寸太多会导致性能问题。...SingleChildScrollView组件的构造函数： const SingleChildScrollView({ Key key, this.scrollDirection = Axis.vertical...ListView、GridView自带滚动模型，SliverList、SliverGrid不包含滚动模型，不会造成滚动冲突。...bool addAutomaticKeepAlives = true,//是否将列表项包裹在AutomaticKeepAlive组件中，默认值为true，表示列表项滑出视图窗口时不会被垃圾回收，会保存之前的状态

10.6K2 0

「0821更新」Flutter入门系列教程汇总

本系列持续更新中，欢迎关注我的博客：maomao.ink 环境搭建环境搭建（mac os为例）项目运行：Hello world 基础控件 Flutter Text（文本控件） Flutter Button...Image（图片控件） Flutter Icon IconFont（图标控件） Flutter Row、Column 线性布局 Flutter Stack、Positioned 层叠布局 Flutter SingleChildScrollView...滚动控件 Flutter ListView 列表控件New Flutter ListView 下拉刷新，上拉加载更多New Flutter GridView 网格控件New 常见问题 Flutter：...从网络获取数据遇到的坑 Flutter问题：Column里面嵌套两个SingleChildScrollView无法滚动 Flutter问题：import 'package:english_words/english_words.dart

1K2 0

Flutter Tips

UI CarDialog 、TaxiSuperRuleDialog示例 SingleChildScrollView 可以滚动，如果SingleChildScrollView嵌套SingleChildScrollView...，第二SingleChildScrollView需要加个Expanded 有问题的时候可以试试Expanded Expanded 平分加三个Expanded Scaffold( resizeToAvoidBottomInset...: true,）可以把布局顶上去，不会被输入法遮盖 Text.rich(TextSpan 一个textviwe不同颜色大小 RichText(text: TextSpan(...控件可以将动画执行中的变量值处理反馈在子控件上. ...为了获得良好的自动格式化，我们建议您采用可选的尾部逗号。添加尾随逗号很简单：始终在函数、方法和构造函数的参数列表末尾添加尾随逗号，以便保留您的编码格式。

5701 0

Flutter ListView 列表控件

ListView是最常用的可滚动组件之一，它可以沿一个方向线性排布所有子组件，并且它也支持基于Sliver的延迟构建模型。...Sliver的延迟构建模型请参见本系列文章《Flutter SingleChildScrollView 滚动控件》中的基本概念处。本文示例效果图（全） ?...addAutomaticKeepAlives 是否将列表项（子控件）包裹在AutomaticKeepAlive组件中，包含之后列表项滑出视口时它也不会被GC。...实际上通过此方式创建的ListView和使用SingleChildScrollView+Column的方式没有本质的区别。...可滚动组件的构造函数如果需要一个列表项Builder，那么通过该构造函数构建的可滚动组件通常就是支持基于Sliver的懒加载模型的，反之则不支持，其他可滚动组件亦是如此。

3.1K2 0

Flutter中使用flutter_html解析html文件

引入依赖在需要用到的该插件的文件中引入插件包。...当前页数 int _page = 1; // 页面数据 List _list = []; // 是否还有 bool _hasMore = true; // 滚动控制器..._getData(); // 监听滚动事件 _scrollController.addListener((){ // 获取滚动条下拉的距离...以下是点击新闻列表页跳转详情页的代码，这个页面中会用到解析html的插件。...appBar: AppBar( title: Text("新闻详情"), ), body: SingleChildScrollView

5.8K1 0

Flutter 遇到的坑

，当条目较少时(未占满一个屏幕)，ListView不能滚动，所以无法触发下拉刷新，给ListView的physice属性设置值为new AlwaysScrollableScrollPhysics()，让...AutomaticKeepAliveClientMixin { // with AutomaticKeepAliveClientMixin 并且get wantKeepAlive返回 true,tab切换时,不会每次执行...的最终字段中。...解决办法是使用SingleChildScrollView包装一下，原来的是这样： return new Scaffold( appBar: new AppBar( ... title: new Text("搜索"), ), //使用ScrollView包装一下，否则键盘弹出时会报错空间溢出 body: new SingleChildScrollView

1.6K2 0

不一样角度带你了解 Flutter 中的滑动列表实现

使用的是 SliverFillViewport；当然这里有一个特殊的是 SingleChildScrollView ，因为它是单个 child 的可滑动控件，它并没有使用 RenderSliver...里实现布局， Viewport 里的直属 children 也需要是 RenderSliver；那到这里你可能会有一个疑问：既然前面 SingleChildScrollView 里没有使用 RenderSliver...RenderBox 在 SingleChildScrollView 内部使用的是 RenderBox ，那么在布局过程中自然而然会把整个 child 都进行布局和计算，绘制时主要也是通过 offset...预布局”的区域，这个区域默认大小是 defaultCacheExtent= 250.0； ListView 高度为 701，defaultCacheExtent 为默认的 250，也就是得到第一次需要布局到底部的距离其实为...最后在 _NestedScrollCoordinator 的 drag 和 applyUserOffset 等方法里进行内外滚动的分配； ?

2.2K5 1

不一样角度带你了解 Flutter 中的滑动列表实现

使用的是 SliverFillViewport；当然这里有一个特殊的是 SingleChildScrollView ，因为它是单个 child 的可滑动控件，它并没有使用 RenderSliver...里实现布局」， Viewport 里的直属 children 也需要是 RenderSliver；那到这里你可能会有一个疑问：既然前面 SingleChildScrollView 里没有使用 RenderSliver...RenderBox 在 SingleChildScrollView 内部使用的是 RenderBox ，那么在布局过程中自然而然会把整个 child 都进行布局和计算，绘制时主要也是通过 offset ...「第一次需要布局到底部的距离其实为 951」，按照每个 item 高度是 114 ，那么其实是有 8.3 个 item 高度，取整数也就是 9 个 item ，最终得到整体需要处理的区域大小为 114...最后在 _NestedScrollCoordinator 的 drag 和 applyUserOffset 等方法里进行内外滚动的分配； image.png SliverPersistentHeader

1.1K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

带控制器的SingleChildScrollView不会第一次滚动

相关·内容

师于源码 | Flutter 区域视口双向滑动

Flutter 分页功能表格控件

Flutter跨平台移动端开发丨SingleChildScrollView、ListView......

Flutter SingleChildScrollView 滚动控件

Flutter问题：Column里面嵌套两个SingleChildScrollView无法滚动

Flutter实现webview与原生组件组合滑动的示例代码

Flutter | 滚动组件，ListView，GridVIew等

我什么都不会，进来玩的求大神带我飞。

flutter - 如何在SingleChildScrollView中实现非滚动 ListView

Flutter开发-可滚动组件

Flutter 入门指北之滑动部件（超详细）

Flutter 文本溢出

《Flutter》-- 6.高级组件

「0821更新」Flutter入门系列教程汇总

Flutter Tips

Flutter ListView 列表控件

Flutter中使用flutter_html解析html文件

Flutter 遇到的坑

不一样角度带你了解 Flutter 中的滑动列表实现

不一样角度带你了解 Flutter 中的滑动列表实现

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐