008_swiftui_交互

资源下载地址

https://download.csdn.net/download/mp624183768/12271888

使用Swift 展示图片 首先把下载的资源拖动到

ios的资源目录中

修改布局文件

//
//  ContentView.swift
//  siwft_ui_test
//
//  Created by liuan on 2020/3/25.
//  Copyright © 2020 liuan. All rights reserved.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        Image("apple");
    }
}

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

就把苹果展示到上面了

下面进行更多的交互设计

继续修改布局文件

//
//  ContentView.swift
//  siwft_ui_test
//
//  Created by liuan on 2020/3/25.
//  Copyright © 2020 liuan. All rights reserved.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        //垂直布局
        VStack{
                //水平布局 alignment 也可以是.top 就不居中了
                HStack(alignment: .center, spacing: 20, content: {
                    
                    Text("Hello Button")
                    
                    Image("lemon")
                           Button(action: {
                                //todo
                            }) {
                    //            Text("Hello Button") 也能是文本
                                Image("donut").renderingMode(.original)
                            }
                    
                    //            把内容 放置到最左面 这叫做推片，，很有意思
                    Spacer()
                })
//            把内容 放置到最上面 这叫做推片，，很有意思
            Spacer()
        }

        
    }
}

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

效果展示

Spacer()更像是android的LinearLayout中的权重。。自定义适配 很有特点

除了VStack HStack 还有 ZStack 这个就跟android 的相对布局类似了。

我们来看下下面的一段代码

        //重叠布局
        ZStack{
            
            Image("lemon")
            Image("apple")
            Image("donut")
            
        }

效果展示