内容简介:SwiftUI是一个非常新的框架,目前有一些bug。然而,构建相同的接口所需的代码比在任何其他环境中编写的代码少5倍。这正是我将在本教程中向您展示的内容。首先,必须下载最新的XCode 11.0和macOS 10.15.给它取个名字,我把它命名为SwiftUI Chat。点击下一步。
SwiftUI是一个非常新的框架,目前有一些bug。然而,构建相同的接口所需的代码比在任何其他环境中编写的代码少5倍。这正是我将在本教程中向您展示的内容。
1.开发环境
首先,必须下载最新的XCode 11.0和macOS 10.15.
2.在XCode中创建一个新的工程
给它取个名字,我把它命名为SwiftUI Chat。点击下一步。
3.创建第一个View
创建新项目时,您将看到一个全新的代码结构。不要害怕未知。你必须学习一次,然后你可以在任何地方使用它:在iOS,新的iPad OS,watchOS,甚至MacOS! WWDC2019上展示的最新功能表明,如果您可以为iOS构建应用程序,您可以轻松地将其转换为任何其他Apple平台,而无需其他知识。
因此,这是新的XCode和您在创建SwiftUI项目时看到的第一个示例代码。你看到右上角的“恢复”按钮了吗?单击它并等到您在右侧屏幕中看到iPhone X!然后尝试将编辑器中的“Hello World”文本更改为您想要的任何字符串。
是不是很神奇?使用最新版本的SwiftUI,您不必再以传统方式编译代码。您只需编写代码并立即查看更改。或者您在界面构建器中进行更改,您的代码将自动更改!
在SwiftUI中构建应用程序实际上让我想起了使用21世纪初的HTML编辑器创建网站。
4.在View上添加你的第一条信息
好的,我们在这个视图中添加一些消息。用下面的代码替换您的代码并仔细阅读我的所有注释。
import SwiftUI // let's create a structure that will represent each message in chat struct ChatMessage : Hashable { var message: String var avatar: String } struct ContentView : View { // let's add some dummy values to the messages // suppose, there are only two messages in the chat room sent by two users: A and B // A sent "Hello world" with a red message bubble color // B sent "Hi" with a blue message color var messages = [ ChatMessage(message: "Hello world", avatar: "A"), ChatMessage(message: "Hi", avatar: "B") ] var body: some View { // I've removed the text line from here and replaced it with a list // List is the way you should create any list in SwiftUI List { // we have several messages so we use the For Loop ForEach(messages.identified(by: \.self)) { // then we just show the avatars of the users and their messages // by using these two Text functions Text($0.avatar) Text($0.message) } } } } #if DEBUG struct ContentView_Previews : PreviewProvider { static var previews: some View { ContentView() } } #endif 复制代码
现在,你看到了什么
好的,我们可以在屏幕上轻松显示消息。注意,我们不必创建任何UITableViews并处理IndexPaths。我们所要做的就是创建一个带有For循环的List。
5.为信息列表添加设计
现在,让我们让这些消息看起来像真正的消息气泡。为此,我们必须将color var添加到ChatMessage结构中:
struct ChatMessage : Hashable { var message: String var avatar: String var color: Color } ```然后我们需要使用color参数填充消息列表: 复制代码
var messages = [ ChatMessage(message: “Hello world”, avatar: “A”, color: .red), ChatMessage(message: “Hi”, avatar: “B”, color: .blue) ]
复制代码
List { ForEach(messages.identified(by: .self)) { Text($0.avatar) Text($0.message) .bold() .foregroundColor(Color.white) .padding(10) .background($0.color, cornerRadius: 10) } }
是不是很酷?伙计们,看,我们通过编写几行代码在iOS应用程序中制作了消息气泡。 现在让我们将姓名与消息放在一行里。为了不使For循环的内容过于混乱,让我们利用在SwiftUI中如何轻松格式化代码。创建一个新结构并将文本放在那里: 复制代码
// ChatRow will be a view similar to a Cell in standard Swift struct ChatRow : View {
// we will need to access and represent the chatMessages here var chatMessage: ChatMessage // body - is the body of the view, just like the body of the first view we created when opened the project var body: some View { // HStack - is a horizontal stack. We let the SwiftUI know that we need to place // all the following contents horizontally one after another HStack { Text(chatMessage.avatar) Text(chatMessage.message) .bold() .foregroundColor(Color.white) .padding(10) .background(chatMessage.color, cornerRadius: 10) } } 复制代码
}
复制代码
ForEach(messages.identified(by: .self)) { ChatRow(chatMessage: $0) }
![](https://user-gold-cdn.xitu.io/2019/6/24/16b877a9cfa02743?w=858&h=360&f=png&s=12629) 如果您愿意,您可以使用头像并对其进行样式的更改。 ### 6.使用老的带有网络请求的swift文件与swift ui进行桥接 我们已经学会了如何显示消息字典中的消息。但是我们如何从其他地方获取消息,比如从标准的Swift文件中获取消息,我们可以使用老的流行库和框架处理所有网络部分?而且...我们如何发送自己的消息? 首先,让我们创建一个没有SwiftUI支持的标准Swift文件: ![](https://user-gold-cdn.xitu.io/2019/6/24/16b877d418784b02?w=1452&h=1054&f=png&s=389375)将其命名为ChatController.swift并放入SwiftUI Chat文件夹中。我们将使用此文件作为旧Swift代码与用SwiftUI编写的新代码之间的桥梁。这意味着您可以使用ChatController文件使用Google FireBase连接到您的数据库。然后提取数据并将其发送到SwiftUI View。为了使它工作,我们将不得不导入Combine和SwiftUI框架。 复制代码
import Combine import SwiftUI
// ChatController needs to be a BindableObject in order // to be accessible by SwiftUI class ChatController : BindableObject { // didChange will let the SwiftUI know that some changes have happened in this object // and we need to rebuild all the views related to that object var didChange = PassthroughSubject<Void, Never>()
// We've relocated the messages from the main SwiftUI View. Now, if you wish, you can handle the networking part here and populate this array with any data from your database. If you do so, please share your code and let's build the first global open-source chat app in SwiftUI together var messages = [ ChatMessage(message: "Hello world", avatar: "A", color: .red), ChatMessage(message: "Hi", avatar: "B", color: .blue) ] // this function will be accessible from SwiftUI main view // here you can add the necessary code to send your messages not only to the SwiftUI view, but also to the database so that other users of the app would be able to see it func sendMessage(_ chatMessage: ChatMessage) { // here we populate the messages array messages.append(chatMessage) // here we let the SwiftUI know that we need to rebuild the views didChange.send(()) } 复制代码
}
复制代码
var window: UIWindow? var chatController = ChatController()
复制代码
let window = UIWindow(frame: UIScreen.main.bounds) window.rootViewController = UIHostingController(rootView: ContentView().environmentObject(chatController)) self.window = window
在名为ContentView.swift的主SwiftUI视图文件中,我们还应该将新的environmentObject添加到Debug中,以使其可以通过预览访问: 复制代码
#if DEBUG struct ContentView_Previews : PreviewProvider { static var previews: some View { ContentView() .environmentObject(ChatController()) } } #endif
### 7.添加一个TextField和一个按钮来发送消息 不要失去你的能量!我们差不多完成了。现在我们需要添加一个TextField和一个Button来发送消息。检查ContentView.swift文件的当前版本以获取更改和注释: 复制代码
import SwiftUI
// let's create a structure that will represent each message in chat struct ChatMessage : Hashable { var message: String var avatar: String var color: Color // isMe will be true if We sent the message var isMe: Bool = false }
struct ContentView : View {
// @State here is necessary to make the composedMessage variable accessible from different views @State var composedMessage: String = "" @EnvironmentObject var chatController: ChatController var messages = [ ChatMessage(message: "Hello world", avatar: "A", color: .red), ChatMessage(message: "Hi", avatar: "B", color: .blue) ] var body: some View { // the VStack is a vertical stack where we place all our substacks like the List and the TextField VStack { // I've removed the Hello World text line from here and replaced it with a list // List is the way you should create any list in SwiftUI List { ForEach(chatController.messages.identified(by: \.self)) { // we have several messages so we use the For Loop ChatRow(chatMessage: $0) } } // TextField are aligned with the Send Button in the same line so we put them in HStack HStack { // this textField generates the value for the composedMessage @State var TextField($composedMessage, placeholder: Text("Message...")).frame(minHeight: 30) // the button triggers the sendMessage() function written in the end of current View Button(action: sendMessage) { Text("Send") } }.frame(minHeight: 50).padding() // that's the height of the HStack } } func sendMessage() { chatController.sendMessage(ChatMessage(message: composedMessage, avatar: "C", color: .green, isMe: true)) composedMessage = "" } 复制代码
}
// ChatRow will be a view similar to a Cell in standard Swift struct ChatRow : View { var chatMessage: ChatMessage
// body - is the body of the view, just like the body of the first view we created when opened the project var body: some View { Group { // if the message is sent by the user, // show it on the right side of the view if !chatMessage.isMe { // HStack - is a horizontal stack. We let the SwiftUI know that we need to place // all the following contents horizontally one after another HStack { Text(chatMessage.avatar) Text(chatMessage.message) .bold() .foregroundColor(Color.white) .padding(10) .background(chatMessage.color, cornerRadius: 10) // Spacer fills the gaps of the Horizontal stack between the content and the borders Spacer() } } else { // else show the message on the left side HStack { Spacer() Text(chatMessage.message) .bold() .foregroundColor(Color.white) .padding(10) .background(chatMessage.color, cornerRadius: 10) Text(chatMessage.avatar) } } } } 复制代码
}
#if DEBUG struct ContentView_Previews : PreviewProvider { static var previews: some View { ContentView() .environmentObject(ChatController()) } } #endif
要使这个功能正常,您应该在iOS模拟器上运行应用程序: 然后,您将看到来自ChatController的消息以及新的TextField和“发送”按钮。要发送消息,请单击TextField,然后按Cmd + K以显示键盘(新的XCode仍有一些错误与硬件键盘一起使用,因此我们必须切换软件键盘)。 输入消息“What are up guys?”。再次按Cmd + K可隐藏模拟器的键盘,然后按“发送”按钮。 ### 总结 SwiftUI是一个全新的框架,可以帮助我们创建更多功能并编写更少的代码。尽管如此,它仍然是新的,并没有太多关于如何做你想做的事情的文档,所以我试着在本文中提供非常丰富的信息,并尽可能清楚地描述每一步。复制代码
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 用Java构建一个简单的WebSocket聊天室
- [译] 构建属于自己的 “聊天机器人”(NLP 系列)
- 使用树莓派和Rocket.Chat构建一个私人聊天服务器
- IMI v0.0.6:十行代码构建简易的 WebSocket 聊天室
- IMI v0.0.6:十行代码构建简易的 WebSocket 聊天室
- 用Java构建一个简单的WebSocket聊天项目之新增HTTP接口调度
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
算法交易:制胜策略与原理
[美]欧内斯特·陈(Ernest P. Chan) / 高闻酉、黄蕊 / 机械工业出版社 / 49.00
本书是一本引人入胜、信息量大、覆盖各类交易策略的图书。无论个人投资者,还是机构投资者,都可以借鉴和使用其中的策略。本书中的策略大致可分为均值回归系统和动量系统两大类。书中不仅介绍了如何使用每种类别的交易策略,更解释了各种策略之所以有效的原因。本书始终以简单、线性的交易策略为重心,因为复杂的交易策略容易受到过度拟合及数据窥探的侵害。数学和软件是算法交易的两条腿。本书用到了一定程度的数学知识,使其对各......一起来看看 《算法交易:制胜策略与原理》 这本书的介绍吧!