ios开发-swiftui基于xcode11_swiftui ios11

1.创建xcodeProject

2.选择single View App，下一步

3.选择SwiftUi，下一步，选择某个位置保存你的项目

4.选中ContentView.swift

内容展示

 

 

import SwiftUI

 

struct ContentView: View {

var body: some View {

 

Text("Hello World")///修改一下，比如改为“你好世界”或者“你好王八蛋”然后直接运行。先感受一下swiftui的helloworld

}

}

 

struct ContentView_Preview: PreviewProvider {

 

static var previews: some View {

 

ContentView()

}

}

5.解释一下上面代码的含义：首先是两个结构体struct 。第一个实现view协议并且描述了这个视图的布局和内容。第二个结构声明了该视图的预览。具体是什么作用呢？就是提供上面结构体的预览视图，预览时图就是这个。

右侧就是swiftui的实时预览图。

有可能显示成这样。此时你需要点击右上角的Resume

6.接上面，ok这时你应该已经看到代码的实时预览。我们接着继续搞，或许我们可以自定义一个TextView。swift已经使用了“.”语法。所以

可以试试这样

        Text("12123").font(.title).foregroundColor(.red)

忽然打开了新世界。好简单啊。有木有！！

7.在你的实时预览中选中你的Text，

就像这样，你可以使用Inspect进行Text属性的自定义。按你的脑子来，随意折腾

可以修改文本内容，字体颜色，字体大小。。。等等。

8.到了这里text组件基本了解。我们再看看swiftui怎么布局呢，只有组件肯定不行哦

在选中文本的时候，弹出框中，有这样的内容

可以自己点击看看同时对照代码，看看会发生什么

VStack {

Text("你吓跑了我的雅美蝶") .font(.title)

Text("你赔我")

}

看看这个长什么样子。

然后看看

HStack {

Text("你吓跑了我的雅美蝶") .font(.title)

Text("你赔我")

}

长什么样子，一切就会了然于胸了。

9.Text组件和Vstack以及HStack已经介绍。下面再来一波Image View 。这样图文并茂，也就显得内容充实了

先导入一张图片

导入以后，可以这样操作

Image("turtlerock")  ///turtlerock是你的图片名称

你可以使用系统提供的api进行图片的修改

比如这样Image("turtlerock") .clipShape(Circle())。

10.总结回顾，小作业。

图片组件-文本组件-布局组件，都已经学完。今天做一个

订单item吧，作为扩展，学习一下Button。