Perguntas[swiftui](coding)

Começo com o seguinte código:

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack(spacing: 20) {
            ExtractedView(text: "Energy")
            ExtractedView(text: "Breath Control")
                
        }
        .padding(.horizontal, 20)
    }
}

#Preview {
    ContentView()
}

struct ExtractedView: View {
    let text: String
    
    var body: some View {
        Button {
            
        } label: {
            HStack(spacing: 8) {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundStyle(.tint)
                Text(text)
                    .lineLimit(1)
                    .font(.system(size: 18, weight: .bold))
            }
            .padding(.horizontal, 8)
            .padding(.vertical, 8)
            .background {
                Color.yellow
            }
        }
    }
}

O resultado aproximado que quero alcançar:

Em outras palavras, preciso adicionar espaçamento igual dentro de cada elemento após o texto, mas não sei como fazer isso. Tentei um código diferente, mas o tamanho do botão se torna igual ou o iOS adiciona uma nova linha ao segundo rótulo ou tenta encurtar o segundo rótulo mesmo quando há espaço suficiente.

Estou trabalhando em um aplicativo SwiftUI para tvOS. Tenho um NavigationLink com uma imagem e uma linha de texto. O item funciona como esperado, quando em foco ele cresce. No entanto, se eu alterar o raio do canto (o padrão é muito), mesmo que o raio do canto seja menor e a imagem e o texto cresçam, a imagem é cortada (a imagem cresce, mas seus limites permanecem os mesmos). Como posso consertar isso?

NavigationStack {
        ScrollView {
            VStack(alignment: .leading, spacing: 20) {
                ForEach(sections) { section in
                    VStack(alignment: .leading, spacing: 20) {
                        // Section title
                        Text(section.title)
                            .font(.title)
                            .padding(.horizontal)
                        
                        // Items
                        ScrollView(.horizontal) {
                            LazyHStack(spacing: 50) {
                                ForEach(section.items) { item in
                                    NavigationLink {
                                        VideoDetailView(mediaItem: item)
                                    } label: {
                                        AsyncImage(url: item.imageURL) { phase in
                                            switch phase {
                                            case .empty:
                                                // This shows while the image is loading
                                                ProgressView()
                                                    .aspectRatio(700/500, contentMode: .fit)
                                                    .containerRelativeFrame(.horizontal, count: 6, spacing: 50)
                                            case .success(let image):
                                                // This shows the successfully loaded image
                                                image
                                                    .resizable()
                                                    .aspectRatio(700/500, contentMode: .fit)
                                                    .containerRelativeFrame(.horizontal, count: 6, spacing: 50)
                                            case .failure(_):
                                                // This shows if the image fails to load
                                                Image(systemName: "photo")
                                                    .resizable()
                                                    .aspectRatio(700/500, contentMode: .fit)
                                                    .containerRelativeFrame(.horizontal, count: 6, spacing: 50)
                                            @unknown default:
                                                // Any other
                                                EmptyView()
                                            }
                                        } .cornerRadius(5) // WHen I add this, the image gets clipped
                                        Text(item.title)
                                        //Text(item.subtitle)
                                    }
                                    .buttonStyle(.borderless)
                                }
                            }
                        }
                        .scrollClipDisabled()
                    }
                }
            }
        }
    }

Estou trabalhando na criação de um aplicativo tvOS em SwiftUI pela primeira vez. Sou bem novo nisso.

Tenho uma fileira de botões, que funciona corretamente. Sempre que mudo o foco, o item em foco aumenta de tamanho.

var body: some View {
    NavigationView {
                ScrollView(.horizontal) {
                    LazyHStack(spacing: 50) {
                        ForEach(sections[0].items) { item in
                            Button {} label: {
                                Image(systemName: "photo")
                                    .resizable()
                                    .frame(width: 300, height: 170)
                                Text(item.title)
                            }
                            .buttonStyle(.borderless)
                            
                        }
                    }
                }
                .scrollClipDisabled()
                .buttonStyle(.borderless)
            }

}

Entretanto, se eu tentar adicionar um link de navegação como este:

NavigationLink(destination: VideoDetailView(mediaItem: item)) {
                                        Button...
                                    }

a animação em foco é perdida.

O que estou fazendo errado? Como posso manter a animação de foco do Botão e fazê-lo me levar para uma nova tela?

Usando o seguinte

@main
struct aspectratioApp: App {
  var body: some Scene {
    WindowGroup { ContentView().border(.blue, width: 2).padding() }
  }
}

e ContentViewsem o aspectRatiomodificador aplicado (veja abaixo), os resultados são como esperado, incl. Canvaspreenche o espaço disponível (que eu acho que é o comportamento padrão), gerando canvas size: (243.0, 78.0)no console:

Em seguida, vamos aplicar o .aspectRatio(isSquare ? 1 : nil, contentMode: isSquare ? .fit : .fill)modificador, que acredito que está dizendo para fazer Canvasum quadrado que se encaixe ou o que quer que preencha o espaço disponível (veja ContentView com aspectRatio abaixo). Logo de início, obtenho um quadrado Canvascomo este:

e um tamanho de tela quadrada impresso no console. A alternância isSquaremantém o quadrado da tela com um tamanho ligeiramente menor:

canvas size: (157.0, 157.0)
canvas size: (130.0, 130.0)

O que estou esquecendo aqui? A documentação para aspectRatio documenta o parâmetro aspectRatio da seguinte forma: A proporção de largura para altura a ser usada para a visualização resultante. Use nil para manter a proporção atual na visualização resultante. que eu interpreto como significando qualquer que seja a proporção se o modificador não for aplicado.

Não é assim que funciona? O modificador não é stateless, ou seja, ele se lembrou de que a tela era quadrada uma vez e está apenas mantendo isso para sempre, incl. em reinicializações do aplicativo?

ContentView sem AspectRatio

struct ContentView: View {
  @State private var isSquare = false
  var body: some View {
    VStack {
      Text("isSquare: \(isSquare)").padding()
      Canvas { _, size in print("canvas size: \(size)") }
        .border(.teal, width: 2)
        .padding()
      Toggle(isOn: $isSquare) { Text("Constrain to Square") }.padding()
    }
    .border(.yellow, width: 2)
    .padding()
  }
}

ContentView com proporção de aspecto

struct ContentView: View {
  @State private var isSquare = false
  var body: some View {
    VStack {
      Text("isSquare: \(isSquare)").padding()
      Canvas { _, size in print("canvas size: \(size)") }
        .aspectRatio(isSquare ? 1 : nil, contentMode: isSquare ? .fit : .fill)
        .border(.teal, width: 2)
        .padding()
      Toggle(isOn: $isSquare) { Text("Constrain to Square") }.padding()
    }
    .border(.yellow, width: 2)
    .padding()
  }
}

Aqui está um exemplo de código completo de uma tentativa de visualização de cabeçalho duplo fixo:

struct ContentView: View {
    var body: some View {
        ScrollView(showsIndicators: false) {
            LazyVStack(spacing: 0, pinnedViews: .sectionHeaders) {
                Section {
                    SecondView()
                } header: {
                    HeaderView()
                }
            }
        }
    }
}

struct HeaderView: View {
    var body: some View {
        Rectangle()
            .fill(.green)
            .frame(height: 50)
    }
}

struct SecondView: View {
    var body: some View {
        LazyVStack(spacing: 0, pinnedViews: .sectionHeaders) {
            Section {
                VStack {
                    ForEach(0..<20) { index in
                        ItemView(index: index)
                    }
                }
            } header: {
                SecondHeaderView()
            }
        }
    }
}

struct SecondHeaderView: View {
    var body: some View {
        Rectangle()
            .fill(.red)
            .frame(height: 60)
    }
}

struct ItemView: View {
    let index: Int
    var body: some View {
        VStack {
            Text("Item \(index)")
                .padding()
        }
        .frame(height: 80)
        .background(.gray)
    }
}

#Preview {
    ContentView()
}

Note que inicialmente, o vermelho SecondHeaderViewestá corretamente posicionado abaixo do verde HeaderView. No entanto, ao rolar, o cabeçalho vermelho rola abaixo do cabeçalho verde até que fique na mesma posição y que o cabeçalho verde.

Preciso que o cabeçalho vermelho fique ancorado abaixo do cabeçalho verde. Note que ele SecondViewpode não estar sempre incorporado em um ContentView. Ele poderia viver sozinho e ainda precisar de seu próprio cabeçalho fixo para funcionar, então acho que ambas as visualizações precisam do LazyVStack.

Eu mexi em vários deslocamentos de visualização do GeometryReader, tentando posicionar o cabeçalho vermelho corretamente, mas não consegui.

Tenho uma visualização Toggle dentro de uma visualização 'meio arredondada' com fundo Material. Para obter o 'meio arredondado', uso .clipShapewith .recte o raio selecionado.
Parece que usar .clipShapewith (com parâmetros .rectespecíficos ) está fazendo com que o perca a cor de fundo.radiusToggle

Código:

ZStack {
    Color.blue
    Toggle("On", isOn: .constant(false))
    .padding()
        .frame(width: 150, height: 100)
        .background(.thinMaterial)
        .clipShape(
            .rect(
                topLeadingRadius: 20,
                bottomLeadingRadius: 0,
                bottomTrailingRadius: 0,
                topTrailingRadius: 20
            )
        )
}

Se eu usar .clipShapecom RoundedRectangle(cornerRadius:), obtenho o fundo novamente, mas preciso que a parte inferior não seja arredondada.

Editar

Mais tarde, também precisei estender a visualização, permitindo que a parte inferior se estendesse, onde apenas o Material deveria ficar sob a área segura.

Resumindo, eu precisava incorporar o fundo 'material' dentro de outro modificador de fundo, onde eu aplico o 'material' em uma visualização 'clear color'.
Aqui está o código:

ZStack {
    Color.blue
        .ignoresSafeArea()
    VStack {
        Spacer()
        Toggle("On", isOn: .constant(false))
            .padding()
            .frame(height: 100)
            .background( // 'Regular background container
                Color.clear // Apply the Material background with 'ignoresSafeArea'
                    .background(.thinMaterial,
                                in: .rect(
                        topLeadingRadius: 20,
                        bottomLeadingRadius: 0,
                        bottomTrailingRadius: 0,
                        topTrailingRadius: 20
                    ))
                    .ignoresSafeArea()
            )
    }
}

Estou tentando recriar o aplicativo de mensagens da Apple. Percebi que o símbolo na seleção de bate-papo está na parte superior e não no centro, como o NavigationLink mostra por padrão.

Aqui está uma imagem do Apple Messages:

Aqui está uma imagem da minha aplicação:

import SwiftUI

struct ContentView: View {
    
    private var imageSize: CGFloat = 50
    var body: some View {
        NavigationStack {
            List(NavigationScreens.allCases, id: \.self) { screen in
                NavigationLink(value: screen) {
                    Label(title: {
                        MessageChat(name: "SwiftUI")
                            .padding(.leading, 15)
                            //.border(.red)
                    }, icon: {
                        HStack {
                            Image(systemName: "circle.fill")
                                .resizable()
                                .frame(width: 10, height: 10)
                            Image("image_test")
                                .resizable()
                                .frame(width: imageSize, height: imageSize)
                                .clipShape(Circle())
                        }
                        .padding(10)
                    })
                }
            }
            .navigationTitle("Messages")
            .listStyle(.plain)
            .scrollContentBackground(.hidden)
            .navigationDestination(for: NavigationScreens.self) { screen in
                switch screen {
                case .Chat, .Profile, .Settings:
                    ChatSelection()
                }
            }
        }
    }
}

Não tenho certeza se essa é a maneira correta de fazer isso ou se um NavigationLink personalizado seria necessário.

Código de bate-papo da mensagem:

struct MessageChat: View {
@State var contact: Contact

var body: some View {
    HStack {
        VStack(alignment: .leading, spacing: 4) {
            HStack {
                // MARK: Name
                Text(contact.name)
                    .font(.headline)
                    .lineLimit(1)
                    .foregroundStyle(Color.primary)
                
                Spacer()
                
                // MARK: Message Date
                Text("12/12/12")
                    .font(.subheadline)
                    .foregroundStyle(Color.gray)
            }
            .padding(.trailing, 20)
            
            // MARK: Message Description
            Text("Some random text long enough to have the multiple lines effect, just in case its not long enough")
                .lineLimit(2)
                .font(.subheadline)
                .foregroundStyle(Color.secondary)
                .frame(maxHeight: 40, alignment: .topLeading)
        }
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
}

}

Tenho o HStack com duas visualizações: Imagem e Texto. Gostaria de alinhar a Imagem no topo, mas o texto no centro do VerticalAlignment. No entanto, especificar o alinhamento .center para o Texto não resolve, ele ainda está posicionado no topo. Há algo que eu esteja esquecendo?

struct SwiftUIView: View {
    var body: some View {
        HStack(alignment: .top) {
            Image(systemName: "star.fill")
                .resizable()
                .frame(width: 100, height: 100)
                .background(.green)

            HStack(alignment: .center) {
                Text("Text that has dynamic height and should be aligned center")
                    .background(.pink)
            }
        }
        .background(.gray)
    }
}

Visualizar captura de tela

Tenho uma String e uma URL contendo áudio e quero compartilhar ambas por meio de um Sharelink.

Eu escrevi um Transferível:

struct TransferableTextAndAudio: Codable, Transferable {
  let text: String
  let audio: URL
  
  static var transferRepresentation: some TransferRepresentation {
    ProxyRepresentation(exporting: \.text)
    FileRepresentation(exportedContentType: .audio) { item in
      return SentTransferredFile(item.audio, allowAccessingOriginalFile: true)
    }
  }
}

e compartilho com:

ShareLink(item: TransferableTextAndAudio(text: "String to share", audio: audioUrl),
          preview: SharePreview("Preview")) {
  Label("Share text and audio", systemImage: "square.and.arrow.up")
}

No entanto, apenas o texto é compartilhado. Quando eu comento a linha ProxyRepresentation, então o áudio é compartilhado. Por que isso? Eu perco algum entendimento de como o Transferable funciona?

Trabalhando em um jogo de cartas simples. Tentando fazer a lógica funcionar para "Puxar" uma carta do baralho e adicioná-la à mão do jogador.

Aqui estão os trechos de código relevantes.

import Foundation

struct Player: Identifiable {
    var id: UUID = UUID()
    var name: String
    var cards: [Card] = []
    var plays: [Plays] = []
    let human: Bool
    
    init(name: String, human: Bool) {
        self.name = name
        self.human = human
    }
    
    mutating func addCard(card: Card)
    {
        print("Adding card \(card.id) to the players cards")
        cards.append(card)
        print("Player now has \(cards.count) cards")
    }
    
}

class Game: ObservableObject {
    @Published var deck:Deck = Deck()
    @Published var discard: [Card] = []
    @Published var players: [Player]
    @Published var round: Int = 1
    
    init(){
        players = []
        players.append(Player(name: "Player 1", human: false))
        players.append(Player(name: "Player 2", human: false))
        players.append(Player(name: "Player 3", human: false))
        players.append(Player(name: "Player 4", human: true))
        //self.deal()
    }
    
    func deal() {
        if players[0].cards.isEmpty {
            for _ in 1...7 {
                players[0].addCard(card: deck.deal())
                players[1].addCard(card: deck.deal())
                players[2].addCard(card: deck.deal())
                players[3].addCard(card: deck.deal())
            }
            print("All the cards are dealt and player 4 now has \(players[3].cards.count) cards")
        } else {
            print("Players already have 7 cards")
        }
    }
    
    
    func discard(card: Card, player: Player) {
        var selectedPlayer = players.first(where: { $0.id == player.id })
        selectedPlayer?.cards.removeAll(where: { $0.id == card.id})
        discard.append(card)
    }
    
    func draw(player: Player){
        var selectedPlayer = players.first(where: { $0.id == player.id })
        let drawnCard = deck.deal()
        print("They drew the \(drawnCard.rank.name) of \(drawnCard.suit.name) with ID \(drawnCard.id)")
        selectedPlayer?.addCard(card: drawnCard)
        
    }
    
}

O que não consigo entender é que quando chamo player.addCard(card: card)de dentro da deal()função na classe Game, funciona perfeitamente e adiciona as cartas como esperado. Mas chamar a mesma função de dentro da drawfunção (na parte inferior da classe game) não adiciona a carta à mão do jogador.

Posso ver pelas instruções print dentro da addCardfunção que ela está sendo chamada e que o ID do cartão que ela está passando está correto (e é diferente para cada tapGesture que a inicia).

Alguma ideia do porquê o array.append()não está realmente sendo adicionado ao array?