首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何让SwiftUI中的水平ScrollView在所包含的文本更新时自动滚动以结束

在SwiftUI中,可以使用ScrollView来创建一个水平滚动视图。要实现在文本更新时自动滚动到末尾,可以结合使用GeometryReaderScrollViewReader

首先,创建一个ScrollView并设置Axis.horizontal来创建一个水平滚动视图。然后,使用ScrollViewReader将其包裹,并在其中放置一个Text视图,用于显示文本内容。

Text视图外部使用GeometryReader来获取滚动视图的几何信息,并将其传递给ScrollViewReaderscrollTo方法。这样,当文本更新时,可以调用scrollTo方法来滚动到最后一个文本。

以下是一个示例代码:

代码语言:txt
复制
import SwiftUI

struct ContentView: View {
    @State private var text: String = ""
    
    var body: some View {
        VStack {
            ScrollView(.horizontal) {
                ScrollViewReader { scrollViewProxy in
                    GeometryReader { geometry in
                        Text(text)
                            .onChange(of: text) { newValue in
                                withAnimation {
                                    scrollViewProxy.scrollTo(text.count - 1, anchor: .trailing)
                                }
                            }
                            .frame(width: geometry.size.width)
                    }
                }
            }
            
            TextField("输入文本", text: $text)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

在这个示例中,我们创建了一个垂直的VStack,其中包含一个水平的ScrollView和一个TextField。当在TextField中输入文本时,Text视图会更新,并自动滚动到最后一个字符。

请注意,这只是一个简单的示例,你可以根据自己的需求进行修改和扩展。另外,这里没有提及腾讯云的相关产品,你可以根据自己的需求选择适合的腾讯云产品来支持你的应用。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Ask Apple 2022 与 SwiftUI 有关问答(下)

阅读 The SwiftUI Layout Protocol [11]了解如何创建自定义布局。创建从底部开始滚动视图Q:我如何实现一个在底部对齐滚动视图,在 macOS 上会不会有糟糕性能?...TextField 内容验证Q:如何实现一个只接受数字 SwiftUI TextField,小数是允许。A:向文本字段提供 FormatStyle 实现自动文本转换为各种数字。...但是,此转换仅在文本字段完成编辑才会发生,并且不会阻止输入非数字字符。目前 SwiftUI 没有 API 可以限制用户在字段输入字符。...image-20221023171100484滚动速度Q:有好方式在 List 和 ScrollView 滑动监听滑动 velocity 值么?...在 SwiftUI ,有一个从第一版开始就存在但尚未公开SwiftUI 实现滚动容器 —— _ScrollView

14.7K30

深入了解 SwiftUI 5 ScrollView 新功能

SwiftUI 5.0 ,苹果大幅强化了 ScrollView 功能。新增了大量新颖、完善 API。本文将对这些新功能进行介绍,希望能够它们更多、更早帮助到有需要开发者。...当 scrollClipDisable 为 false 滚动内容会被裁剪适应滚动容器边界。任何超出边界部分将不会显示。...可采用 优化在 SwiftUI List 显示大数据集响应效率[5] 一文中介绍方式来解决。 scrollPostion(id:) 使用此修饰符可以滚动视图滚动到特定位置。....automatic 是默认行为,在紧凑水平尺寸类受限,否则不受限。 .always 始终限制可滚动视图数量。 .never 不限制可滚动视图数量。...当子视图滑入和滑出包含滚动视图可视区域,scrollTransition 会对该视图应用给定过渡动画,并在不同阶段之间平滑地过渡。

67320

如何判断 ScrollView、List 是否正在滚动

比如在 SwipeCell[3] ,需要在可滚动组件开始滚动自动关闭已经打开侧滑菜单。遗憾是,SwiftUI 并没有提供这方面的 API 。...本文将介绍几种在 SwiftUI 获取当前滚动状态方法,每种方法都有各自优势和局限性。...: UIScrollView, willDecelerate decelerate: Bool)手指拖动结束后( 手指离开 ),调用此方法在 SwiftUI ,很多视图控件是对 UIKit( AppKit...判断准确度没有前两种方式高当可滚动组件内容出现了非滚动引起尺寸或位置变化( 例如 List 某个视图尺寸发生了动态变化 ),本方式会误判断为发生了滚动,但在视图变化结束后,状态会马上恢复到滚动结束滚动开始后...( 状态已变化为滚动 ),保持手指处于按压状态并停止滑动,此方式会将此时视为滚动结束,而前两种方式仍会保持滚动状态直到手指结束按压IsScrolling我将后两种解决方案打包做成了一个库 —— IsScrolling

3.7K40

掌握 ViewThatFits

最后,我们将创建一个复刻版本 ViewThatFits,加深对其认识和理解。 访问我博客 www.fatbobman.com[1] 可以获得更好阅读体验以及最新更新内容。...就布局而言,"理想尺寸"指的是当父视图未指定模式提供建议尺寸,视图返回需求尺寸。...ScrollView:如果理想状态轴与滚动方向一致,则在滚动方向上一次性展示所有的子视图而无视父视图建议尺寸。 VStack、HStack、ZStack:所有子视图在理想状态下整体呈现。...自适应滚动 通过下面的代码,我们可以实现在内容宽度超过给定宽度自动进入可滚动状态。...选择合适长度文本 这也是 ViewThatFits 最常被使用场景,从提供一组文本,找出最适合当前空间那个。

15710

WWDC 23 之后 SwiftUI 有哪些新功能

前言 WWDC 23 已经到来,SwiftUI 框架中有很多改变和新增功能。在本文中将主要介绍 SwiftUI 数据流、动画、ScrollView、搜索、新手势等功能新变化。...也不再需要 @Published 属性包装器,因为 SwiftUI 视图会自动跟踪任何可观察类型可用属性更改。...在之前 SwiftUI 框架版本,应该使用 @ObservedObject 属性包装器来订阅更改。现在不需要了,因为 SwiftUI 视图会自动跟踪符合 Observable 协议类型更改。...每当用户滚动视图,它会通过设置第一个可见视图标识来更新绑定。...还可以通过编程方式滚动到任何视图,但是,应该使用 scrollTargetLayout 视图修饰符来告诉 SwiftUI 框架在哪里查找标识更新绑定。

32320

如何SwiftUI 创建条形图

前言 条形图矩形条形式呈现数据类别,其宽度和高度与它们表示值成比例。本文将展示如何创建一个垂直条形图,其中矩形高度将代表每个类别的值。...系列文章 如何SwiftUI 创建条形图 SwiftUI 水平条形图 在 iOS 16 中用 SwiftUI Charts 创建一个折线图 在 iOS16 中用 SwiftUI 图表定制一个线图...从将包含 BarChartView 以及可能其他文本或数据视图开始。这个 BarChartView 包含一个标题和一个图表区,它们由文本和圆角矩形表示。...图标被设置为固定大小,视图被嵌入到 ScrollView ,以便在设备旋转滚动。...SwiftUI 是一个很好平台,用于创建视图和快速重构独立子视图。在 SwiftUI 构建条形图需要做一些工作,随着使用数据来试用条形图,可以确定更多定制化。

5.1K10

解析 SwiftUI 两处由状态更新滞后引发严重 Bug

众所周知,SwiftUI 是一个响应式框架,这意味着,当数据源发生变化时,框架会自动更新视图。同样,当我们想调整视图显示,应直接对状态进行修改。...这两个错误包括:通过手势取消 Sheet 后,快速右滑导航容器导致应用锁死;以及在滚动返回上层视图导致应用崩溃。...原文发表在我博客 肘子Swift记事本视图变化在前、状态变化在后在 SwiftUI ,某些可编程控件在执行一定操作,会先更新视图,待视图变化完成后再修改与其对应状态。...由于在返回上层视图,状态尚未更新,因此在清理 AG (返回动画运行),会破坏应用程序 AttributeGraph 完整性,从而导致应用程序死锁或崩溃。...状态更新滞后不仅存在于本文介绍两个案例,当开发者遇到类似情况,可以尝试采用状态更新优先开发策略进行修改。总结今年 SwiftUI 已经进入了第五个年头。

588110

解析 SwiftUI 两处由状态更新滞后引发严重 Bug

众所周知,SwiftUI 是一个响应式框架,这意味着,当数据源发生变化时,框架会自动更新视图。同样,当我们想调整视图显示,应直接对状态进行修改。...这两个错误包括:通过手势取消 Sheet 后,快速右滑导航容器导致应用锁死;以及在滚动返回上层视图导致应用崩溃。...视图变化在前、状态变化在后 在 SwiftUI ,某些可编程控件在执行一定操作,会先更新视图,待视图变化完成后再修改与其对应状态。这些控件基本上都是对 UIkit(AppKit)二次包装。...由于在返回上层视图,状态尚未更新,因此在清理 AG (返回动画运行),会破坏应用程序 AttributeGraph 完整性,从而导致应用程序死锁或崩溃。...状态更新滞后不仅存在于本文介绍两个案例,当开发者遇到类似情况,可以尝试采用状态更新优先开发策略进行修改。 总结 今年 SwiftUI 已经进入了第五个年头。

26620

WWDC 23 ,SwiftUI 5 和 SwiftData 初印象

大幅改善了 ScrollView 控制力 本次升级,为 ScrollView 带来了新动态滚动定位系统( 不依赖 ScrollViewReader 和显式 id 声明)、一次性定位系统( 在视图进入后...,直接定位到滚动视图特定位置,只能使用一次 )、全新滚动条控制( 闪烁 )、可自定义行视图在滚动区域顶端和显示区域显示状态( 例如可用其实现类似 watchOS 滚动到顶端子视图缩小视觉效果...其他功能 本次升级内容非常多,导致苹果给出 更新文档[3] ,很多新功能也没有列出。在接下来一段时间中,互联网上应该会有不少文章对这些功能进行进一步说明和讲解。...这是我目前整理一些有关 SwiftData 问题和注意事项( 原文发表在推文中,没有进行更系统归纳): 尚不支持公共和共享数据云同步 在当前版本,通过其他上下文(ModelContext)创建数据并不会自动合并到视图上下文中...性质与通过宏创建 Observed 状态类似,可直接驱动视图更新(传递无需使用属性包装器) Attribute 派生选项被废弃了 可以在 Xcode 中使用 Model Editor 将 Model

35010

WWDC 23 ,SwiftUI 5 和 SwiftData 初印象

革命性动画和视觉效果升级 SwiftUI 原本欠缺一些高级动画和视觉功能在本次升级中一并被补上了,而且苹果大幅更新了动画、转场、Shape、效果等方面的内部实现。...大幅改善了 ScrollView 控制力 本次升级,为 ScrollView 带来了新动态滚动定位系统( 不依赖 ScrollViewReader 和显式 id 声明)、一次性定位系统( 在视图进入后...,直接定位到滚动视图特定位置,只能使用一次 )、全新滚动条控制( 闪烁 )、可自定义行视图在滚动区域顶端和显示区域显示状态( 例如可用其实现类似 watchOS 滚动到顶端子视图缩小视觉效果...其他功能 本次升级内容非常多,导致苹果给出 更新文档 ,很多新功能也没有列出。在接下来一段时间中,互联网上应该会有不少文章对这些功能进行进一步说明和讲解。...性质与通过宏创建 Observed 状态类似,可直接驱动视图更新(传递无需使用属性包装器) Attribute 派生选项被废弃了 可以在 Xcode 中使用 Model Editor 将 Model

1.1K20

【Android从零单排系列二十六】《Android视图控件——ScrollView

当布局超过屏幕大小时,ScrollView自动启用滚动功能,用户可以通过滑动屏幕来查看隐藏部分内容。...ScrollView可以嵌套其他视图组件,例如TextView、ImageView等,实现滚动展示更多内容。它对于需要显示较长文本、图片或其他可滚动内容界面非常有用。...在ScrollView,只能包含一个直接子视图(ViewGroup),通常是一个垂直方向线性布局或相对布局。如果需要水平滚动效果,可以使用HorizontalScrollView作为替代。...二 ScrollView使用方法 在XML布局文件定义ScrollView容器。在需要可滚动内容区域内添加ScrollView标签,并指定其宽度、高度以及其他属性。...常见方法: scrollTo(int x, int y):将ScrollView滚动到指定位置,参数x和y分别代表目标位置水平和垂直偏移量。

33720

SwiftUI 视图生命周期研究

本文将作者对 SwiftUI 视图、SwiftUI 视图生命周期理解和研究做介绍,供大家一起探讨。...Cell 视图进入屏幕后触发 onAppear,滚动出屏幕后会触发 onDisappear,在 Cell 视图存续期内可以多次触发 onAppear 和 onDisappear ScrollView...•ScrollView + VStack ,即使 Cell 视图没有出现在可见区域,但它在最开始就会参与容器布局,因此会在创建初始便触发 onAppear,但无论如何滚动,所有的 Cell 视图始终会参与布局...开发者即使不了解文本上述内容,也可以 SwiftUI 代码在日常中发挥出不错效率。但如果能够对视图生命周期有更深入了解,将可以帮助开发者在一些特定场合提高代码执行效率。...这在相当程度上改善了因多次创建实例而引发效率问题。 复杂任务仅执行一次 但是,onAppear 或 task 也并非只会执行一次,如何保证某些负担较重任务只在页面执行一次呢?

4.3K30

SwiftUI 之 HStack 和 VStack 切换

举个例子,假如我们正在构建一个 app 其中包含 LoginActionsView ,一个用户登录在列表中选择操作类: struct LoginActionsView: View { .....这样做好处不仅仅是在引入 GeometeryReader 之前保留同样紧凑布局,并且会使 DynamicStack 在开始时候一种和系统组件类似的方式在所有设备和方向上构建。...使用布局协议 虽然我们最后已经用了非常棒解决方案,可以在所有支持 SwiftUI iOS 版本中使用,但也让我们来探索一下在 iOS 16 引入一些新布局工具(在写这篇文章,它作为...这样做会令动画更流畅,例如在切换设备方向,我们也有可能在执行此类更改时获得小幅性能提升(因为 SwiftUI 总是在其视图层次结构为静态尽可能表现最佳) 选择合适视图 但我们还没有结束,因为...在我们例子,这意味着我们能同时把 HStack 和 VStack 传递给它,并且代表我们在它们中间自动切换。

2.8K10

SwiftUI 布局协议 - Part2

当我们改变角度SwiftUI 会计算好每个视图最初和最终位置,然后在动画期间内修改它们位置,从A点到B点成一条直线。...视图缩放和旋转要再一次使用双向自定义值实现。 在这个例子在容器中一共有44个视图,所以我们新容器将会分别12,12,12和8为一圈。 注意本案例如何使用缓存与子视图通信。...在下一个例子我们将会把前三个视图水平放置在视图顶部,后三个水平放置在底部。剩下视图将会在中间,垂直排列。...那我们需要是一种布局告诉视图如何绘制线条方法。初步想法可以(在这个问题上苹果工程师是这么建议[3]) 使用布局值。这正是我们在上一个例子事情,双向自定义值。...这里应该只有一个父节点是 nil 节点(根结点),你应该小心避免循环引用(例如:两个节点互为父节点)。 同时也要注意,这里有一个好选择,即放置到具有垂直和水平滚动 ScrollView

2.7K30

解析SwiftUI布局细节(二)循环轮播+复杂布局

这篇我们还是说我们关于SwiftUI东西,再提一下Demo代码我已经提交上Git了,目前Demo进度为一级页面基本上结束,地图点击大头针添加也刚处理完,代码有需要小伙伴可以去Git看看,项目地址...通过它我们可以避免在初始 View 创建 ObservableObject, 而是从环境获取 ObservableObject,像 @EnvironmentObject,@ObservedObject...3、再提一点关于上面说滚动视图,在UIKit我们可以用UICollectionView搞定一切,但是在SwiftUI没有这个控件,我建议采用方式是 ScrollView + HStack + VStack...方式去实现,很多同行有说目前来看SwiftUIList在数据量大情况下性能不是特别好,采用ScrollView是个不错方式,而且也很容易构建出来,并不是说每一个Item位置都需要你去计算,...循环轮播实现 ---- 总结一下循环轮播怎么实现,采用方案就是 HStack + Gesture + Timer 方式,这三者就能实现一个自动循环滚动或者手动滚动轮播。

11.8K20

Unity基础(24)-UGUI

美工做了一张100100边框图给你,这张图有时100100显示,有时200100显示,有时3000100显示,放大会失真,如何进行? ?...3、Horizontal Overflow:水平溢出 (1)Wrap:文本自动换行,当达到水平边界 (2)Overflow:文本可以超出水平边界,继续显示 4、Vertical Overflow...(在Hierarchy面板右键创建UI->ScrollView,在子物体中找到Content,需要按行列布置游戏物体都作为Content子物体挂在Content下)(开发垂直ScrollView...组件是用于文本组件自动根据文本变更大小组件,这里不适用) */ using System.Collections; using System.Collections.Generic; using...无限滚动 scrollview理论上是支持无限多个item单元(即滚动单元条目),但实际应用,我们在一开始实例化几个或者十几个item对象一般是没问题,但是当item非常多时,几百或者上千,完全实例化比较耗时消耗性能大

4.3K20

UIScrollView一步步实现1 简介1.1 工作原理1.2 UIScrollView常见几个重要控件1.3 UIScrollView常见重要属性1.4 手工代码实现拖动2 三个重要属性

移动设备屏幕大小是极其有限,因此直接展示在用户眼前内容也相当有限。当展示内容较多,超出一个屏幕,用户可通过滚动手势来查看屏幕以外内容。...缩放结束scrollView 本身 frame 并没有发生变化 缩放结束后 imageView 本身 bounds 也没有发生变化 缩放结束后 imageView center 发生了变化...scrollEnabled 是否能滚动 showsHorizontalScrollIndicator 是否显示水平方向滚动条 showsVerticalScrollIndicator 是否显示垂直方向滚动条...决定了水平方向滚动距离 contentSize height 决定了垂直方向滚动距离 2.3 contenInset contentInset是用来设置内边距。...和普通内边距作用相反,不是内容向里面缩进。是在不改变原有的contentSize基础上,scrollView内容向四周多滚动一些。

1.5K60
领券