Implementação

• Criar uma aplicação iOS

  Inicie o Xcode e selecione Create a new Xcode project (Criar novo projeto do Xcode) na tela inicial:

  

  Em iOS, Application (Aplicação), selecione Single View App (Aplicativo de visualização única) e clique em Next: (Próximo).

  

  Digite um nome para o projeto, por exemplo Conceitos básicos do iOS. Verifique se Language (Linguagem) está definida como Swift e User Interface (Interface de usuário) como SwiftUI, depois clique em Next: (Próximo).

  

  Por fim, selecione um diretório e clique em Create (Criar) para criar o projeto.

• Atualizar a visualização principal

  Na lista de arquivos à esquerda do Xcode, abra o ContentView.swift e substitua o código por este conteúdo:

  import SwiftUI
  
  // singleton object to store user data
  class UserData : ObservableObject {
      private init() {}
      static let shared = UserData()
  
      @Published var notes : [Note] = []
      @Published var isSignedIn : Bool = false
  }
  
  // the data class to represents Notes
  class Note : Identifiable, ObservableObject {
      var id : String
      var name : String
      var description : String?
      var imageName : String?
      @Published var image : Image?
  
      init(id: String, name: String, description: String? = nil, image: String? = nil ) {
          self.id = id
          self.name = name
          self.description = description
          self.imageName = image
      }
  }
  
  // a view to represent a single list item
  struct ListRow: View {
      @ObservedObject var note : Note
      var body: some View {
  
          return HStack(alignment: .center, spacing: 5.0) {
  
              // if there is an image, display it on the left
              if (note.image != nil) {
                  note.image!
                  .resizable()
                  .frame(width: 50, height: 50)
              }
  
              // the right part is a vertical stack with the title and description
              VStack(alignment: .leading, spacing: 5.0) {
                  Text(note.name)
                  .bold()
  
                  if ((note.description) != nil) {
                      Text(note.description!)
                  }
              }
          }
      }
  }
  
  // this is the main view of our app, 
  // it is made of a Table with one line per Note
  struct ContentView: View {
      @ObservedObject private var userData: UserData = .shared
  
      var body: some View {
          List {
              ForEach(userData.notes) { note in
                  ListRow(note: note)
              }
          }
      }
  }
  
  // this is use to preview the UI in Xcode
  struct ContentView_Previews: PreviewProvider {
      static var previews: some View {
  
          let _ = prepareTestData()
  
          return ContentView()
      }
  }
  
  // this is a test data set to preview the UI in Xcode
  func prepareTestData() -> UserData {
      let userData = UserData.shared
      userData.isSignedIn = true
      let desc = "this is a very long description that should fit on multiiple lines.\nit even has a line break\nor two."
  
      let n1 = Note(id: "01", name: "Hello world", description: desc, image: "mic")
      let n2 = Note(id: "02", name: "A new note", description: desc, image: "phone")
  
      n1.image = Image(systemName: n1.imageName!)
      n2.image = Image(systemName: n2.imageName!)
  
      userData.notes = [ n1, n2 ]
  
      return userData
  }

  Code snippet copied

  Copiar

  O que acabamos de adicionar?

  • Criamos uma classe Note para armazenar os dados das anotações. Usamos duas propriedades distintas para ImageName e Image. Cuidaremos de Image mais adiante na seção Adicionar armazenamento.
  • Criamos uma classe UserData para armazenar os dados do usuário específico, neste estágio, apenas uma lista de objetos Note.
  • A visualização principal ContentView contém uma lista de ListRows
  • Cada linha é renderizada por uma ListRow: uma pilha horizontal com uma imagem e texto. O texto é uma pilha vertical com o nome, em negrito, e a descrição da anotação.
  • Por fim, ajustamos ContentView_Previews e adicionamos prepareTestData() para permitir que uma demonstração seja renderizada na tela.
• Compilar e testar

  Observe a tela para verificar se o layout está conforme o desejado. Caso não veja a tela, habilite-a pelo menu Editor e clique em Canvas (Tela). Talvez também seja necessário clicar no botão resume (retomar) na tela para gerar a demonstração do layout.

  

  Observe que os dados para a demonstração são gerados no código (que começa na linha 70). Os dados não aparecem em tempo de execução. Se tudo estiver correto, compile e inicie o aplicativo no simulador. Clique no menu Product (Produto) e selecione Run (Executar) ou digite  . Se preferir, clique no botão Play (Reproduzir) ▶️ na barra de ferramentas.

  

  Após algum tempo, o aplicativo é iniciado no simulador iOS, com uma tela inicial vazia. Os dados da demonstração não são renderizados em tempo de execução, eles se destinam apenas às demonstrações dentro do Xcode.