前端学SwiftUI第2篇:使用画布来开发

创建和组合视图

一、用视图模式修改文本

1、点到视图编辑模式

2、修改文本和文字颜色

  • 1、按住control+command 点击视图上的文字 你好世界
  • 2、选择第一个 Show SwiftUI
  • 3、修改Label 回车和Color选red

二、用视图模式修改布局

1、按住ctrl 并点击编辑器上的Text调出菜单,点击 Embed in VStack

Text外边就会包裹一个VStack表示纵向布局,可以理解成包了一个div

swift 复制代码
import SwiftUI
struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Image("man")
                .resizable()
                .frame(width: 60, height: 60)
            VStack {
                Text("你好中国")
                    .font(.title)
                .foregroundColor(Color.red)
            }
        }
        .padding()
    }
}
#Preview {
    ContentView()
}

2、添加一个新的文本

1、光标放在如下文字,点击右上角的+号,选择Text(也可以用拖动的方式)

2、修改为左对齐

bash 复制代码
1、编辑器上点击VStack

2、按住ctrl command 点击右边的视图会弹出编辑然后选择左边对其

三、用视图模式添加图片

创建新的文件img.swift

添加Image标签,cunfen是前面添加到图片名称

圆角图片

css 复制代码
import SwiftUI

struct img: View {

    var body: some View {

        Image("fengjing")
            .frame(width:200,height:200)
            .clipShape(Circle())
            .overlay {
                           Circle().stroke(.gray, lineWidth: 4)
                       }
                       .shadow(radius: 7)
    }

}

#Preview {
    img()
}
相关推荐
秋天的一阵风几秒前
Vue3探秘系列— 路由:vue-router的实现原理(十六-上)
前端·vue.js·面试
秋天的一阵风1 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-下)
前端·vue.js·面试
海底火旺21 分钟前
JavaScript中的Object方法完全指南:从基础到高级应用
前端·javascript·面试
海底火旺22 分钟前
JavaScript中的Symbol:解锁对象属性的新维度
前端·javascript·面试
天天扭码22 分钟前
一文吃透 ES6新特性——解构语法
前端·javascript·面试
Kagerou23 分钟前
组件测试
前端
JustHappy26 分钟前
啥是Hooks?为啥要用Hooks?Hooks该怎么用?像是Vue中的什么?React Hooks的使用姿势(上)
前端·vue.js·react.js
张可40 分钟前
历时两年半开发,Fread 项目现在决定开源,基于 Kotlin Multiplatform 和 Compose Multiplatform 实现
android·前端·kotlin
嘻嘻嘻嘻嘻嘻ys1 小时前
《Spring Boot 3 + GraalVM原生镜像实战:云原生时代的毫秒启动与性能调优》
前端·后端
嘻嘻嘻嘻嘻嘻ys1 小时前
《Spring Boot 3.0×GraalVM:云原生时代的毫秒级启动实战革命》
前端·后端