WEBVTT

1
00:00.890 --> 00:02.030
Bem-vindo de volta.

2
00:02.030 --> 00:04.970
Neste vídeo, vamos aprender sobre
superfície.

3
00:04.970 --> 00:11.720
O Surface é um novo layout que serve como
uma metáfora central no design de
materiais.

4
00:11.720 --> 00:21.800
A particularidade da superfície é que ela
só pode conter um filho por vez, mas
oferece

5
00:21.800 --> 00:28.190
muitos tratamentos de estilo para o
conteúdo de seus filhos, como elevação,
borda e muito mais.

6
00:28.190 --> 00:35.720
Vamos criar uma nova função composta
chamada my surface (minha superfície).

7
00:35.720 --> 00:44.570
E, dentro desse composable, começarei a
usar o composable de superfície e,

8
00:44.570 --> 00:49.790
dentro da superfície, chamarei minha
função composable de cólon que criamos
anteriormente.

9
00:49.820 --> 00:59.480
Agora, se executarmos nosso aplicativo e
chamarmos minha superfície dentro do

10
00:59.480 --> 01:02.840
setcontent, podemos notar que nada
aconteceu, nada de novo aconteceu.

11
01:03.410 --> 01:08.000
Vamos descer e começar a personalizar
nossa superfície.

12
01:08.000 --> 01:16.680
Dentro da superfície, posso definir o
modificador, a forma, a cor, o conteúdo, a
cor,

13
01:16.680 --> 01:19.830
a elevação tonal, a sombra, a elevação, o
conteúdo da borda e muito mais.

14
01:19.830 --> 01:24.180
Assim, por exemplo, a forma prende as
crianças com uma forma definida.

15
01:24.180 --> 01:30.030
Color preenche a forma com uma cor
definida por você.

16
01:30.030 --> 01:36.600
Se estiverem definidas, a elevação define
a elevação e desenha uma sombra
apropriada, e o

17
01:36.600 --> 01:41.310
conteúdo define a cor padrão para seu
conteúdo com a cor de conteúdo definida.

18
01:41.310 --> 01:44.070
Vamos personalizar nossa superfície aqui.

19
01:44.070 --> 01:52.470
Começarei com o modificador igual ao
modificador de tamanho de ponto 100 dpi.

20
01:52.500 --> 02:02.280
Aqui, estou definindo o tamanho da
superfície como 100 dpi, tanto

21
02:02.280 --> 02:04.050
na altura quanto na largura, usando o
modificador dot size.

22
02:04.050 --> 02:12.090
Em seguida, o segundo parâmetro é cor,
igual ao ponto de cor vermelho.

23
02:12.150 --> 02:21.800
Aqui estou definindo a cor da superfície
como vermelho ponto e a cor de seu
conteúdo como primária.

24
02:27.110 --> 02:35.600
Ou você pode usar outras cores, como
branco, roxo, ou

25
02:35.600 --> 02:36.320
pode definir suas próprias cores dentro da
pasta de cores.

26
02:36.320 --> 02:40.640
Agora vamos adicionar a elevação da sombra
da elevação.

27
02:40.640 --> 02:49.400
Você pode adicionar uma elevação de um db
ou um dp para elevar a superfície acima de
outros elementos.

28
02:49.700 --> 02:56.450
O traço da borda é de um dp e a cor é
verde.

29
02:56.480 --> 03:01.790
Aqui você pode adicionar uma borda verde
para contornar a superfície.

30
03:01.790 --> 03:05.570
Agora, vamos executar nosso aplicativo e
ver as alterações.

31
03:05.840 --> 03:09.020
E você pode ver que essa é a nossa
superfície.

32
03:09.020 --> 03:13.610
Você pode ver que o tamanho é 100 de
largura e altura.

33
03:13.640 --> 03:15.380
A cor é vermelha.

34
03:15.410 --> 03:18.050
O conteúdo é preto.

35
03:18.080 --> 03:22.670
O conteúdo dessa superfície está em preto.

36
03:22.700 --> 03:32.280
A sombra é uma pequena sombra no DP e a
borda é verde com um traço no DP.

37
03:32.730 --> 03:40.890
A maneira mais comum de usar uma
superfície é como o layout raiz de seus
componentes.

38
03:40.890 --> 03:49.410
Como ele pode conter apenas um filho, esse
filho geralmente é

39
03:49.410 --> 03:51.330
outro layout que posiciona o restante dos
elementos e a superfície.

40
03:51.330 --> 03:54.570
O Composable não lida com o
posicionamento.

41
03:54.570 --> 03:56.430
É o que uma criança faz.

42
03:56.460 --> 04:03.420
Observe que há uma implementação de
superfície personalizada popular chamada
card.

43
04:03.450 --> 04:09.900
Um cartão tem exatamente as mesmas cinco
finalidades e só pode conter uma criança.

44
04:09.930 --> 04:16.140
A única diferença entre o cartão e uma
superfície são os parâmetros padrão.

45
04:16.170 --> 04:24.000
Um cartão tem uma elevação predefinida e
usa uma forma de tema de material com
cantos arredondados.

46
04:24.000 --> 04:30.870
Portanto, é assim que definimos e usamos
superfícies no Jetpack Compose.