SwiftUI: Como criar um gradiente com um tom mais claro?

Question

Marcel Derks

Asked: 2025-04-04 22:53:45 +0800 CST2025-04-04 22:53:45 +0800 CST 2025-04-04 22:53:45 +0800 CST

Como alinhar à direita o conteúdo em um VStack de tamanho intrínseco no SwiftUI

772

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.

Cerque com HStacke coloque um Spacerà esquerda.
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:

2 respostas

Voted

Benzy Neez · Answer 1 · 2025-04-05T00:04:39+08:00

O alinhamento pode ser obtido usando uma combinação de modificadores .framee ..fixedSize

Aplique .frame(maxWidth: .infinity, alignment: .trailing)ao(s) texto(s) que você quer alinhado(s) à direita. Isso faz com que o texto se estenda até a largura máxima disponível, com o conteúdo alinhado à direita.

Normalmente, isso faria com que o contêiner se estendesse para a largura total disponível também. Então, para evitar que isso aconteça:

Aplicar .fixedWidth()ao VStack. Isso diz para ele adotar a largura ideal de seu conteúdo.

Então, o modo como funciona é que o VStacké dimensionado para a largura ideal do seu conteúdo e, dentro dessa restrição, o maxWidth: .infinityno texto entra em vigor.

ScrollView {
    VStack(alignment: .leading) {

        HStack {
            VStack(alignment: .leading) {
                Text("Alignment Test")
                Text("This is a longer text left aligned")
                Text("10.5.2020")
                    .frame(maxWidth: .infinity, alignment: .trailing) // 👈 added
            }
            .padding(16)
            .fixedSize() // 👈 added
            .background(Color.blue)

            Spacer(minLength: 50)
        }

        HStack {
            VStack(alignment: .leading) {
                Text("left")
                Text("Date should right align to here ->")
                Text("10.5.2020")
                    .frame(maxWidth: .infinity, alignment: .trailing) // 👈 added
            }
            .padding(16)
            .fixedSize() // 👈 added
            .background(Color.blue)

            Spacer(minLength: 50)
        }
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .border(.red)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.gray.opacity(0.5))

Captura de tela

EDIT Em um comentário, você disse que o texto mais longo pode ser tão longo que precisará ser quebrado. Mas aplicar .fixedSize()impedirá o quebra.

Como uma abordagem alternativa, você pode considerar usar uma coluna única Grid:

Substitua o interno VStackpor Grid.
Adicione .gridCellAnchor(.trailing)as datas.

ScrollView {
    VStack(alignment: .leading) {

        HStack {
            Grid(alignment: .leading) { // 👈 VStack replaced
                Text("Alignment Test")
                Text("This is a longer text left aligned")
                Text("10.5.2020")
                    .gridCellAnchor(.trailing) // 👈 added
            }
            .padding(16)
            .background(Color.blue)

            Spacer(minLength: 50)
        }

        HStack {
            Grid(alignment: .leading) {
                Text("left")
                Text("The quick brown fox jumps over the lazy dog")
                Text("10.5.2020")
                    .gridCellAnchor(.trailing)
            }
            .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))

Captura de tela

Marcel Derks · Answer 2 · 2025-04-05T14:14:38+08:00

Encontrei uma solução alternativa que não é tão elegante quanto a que usa Grid, mas está funcionando mesmo assim e quero documentá-la aqui. Por exemplo, o Grid não está disponível antes do iOS 16 e você pode precisar dar suporte a esses dispositivos em produção.

 ScrollView {
            VStack(alignment: .leading) {
                
                HStack {
                    VStack(alignment: .leading) {
                        Text("Title")
                        Text("Not AI")
                        Text("10.5.2020").foregroundStyle(.clear)
                    }
                    .padding(16)
                    .background(Color.blue)
                    .overlay(alignment: .bottomTrailing) {
                        Text("10.5.2020")
                            .padding(EdgeInsets(top: 0, leading: 0, bottom: 16, trailing: 16))
                    }
                    
                    Spacer(minLength: 50)
                }
                
                HStack {
                    VStack(alignment: .leading) {
                        Text("left")
                        Text("The quick brown fox jumps over the lazy dog>")
                        Text("10.5.2020").foregroundStyle(.clear)
                    }
                    .padding(16)
                    .background(Color.blue)
                    .overlay(alignment: .bottomTrailing) {
                        Text("10.5.2020")
                            .padding(EdgeInsets(top: 0, leading: 0, bottom: 16, trailing: 16))
                    }
                    
                    Spacer(minLength: 50)
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .border(.red)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.gray.opacity(0.5))

Nessa abordagem, estou usando sobreposições com bottomTrailingalinhamento para adicionar o texto da data.

Note que eu mantenho o texto da data no original VStackpara ocupar o Espaço lá. Com o foregroundStyle = .clear estou escondendo esse texto espaçador para que ele não seja mostrado na IU.

A desvantagem dessa abordagem é que ela só funciona quando você deseja adicionar seu rótulo no canto inferior direito.

Como alinhar à direita o conteúdo em um VStack de tamanho intrínseco no SwiftUI

Reformatar números, inserindo separadores em posições fixas

Por que os conceitos do C++20 causam erros de restrição cíclica, enquanto o SFINAE antigo não?

Problema com extensão desinstalada automaticamente do VScode (tema Material)

Vue 3: Erro na criação "Identificador esperado, mas encontrado 'import'" [duplicado]

Qual é o propósito de `enum class` com um tipo subjacente especificado, mas sem enumeradores?

Como faço para corrigir um erro MODULE_NOT_FOUND para um módulo que não importei manualmente?

`(expression, lvalue) = rvalue` é uma atribuição válida em C ou C++? Por que alguns compiladores aceitam/rejeitam isso?

Um programa vazio que não faz nada em C++ precisa de um heap de 204 KB, mas não em C

PowerBI atualmente quebrado com BigQuery: problema de driver Simba com atualização do Windows

AdMob: MobileAds.initialize() - "java.lang.Integer não pode ser convertido em java.lang.String" para alguns dispositivos

Como alinhar à direita o conteúdo em um VStack de tamanho intrínseco no SwiftUI

2 respostas

relate perguntas