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


目录
相关文章
|
2月前
|
前端开发
Web前端---图层嵌套与层叠&&三行三列效果
Web前端---图层嵌套与层叠&&三行三列效果
46 0
|
2月前
|
算法 C++ 开发者
【QML文件结构】理解QML中 多层嵌套控件之间的关系
【QML文件结构】理解QML中 多层嵌套控件之间的关系
175 2
|
前端开发 JavaScript 容器
CSS实现多层嵌套结构最外层旋转其它层不旋转效果
CSS实现多层嵌套结构最外层旋转其它层不旋转效果
CSS实现多层嵌套结构最外层旋转其它层不旋转效果
|
前端开发 容器
View的测量、布局和绘制过程中父View(当前View)和子View的先后顺序
View的测量、布局和绘制过程中,到底是先测量(布局、绘制)父View,还是先测量子View,这篇文章会从源码角度给出答案。
SwiftUI极简教程04:VStack, HStack, ZStack视图排列的使用(下)
SwiftUI极简教程04:VStack, HStack, ZStack视图排列的使用(下)
614 1
SwiftUI极简教程04:VStack, HStack, ZStack视图排列的使用(下)
|
自然语言处理 iOS开发
SwiftUI极简教程03:VStack, HStack, ZStack视图排列的使用(上)
SwiftUI极简教程03:VStack, HStack, ZStack视图排列的使用(上)
1267 0
SwiftUI极简教程03:VStack, HStack, ZStack视图排列的使用(上)
SwiftUI—将子视图作为属性以使布局代码更简洁
SwiftUI—将子视图作为属性以使布局代码更简洁
155 0
SwiftUI—将子视图作为属性以使布局代码更简洁
|
前端开发
SwiftUI—使用ViewModifier视图修饰符集成多个样式
SwiftUI—使用ViewModifier视图修饰符集成多个样式
345 0
SwiftUI—使用ViewModifier视图修饰符集成多个样式
SwiftUI—如何以动画的方式显示或隐藏指定的位图
SwiftUI—如何以动画的方式显示或隐藏指定的位图
292 0
SwiftUI—如何以动画的方式显示或隐藏指定的位图
|
API
原来可以这么操作—修改子View绘制顺序
周一的早上,由于项目的开发做的差不多了,正在等待测试结果的我就开始发呆,思考端午节的去处~
288 0
原来可以这么操作—修改子View绘制顺序