老铁,原来做个iOS App这么简单~

前言

来啦老铁!

在前2期,我们一起探索了如何创建一个最简单的Android应用,有兴趣的朋友烦请移步:

今天呢,咱们再来简单学点iOS知识,拓展拓展视野:

  • 创建一个最简单的iOS应用!

(默认大家都有一台mac设备,都从appStore装好最新版的Xcode了哈~)

整体步骤

  1. Xcode中创建iOS项目;
  2. 运行iOS项目;
  3. 编写简单的交互;

1. Xcode中创建iOS项目;

  • 打开Xcode,选择创建新Xcode项目;


    新建Xcode项目
  • 选择要创建的app的类型,如跨平台或iOS或macOS等,我选择iOS,开发iOS应用;


    选择app类型
  • 配置项目基本信息;


    项目基本信息
  • 选择项目存放目录;


    项目存放目录

Create点击完成后,我们就能在Xcode中看到创建出的项目,其项目结构为:


项目结构

其实截止目前,整个项目已经可以运行!接下来我们来运行看看~

2. 运行iOS项目;

  • 选择要安装app的设备,可以选择连接至电脑的真机,也可以选择模拟器;


    设备选择入口
设备列表
  • 直接运行项目;


    运行入口1
运行入口2
  • 运行画面;
    由于笔者前段时间刚把iphone给换了,没有iphone机器,因此选择模拟器进行演示;
运行画面

期盼已久的 “Hello, world!” 终于出现在iphone上啦!

3. 编写简单的交互;

  1. 双击项目下com.example.test下的ContentView.swift文件,我们会看到打开了代码编辑器与预览窗口;
拖动添加元素.jpg
代码与预览.jpg
  1. 拖动元素到预览页面;


    添加页面元素入口.jpg
添加按钮.jpg
拖动添加元素.jpg

我们能看到一个按钮已经被添加到页面上了,所见即所得;

  1. 编写交互逻辑代码;
    我们来个简单的,将“Hello, world!”更改成其他文字,例如“你好世界!”;

思路是:

  • 声明一个变量如 outputText,默认值为“Hello, world!”,并将文本框的值设置为 outputText 变量;
  • 按钮绑定事件,更改 outputText 变量的值即可;
    ContentView.swift 代码如下:
//
//  ContentView.swift
//  com.example.test
//
//  Created by diren on 2021/7/17.
//

import SwiftUI

struct ContentView: View {
    @State var outputText: String = "Hello, world!"
    
    var body: some View {
        VStack {
            Text(outputText)
                .padding()
            Button(action: {
                self.outputText = "你好世界!"
            }) {
                Text("这是个按钮")
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
  1. 验证一下;


    重新编译安装app

点击按钮后:


改变文本

一个简单的交互就这么完成了,简单吧~

咱们今天也不做过于深入的学习了,到此为止,有兴趣的同学可以跟着玩玩看,也可以自己深入学习,咱们有机会再继续学习app知识~

如果本文对您有帮助,麻烦动动手指点点赞?

谢谢!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容