ios入门实例（一）：Hello Swift

前言：

本专栏意在通过介绍官方demo，简单上手ios项目来介绍该语言,避免开篇就从介绍语法等较枯燥方式，但最终殊途同归会深入概念，源码等，让读者由浅到深了解ios语言开发

demo介绍

本文主要介绍通过Xcode，Swift和SwiftUI创建简单应用

步骤

创建项目

点击Xcode创建ios App项目

项目名称填写：HelloSwiftUI，App store 是要求Organization Identifier需要为唯一的，一般都是倒过来的域名如：com.apple,但由于我们本地运行不需要上传App store，这里填写test就可以了,其他选项默认即可

下一步选择不勾选创建git仓库，之后点“Create”，项目创建成功！

项目基本信息

成功创建后Xcode显示项目的基本信息包括：项目目录，代码，画布预览

画布预览的隐藏显示可以通过Xcode右侧按钮控制

项目上手coding

项目主入口文件ContentView.swift

import SwiftUI
struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

修改界面中显示的文案 “Hello， world” ，改为 “Hello Swift UI!”。先查看Text文档步骤如图：

从文档可知Text修改

// ContentView.swift

 - Text("Hello, world!")
 + Text("Hello Swift UI!")

效果：

icon图标与文案加个padding

// ContentView.swift

  Image(systemName: "globe")
     .imageScale(.large)
     .foregroundStyle(.tint)  
  Text("Hello Swift UI!")
+    .padding()

文案加入圆角背景

// ContentView.swift

 Text("Hello Swift UI!")
     .padding()
     .background(Color.yellow,in:RoundedRectangle(cornerRadius:  8))

style：padding与background顺序问题

当Text添加 相同的padding 与 background，但添加顺序不同表现将不同

// ContentView.swift

 Text("Hello Swift UI!")
    .padding()
    .background(Color.yellow,in:RoundedRectangle(cornerRadius:  8))
    
 Text("Hello Swift UI!")
    .background(Color.yellow,in:RoundedRectangle(cornerRadius:  8))
    .padding()

添加了.padding后会影响后续样式，这里使用官方的说明图更好理解