Bem-vindo de volta.
Neste vídeo, vamos aprender sobre superfície.
O Surface é um novo layout que serve como uma metáfora central no design de materiais.
A particularidade da superfície é que ela só pode conter um filho por vez, mas oferece
muitos tratamentos de estilo para o conteúdo de seus filhos, como elevação, borda e muito mais.
Vamos criar uma nova função composta chamada my surface (minha superfície).
E, dentro desse composable, começarei a usar o composable de superfície e,
dentro da superfície, chamarei minha função composable de cólon que criamos anteriormente.
Agora, se executarmos nosso aplicativo e chamarmos minha superfície dentro do
setcontent, podemos notar que nada aconteceu, nada de novo aconteceu.
Vamos descer e começar a personalizar nossa superfície.
Dentro da superfície, posso definir o modificador, a forma, a cor, o conteúdo, a cor,
a elevação tonal, a sombra, a elevação, o conteúdo da borda e muito mais.
Assim, por exemplo, a forma prende as crianças com uma forma definida.
Color preenche a forma com uma cor definida por você.
Se estiverem definidas, a elevação define a elevação e desenha uma sombra apropriada, e o
conteúdo define a cor padrão para seu conteúdo com a cor de conteúdo definida.
Vamos personalizar nossa superfície aqui.
Começarei com o modificador igual ao modificador de tamanho de ponto 100 dpi.
Aqui, estou definindo o tamanho da superfície como 100 dpi, tanto
na altura quanto na largura, usando o modificador dot size.
Em seguida, o segundo parâmetro é cor, igual ao ponto de cor vermelho.
Aqui estou definindo a cor da superfície como vermelho ponto e a cor de seu conteúdo como primária.
Ou você pode usar outras cores, como branco, roxo, ou
pode definir suas próprias cores dentro da pasta de cores.
Agora vamos adicionar a elevação da sombra da elevação.
Você pode adicionar uma elevação de um db ou um dp para elevar a superfície acima de outros elementos.
O traço da borda é de um dp e a cor é verde.
Aqui você pode adicionar uma borda verde para contornar a superfície.
Agora, vamos executar nosso aplicativo e ver as alterações.
E você pode ver que essa é a nossa superfície.
Você pode ver que o tamanho é 100 de largura e altura.
A cor é vermelha.
O conteúdo é preto.
O conteúdo dessa superfície está em preto.
A sombra é uma pequena sombra no DP e a borda é verde com um traço no DP.
A maneira mais comum de usar uma superfície é como o layout raiz de seus componentes.
Como ele pode conter apenas um filho, esse filho geralmente é
outro layout que posiciona o restante dos elementos e a superfície.
O Composable não lida com o posicionamento.
É o que uma criança faz.
Observe que há uma implementação de superfície personalizada popular chamada card.
Um cartão tem exatamente as mesmas cinco finalidades e só pode conter uma criança.
A única diferença entre o cartão e uma superfície são os parâmetros padrão.
Um cartão tem uma elevação predefinida e usa uma forma de tema de material com cantos arredondados.
Portanto, é assim que definimos e usamos superfícies no Jetpack Compose.