SwiftUI—创建两层嵌套的滚动视图

简介: SwiftUI—创建两层嵌套的滚动视图

本节课将创建一个两层嵌套的滚动视图,处于外层的滚动视图允许垂直滚动,而处于内层的滚动视图,只允许水平滚动。


示例代码:


struct ContentView : View {
    var body: some View {
        ScrollView(.vertical, showsIndicators: false) {
            VStack(alignment: HorizontalAlignment.leading, spacing: 20){
                Text("Overview")
                .font(.system(size: 48))
                .padding(10)
                Text("With the power of Xcode, the ease of Swift, and the revolutionary features of cutting-edge Apple technologies, you have the freedom to create your most innovative apps ever.\nSwiftUI provides views, controls, and layout structures for declaring your app's user interface. The framework provides event handlers for delivering taps, gestures, and other types of input to your app, and tools to manage the flow of data from your app's models down to the views and controls that users will see and interact with.")
                .lineLimit(nil)
                .frame(width: 300, height: 350, alignment: .topLeading)
                .padding(10)
                ScrollView(.horizontal, showsIndicators: true) {
                    HStack(alignment:.center, spacing: 20){
                        Image("iPhone")
                            .resizable()
                            .frame(width: 189, height: 350, alignment: .center)
                        Image("iPhoneSerial")
                            .resizable()
                            .frame(width: 518, height: 350, alignment: .center)
                        Image("iPhone")
                            .resizable()
                            .frame(width: 189, height: 350, alignment: .center)
                    }
                }
                .background(Color.orange)
                .padding(10)
            }
        }
        .background(Color.orange)
        .padding(10)
        .navigationBarTitle(Text("ScrollView"))
    }
}


2466108-ee2bd3bd04befb50.webp.jpg


目录
相关文章
|
Android开发 开发者 存储
Android可折叠收缩伸展的Expandable分组RecyclerView:模型抽象和封装(二)
Android可折叠收缩伸展的Expandable分组RecyclerView:模型抽象和封装(二) 如今Android这种可收缩伸展的Expandable RecyclerView是如此常用,在附录1的基础上,我重新把模型进行了抽象和封装,设计了一套新的架构和简洁的使用方式支持这种功能。
3777 0
|
4月前
|
开发框架 前端开发 JavaScript
使用DevExpress的GridControl实现多层级或无穷级的嵌套列表展示
使用DevExpress的GridControl实现多层级或无穷级的嵌套列表展示
UE4 动画蓝图的嵌套与继承
UE4 动画蓝图的嵌套与继承
164 0
|
前端开发 JavaScript 容器
CSS实现多层嵌套结构最外层旋转其它层不旋转效果
CSS实现多层嵌套结构最外层旋转其它层不旋转效果
CSS实现多层嵌套结构最外层旋转其它层不旋转效果
|
前端开发 JavaScript 测试技术
CSS 解决z-index上层元素遮挡下层元素点击事件问题
CSS 解决z-index上层元素遮挡下层元素点击事件问题
581 0
|
前端开发 容器
View的测量、布局和绘制过程中父View(当前View)和子View的先后顺序
View的测量、布局和绘制过程中,到底是先测量(布局、绘制)父View,还是先测量子View,这篇文章会从源码角度给出答案。
SwiftUI极简教程04:VStack, HStack, ZStack视图排列的使用(下)
SwiftUI极简教程04:VStack, HStack, ZStack视图排列的使用(下)
684 1
SwiftUI极简教程04:VStack, HStack, ZStack视图排列的使用(下)
|
开发者 索引
SwiftUI极简教程27:DisclosureGroup拓展折叠视图的使用
SwiftUI极简教程27:DisclosureGroup拓展折叠视图的使用
617 0
SwiftUI极简教程27:DisclosureGroup拓展折叠视图的使用
|
自然语言处理 iOS开发
SwiftUI极简教程03:VStack, HStack, ZStack视图排列的使用(上)
SwiftUI极简教程03:VStack, HStack, ZStack视图排列的使用(上)
1437 0
SwiftUI极简教程03:VStack, HStack, ZStack视图排列的使用(上)
SwiftUI—将子视图作为属性以使布局代码更简洁
SwiftUI—将子视图作为属性以使布局代码更简洁
190 0
SwiftUI—将子视图作为属性以使布局代码更简洁