Perguntas[swiftui](coding)

Sou iniciante no SwiftUI e estou tentando entender como posso manter uma visualização centralizada horizontalmente na tela do dispositivo, ao mesmo tempo em que ancorar uma visualização adicional na borda posterior (sem descentralizar a visualização original).

Tenho um protótipo que funciona, mas é um pouco feio e depende de "onGeometryChange" para rastrear o tamanho da visualização centralizada a fim de deslocar a visualização adjacente na quantidade correta. O motivo pelo qual isso funciona é que usar offset não altera a geometria da ZStack que a contém, que considera que a visualização adjacente ocupa a mesma posição centralizada que a primeira.

Embora minha abordagem pareça funcionar, ela parece um pouco desastrosa, pois depende de vários ciclos de layout (um para criar o layout do ZStack e da visualização centralizada, depois ler a alteração da geometria e, por fim, atualizar a posição da visualização adjacente). Além disso, as dimensões do contêiner ZStack não incluem o deslocamento da visualização adjacente.

struct ContentView: View {
    
    @State private var centeredLabelWidth: CGFloat = .zero
    @State private var offsetLabelWidth: CGFloat = .zero
    
    var body: some View {
        ZStack {
            Text("Centered Label")
            .border(Color.blue)
            .padding(1)
            .onGeometryChange(for: CGFloat.self) { $0.size.width } action: {
                centeredLabelWidth = $0
            }
            
            Text("Adjacent Label")
            .border(Color.red)
            .padding(1)
            .onGeometryChange(for: CGFloat.self) { $0.size.width } action: {
                offsetLabelWidth = $0
            }
            .offset(x: centeredLabelWidth / 2 + offsetLabelWidth / 2)
        }
    }
}

Agradeço muito qualquer contribuição da comunidade!

Estou criando um aplicativo em que a interface principal é uma WKWebView e o SwiftUI é usado apenas para algumas funções do aplicativo. Estou com um problema ao usar a interface do sistema SwiftUI TabView. Se você executar este aplicativo de exemplo, haverá um comportamento que não consigo explicar.

enum Page: String, Hashable, CaseIterable, Identifiable {
    case settings = "gear"
    case radio = "radio"
    case connect = "dot.radiowaves.right"
    
    var id: String { rawValue }
}

struct RandomColorHostedWebView: UIViewRepresentable {
    let webView: WKWebView
    
    init() {
        // Clear cache to be extra sure https://stackoverflow.com/a/34376943/3833632
        WKWebsiteDataStore.default().removeData(ofTypes: [WKWebsiteDataTypeDiskCache, WKWebsiteDataTypeMemoryCache], modifiedSince: Date(timeIntervalSince1970: 0), completionHandler:{ })
        let webConfiguration = WKWebViewConfiguration()
        self.webView = WKWebView(frame: .zero, configuration: webConfiguration)
        let urlRequest = URLRequest(url: URL(string: "https://randomcolour.com")!)
        self.webView.load(urlRequest)
    }
    
    func makeUIView(context: Context) -> UIView {
        return webView
    }

    func updateUIView(_ uiView: UIView, context: Context) {
    }
}



struct ContentView: View {
    let pages = Page.allCases
    
    let randomColor: RandomColorHostedWebView
    init() {
        randomColor = RandomColorHostedWebView()
    }
    
    var body: some View {
        TabView {
            ForEach(pages) { page in
                randomColor
                    .tag(page)
                    .tabItem {
                        Label(page.rawValue, systemImage: page.rawValue)
                    }
            }
        }
    }
}

Se você executar isso, notará que cada aba clicada gera uma animação de atualização, mas não carrega uma nova cor. Além disso, quando você retorna para uma aba que já visitou, ela estará em branco.

Esse é um comportamento que não consigo explicar. (Gostaria de entender por que isso acontece)

Dito isso, presumo que a causa seja que o SwiftUI não tem ideia de que cada uma das visualizações pai do tabItem é a mesma visualização, pois elas têm identidades estruturais diferentes.

Então, estou procurando uma solução alternativa para deixar o fundo do TabView claro para que eu possa usar um ZStack, limitar a TabViewaltura somente para o conteúdo da aba para que eu possa usar um VStack, ou algo mais.

Esta solução existente tenta remover o fundo da TabView, mas parece não funcionar . Concordo com um comentarista que diz que a solução alternativa parece ter sido quebrada em versões posteriores do sistema operacional.

   var body: some View {
        ZStack {
            randomColor
            TabView {
                ForEach(pages) { page in
                    Color.clear
                        // https://stackoverflow.com/questions/63178381/make-tabview-background-transparent
                        .background(BackgroundHelper())
                        .tag(page)
                        .tabItem {
                            Label(page.rawValue, systemImage: page.rawValue)
                        }
                }
            }
        }
    }

Quando o usuário clica uma vez em uma SwiftUI Tableno macOS, gostaria de saber o par (coluna, linha) clicado, ou ponto. Adicionei onTapGesture()um manipulador ao Table, mas ele nunca é invocado. Como posso descobrir qual (coluna, linha) foi clicada?

Meu objetivo é implementar a seleção de células no meu modelo de visualização. Preciso ser capaz de determinar o par clicado (coluna, linha) para selecionar a célula correta no modelo de visualização.

Abaixo está o código de exemplo da Apple, ao qual adicionei o onTapGesture()manipulador ineficaz.

struct Person: Identifiable {
    let givenName: String
    let familyName: String
    let emailAddress: String
    let id = UUID()
}
struct PeopleTable: View {
    @State private var people = [
        Person(givenName: "Juan", familyName: "Chavez", emailAddress: "[email protected]"),
        Person(givenName: "Mei", familyName: "Chen", emailAddress: "[email protected]"),
        Person(givenName: "Tom", familyName: "Clark", emailAddress: "[email protected]"),
        Person(givenName: "Gita", familyName: "Kumar", emailAddress: "[email protected]")
    ]
    var body: some View {
        Table(people) {
            TableColumn("Given Name", value: \.givenName)
            TableColumn("Family Name", value: \.familyName)
            TableColumn("E-Mail Address", value: \.emailAddress)
        }
        .onTapGesture(perform: { p in
            print("clicked point \(p)")
        })
    }
}
#Preview {
    PeopleTable()
}

Tenho um gráfico Swift simples onde estou tentando colocar uma RuleMark atrás de uma BarMark.

Quando o RuleMark é incluído antes do BarMark, as barras ficam irregulares e se movem conforme a seleção avança. Exemplo reproduzível abaixo.

import SwiftUI
import Charts

struct datStruct: Identifiable {
    let id = UUID()
    let label: String
    let value: Int
}

struct ContentView: View {
    
    let dat = [
        datStruct(label: "A", value: 1),
        datStruct(label: "B", value: 2),
        datStruct(label: "C", value: 3)
    ]
    @State var rawSelection: String?
    
    var selection: datStruct? {
        guard let rawSelection else {return nil}
        return dat.first(where: { $0.label == rawSelection })
    }
    
    var body: some View {
    
        Chart(){
            
            if let selection {
                RuleMark(x: .value("label", selection.label))
                    .foregroundStyle(.red)
            }
            
            ForEach(dat) {dat in
                BarMark(x: .value("label", dat.label), y: .value("count", dat.value))
            }
        }
        .chartXSelection(value: $rawSelection)
    }
}

#Preview {
    ContentView()
}

Quando a RuleMark é movida para depois da BarMark e um ZIndex negativo é aplicado, a regra é exibida atrás da barra, conforme desejado. Mas, quando adiciono animação à seleção, a regra aparece brevemente acima da barra e, em seguida, é animada para trás dela.

Como posso sempre mostrar o RuleMark atrás do BarMark com animação aplicada?

import SwiftUI
import Charts

struct datStruct: Identifiable {
    let id = UUID()
    let label: String
    let value: Int
}

struct ContentView: View {
    
    let dat = [
        datStruct(label: "A", value: 1),
        datStruct(label: "B", value: 2),
        datStruct(label: "C", value: 3)
    ]
    @State var rawSelection: String?
    
    var selection: datStruct? {
        guard let rawSelection else {return nil}
        return dat.first(where: { $0.label == rawSelection })
    }
    
    var body: some View {
    
        Chart(){
        
            ForEach(dat) {dat in
                BarMark(x: .value("label", dat.label), y: .value("count", dat.value))
            }
            
            if let selection {
                RuleMark(x: .value("label", selection.label))
                    .foregroundStyle(.red)
                    .zIndex(-1)
            }
        }
        .chartXSelection(value: $rawSelection.animation())
    }
}

#Preview {
    ContentView()
}

Quero desenhar uma imagem sobreposta a um painel desfocado com texto. O problema é que a moldura do painel depende da moldura do texto. Ao mesmo tempo, masko modificador de tempo é definido separadamente do texto e do painel.

Meu código:

struct SomeView: View {
    @State var frame: CGRect = .zero
    
    var body: some View {
        ZStack {
            Image(.defaultCard)
            Image(.defaultCard)
                .blur(radius: 30)
                .mask {
                    Rectangle()
                        .frame(width: frame.width, height: frame.height)
                        .position(x: frame.midX, y: frame.midY)
                }
            ZStack(alignment: .bottomLeading) {
                Color.clear
                HStack {
                    Text("...")
                    Text("...")
                }
                .padding()
                .background {
                    GeometryReader { geometry in
                        Color.clear
                            .onAppear {
                                frame = geometry.frame(in: .global)
                            }
                            .onChange(of: geometry.size) { _ in
                                frame = geometry.frame(in: .global)
                            }
                    }
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
}

Tudo está desenhado, mas a posição da máscara está incorreta. O código a seguir retorna um quadro incorreto:

frame = geometry.frame(in: .global)

Como resolver esse problema? Entendo que eu poderia usar o desfoque do UIKit, mas o desfoque do SwiftUI atende melhor às minhas necessidades.

Estou tendo problemas para salvar imagens no SwiftData e não tenho certeza da melhor maneira de fazer isso.

Tenho um modelo de dados EntryModel para uma entrada individual como tal:

@Model
class EntryModel {
   var type: EntryType
   var who: UserModel
   var what: String
   var value: Double? = nil
   var note: String
   @Attribute(.externalStorage) var images: [Data]?
   var when: Date = Date.now

  init(type: EntryType, who: UserModel, what: String, note: String, images: [Data] = [], when: Date) {
    self.type = type
    self.who = who
    self.what = what
    self.note = note
    self.images = images
    self.when = when
}

Em seguida, tenho uma NewEntryView que permite aos usuários criar uma nova entrada e anexar algumas imagens opcionais para obter informações adicionais. O código fica assim:

struct New EntryView {
   @State private var entryItems = [PhotosPickerItem]()
   @State private var entryImages = [Image]()

// Other code pertaining to different parts of my form

HStack {
    PhotosPicker(selection: $entryItems, maxSelectionCount: 5, matching: .images) {
        Image(systemName: "plus")
          .font(.title)
          .foregroundStyle(.adaptiveBlack)
          .frame(width: 80, height: 70)
          .background(
              RoundedRectangle(cornerRadius: 10)
                 .stroke(lineWidth: 2)
                 .fill(selectedEntryType.color)
                 .frame(width: 70, height: 60)
           )
       }
                        
       ScrollView(.horizontal) {
          HStack(spacing: 10) {
             ForEach(0..<entryImages.count, id: \.self) { i in
                entryImages[i]
                    .resizable()
                    .scaledToFill()
                    .clipShape(RoundedRectangle(cornerRadius: 10))
                    .frame(height: 60)
             }
          }
          .onChange(of: entryItems) {
             Task {
                entryImages.removeAll()
                                    
                for item in entryItems {
                   if let image = try? await item.loadTransferable(type: Image.self) {
                   entryImages.append(image)
                }
            }
        }
   }

// More code

Button {
   let entry = EntryModel(type: selectedEntryType, who: selectedUser!, what: titleTextField, note: noteTextField, when: selectedDate)
   modelContext.insert(entry)
} label: {
// Custom label
}

Agora, com esta implementação atual, posso de fato selecionar imagens do meu álbum de fotos e preenchê-las no HStack.

Quando o botão é clicado na parte inferior, as outras informações preenchidas pelo usuário também são salvas no SwiftData e podem ser usadas em todo o aplicativo.

O problema que tenho é salvar essas imagens no SwiftData para serem usadas em todo o aplicativo.

Devo inseri-los no contexto do modelo como faço com os outros valores? Se sim, como?

Caso contrário, como eu alteraria meu código atual?

Qualquer ajuda será apreciada.

Aliás, não tenho certeza da sua relevância, mas desde que implementei o PhotosPicker, recebo o seguinte aviso no Xcode:

PHPickerViewControllerDelegate_Private não responde a _pickerDidPerformConfirmationAction:

No meu caso específico, enfrentei um problema no SwiftUI que não permite adicionar mais de um alerta ao mesmo arquivo View. Esse problema é conhecido e já foi resolvido, por exemplo, adicionando visualizações vazias adicionais:

https://stackoverflow.com/a/67395026/805701

Mas há outro problema: o SwiftUI não reage a essa situação (os alertas simplesmente pulam). Portanto, você precisa pesquisar manualmente em todo o código para encontrar essas duplicatas, que podem ocorrer em arquivos diferentes.

É possível de alguma forma indicar onde essas duplicatas ocorrem, por exemplo, adicionando um wrapper sobre o .alert(...)modificador padrão que é gerado fatalErrorquando esse modificador já foi adicionado a uma visualização?

Quando clico no menu lateral, a barra de ferramentas fica oculta, mas todo o fundo é movido para cima.

var body: some View {
        NavigationStack {
            ZStack {
                VStack {
                    SlideView()
                    ButtonView()
                }
                SideMenuView(isShowing: $showMenu, selectedTab: $selectedTab)
            }
            .toolbar(showMenu ? .hidden : .visible, for: .navigationBar)
            .navigationTitle("HKSTBC")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .topBarLeading) {
                    Button(action: {
                        showMenu.toggle()
                    }, label: {
                        Image(systemName: "line.3.horizontal")
                    })
                }
            }
        }
    }

Acabei de colocar .navigationBarTitleDisplayMode(.inline), mas não funciona. Como faço para o plano de fundo parar de se mover para cima?

Essa provavelmente é uma pergunta simples, mas estou com muita dificuldade.

Vamos supor que eu tenha o seguinte Layout de Visualização no SwiftUI

Quero que a String de Data 10.5.2020seja alinhada à direita no VStack pai.

Mas é importante que, ao fazer isso, o tamanho intrínseco do VStack não seja quebrado.

Estou dizendo isso porque as duas soluções mais óbvias estão fazendo isso.

1. Cerque com HStacke coloque um Spacerà esquerda.
2. Use quadro com maxWidth: .infinityealignment: .trailing

Dei uma olhada mais aprofundada nos guias de alinhamento, mas não consegui consertar com isso.

Meus melhores resultados até agora foram com GeometryReader, definindo a largura do rótulo de texto quase igual à largura do VStack circundante.

Mas infelizmente minha estrutura de alvo é muito mais complexa e essa abordagem leva a problemas nessa estrutura. Também GeometryReaderparece inapropriado fazer alinhamento.

struct ContentView: View {
    var body: some View {
        ScrollView {
            VStack(alignment: .leading) {
                
                HStack {
                    VStack(alignment: .leading) {
                        Text("Alignment Test")
                        Text("This is a longer text left aligned")
                         
                        
                        Text("10.5.2020")
                    }
                    .padding(16)
                    .background(Color.blue)
                    
                    Spacer(minLength: 50)
                }
                
                
                HStack {
                    VStack(alignment: .leading) {
                        Text("left")
                        Text("Date should rigzht align to here <-")
                        Text("10.5.2020")
                    }
                    .padding(16)
                    .background(Color.blue)
                    
                    Spacer(minLength: 50)
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .border(.red)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.gray.opacity(0.5))
    }
}

Prévias:

Estou tentando implementar um scrubber discreto com marcações de texto no SwiftUI da seguinte forma. Meu problema é que não consigo determinar a altura do HStackinterior do ScrollViewapriori, então tentei usar onGeometryChangeo modificador, mas não funciona (ou seja, o texto de sobreposição é truncado). Uma maneira de consertar é usando GeometryReadere atribuindo a altura de HStackcom base no proxy de geometria, mas quero saber se há outra maneira de sair sem usar GeometryReader.

struct ScrollScrubber: View {
    var config:ScrubberConfig
    
    @State var viewSize:CGSize?
    
    var body: some View {
        let horizontalPadding = (viewSize?.width ?? 0)/2
        
        ScrollView(.horizontal) {
            HStack(spacing:config.spacing) {
                let totalSteps = config.steps * config.count
                
                ForEach(0...totalSteps, id: \.self) { index in
                    let remainder = index % config.steps
                    Divider()
                        .background( remainder == 0 ? Color.primary : Color.gray)
                        .frame(width: 0, height: remainder == 0 ? 20 : 10, alignment: .center)
                        .frame(maxHeight: 20, alignment: .bottom)
                        .overlay(alignment: .bottom) {
                            if remainder == 0 {
                                Text("\(index / config.steps)")
                                    .font(.caption)
                                    .fontWeight(.semibold)
                                    .textScale(.secondary)
                                    .fixedSize()
                                    .offset(y:20)
                            }
                        }
                    
                }
            }
            .frame(height:viewSize?.height)
            
        }
        .scrollIndicators(.hidden)
        .safeAreaPadding(.horizontal, horizontalPadding)
        .onGeometryChange(for: CGSize.self) { proxy in
            proxy.size
        } action: { newValue in
            viewSize = newValue
            print("View Size \(newValue)")
        }


    }
}

struct ScrubberConfig:Equatable {
    var count:Int
    var steps:Int
    var spacing:CGFloat
}

#Preview {
    ScrollScrubber(config: .init(count: 100, steps: 5, spacing: 5.0))
        .frame(height:60)
}