1
00:00:02,460 --> 00:00:06,390
Jelas, layar ini sekarang tidak begitu berguna dan karena itu sekarang

2
00:00:06,390 --> 00:00:13,500
saya akan pergi ke teks yang saya gunakan sebagai boneka dan menggantinya dengan katakanlah memulai permainan baru, sesuatu seperti itu dan

3
00:00:13,500 --> 00:00:21,480
di bawah ini, saya ingin memiliki input area dengan sedikit drop shadow, jadi ini tampilan kartu yang khas yang mungkin Anda ketahui dari

4
00:00:21,540 --> 00:00:27,420
beberapa aplikasi dan situs web di mana Anda memiliki sebuah kotak dengan sedikit drop shadow di belakangnya,

5
00:00:27,420 --> 00:00:29,220
mungkin beberapa sudut bulat.

6
00:00:29,400 --> 00:00:36,570
Saya ingin membuatnya kembali di sini, jadi saya akan menambahkan tampilan di sini, tampilan karena sekali lagi itu adalah elemen yang sangat

7
00:00:36,600 --> 00:00:42,120
fleksibel, kita dapat menerapkan banyak gaya di sana, kita dapat menambahkan bayangan dan sudut bundar kita di

8
00:00:42,150 --> 00:00:43,460
sana dan kemudian

9
00:00:43,470 --> 00:00:49,080
tahan konten dalam tampilan itu, jadi itu bagus untuk memiliki gaya umum wadah dan sekarang di dalam

10
00:00:49,080 --> 00:00:56,910
tampilan itu, saya ingin memiliki teks di mana kita katakan pilih nomor misalnya dan di mana kita kemudian juga ingin memiliki bidang teks di

11
00:00:57,150 --> 00:00:58,580
mana pengguna dapat memasukkan sesuatu.

12
00:00:58,590 --> 00:00:59,310
Jadi

13
00:00:59,430 --> 00:01:06,300
di sana, saya akan menambahkan komponen input teks yang merupakan komponen bawaan di mana pengguna dapat menggunakan keyboard untuk memasukkan

14
00:01:06,300 --> 00:01:11,970
nilai dan di sini, mereka harus memasukkan angka. Kami akan mengonfigurasikan ini dan menata ini dalam sedetik,

15
00:01:11,970 --> 00:01:17,820
untuk saat ini saya hanya akan memasukkannya seperti itu dan di bawah itu, saya ingin ada dua tombol

16
00:01:17,850 --> 00:01:18,810
yang saling

17
00:01:18,810 --> 00:01:25,190
bersebelahan dan itu penting, di samping satu sama lain, tidak di bawah satu sama lain lain yang memungkinkan kita untuk

18
00:01:25,190 --> 00:01:32,510
mengatur ulang input dan memilih yang baru atau mengkonfirmasi yang dipilih. Jadi kita memerlukan tampilan di sini karena itu memungkinkan kita untuk memposisikan item berdampingan satu

19
00:01:32,660 --> 00:01:37,520
sama lain sedangkan item ini diposisikan di atas satu sama lain maka karena jika saya hanya akan menambahkan dua

20
00:01:37,560 --> 00:01:42,650
tombol di sini, maka saya harus mengubah pandangan ini arah fleksibel untuk memilikinya selanjutnya satu sama lain tetapi kemudian input teks

21
00:01:42,680 --> 00:01:45,420
dan teks juga akan duduk di sebelah satu sama lain.

22
00:01:45,500 --> 00:01:51,950
Jadi sekarang saya akan menambahkan tampilan di sini sehingga dalam tampilan ini, tampilan sekitarnya, ini, ini dan komponen tampilan ini

23
00:01:52,250 --> 00:01:54,010
duduk di atas satu

24
00:01:54,020 --> 00:02:00,590
sama lain, jadi pada sumbu vertikal tetapi di dalam tampilan ini, saya sekarang juga dapat memastikan bahwa barang-barang di sana

25
00:02:00,590 --> 00:02:05,270
kemudian duduk bersebelahan, jadi di sumbu horizontal dan itulah yang saya inginkan di sini.

26
00:02:05,450 --> 00:02:11,480
Jadi saya akan mengimpor tombol bawaan yang merupakan salah satu komponen tampilan yang secara otomatis menyesuaikan diri dengan

27
00:02:11,510 --> 00:02:17,540
platform yang mendasarinya, kemudian dalam modul terpisah, Anda akan belajar bagaimana Anda bisa mencari tahu secara manual pada

28
00:02:17,630 --> 00:02:21,990
platform mana Anda menjalankan untuk menyesuaikan tampilan dan nuansa aplikasi Anda untuk itu.

29
00:02:22,220 --> 00:02:29,450
Di sini, kita akan pergi dengan tombol built-in dan memberikan yang pertama judul reset dan yang kedua, tombol kedua di

30
00:02:29,510 --> 00:02:32,450
sini judul konfirmasi dan kemudian di sini, onPress

31
00:02:32,450 --> 00:02:39,740
akan saat ini tidak melakukan apa-apa, jadi itu hanya sebuah fungsi kosong, cukup tambahkan sehingga kita memiliki prop sudah ada

32
00:02:39,740 --> 00:02:42,000
di sana, kita akan menambahkan logika

33
00:02:42,050 --> 00:02:43,710
nanti dan untuk sekarang,

34
00:02:43,850 --> 00:02:46,140
kita akan memiliki tombol di sini.

35
00:02:46,250 --> 00:02:51,330
Sekarang penataan rambut akan hilang, seperti yang saya katakan, tombol harus duduk bersebelahan.

36
00:02:51,410 --> 00:02:57,170
Oleh karena itu saya akan memberikan pandangan ini di sini yang memegang tombol gaya menunjuk

37
00:02:57,170 --> 00:02:59,060
ke objek gaya dan

38
00:02:59,060 --> 00:03:02,370
di sana, katakanlah wadah tombol, nama ini seperti

39
00:03:02,520 --> 00:03:10,930
selalu sepenuhnya terserah Anda dan saya juga ingin memberikan pandangan ini yang memegang input saya dan gaya di sini, mengacu pada objek

40
00:03:10,960 --> 00:03:14,930
gaya dan saya akan menggunakan katakanlah wadah masukan, nama ini

41
00:03:15,040 --> 00:03:20,850
tentu juga terserah Anda dan ini di sini, saya ingin gaya ini seperti judul khusus,

42
00:03:20,950 --> 00:03:27,090
mungkin dengan ukuran font yang lebih besar, jadi di sini, saya akan menetapkan gaya judul katakanlah.

43
00:03:27,300 --> 00:03:36,900
Sekarang kita bisa pergi ke sana di stylesheet kita dan menambahkan judul, menambahkan wadah input dan juga menambahkan wadah tombol dan sekarang kita

44
00:03:37,080 --> 00:03:43,330
dapat mulai menambahkan beberapa gaya di sana. Sekarang untuk judul, sekali lagi saya

45
00:03:43,330 --> 00:03:47,330
ingin mengatur ukuran font, jadi saya akan mengatur

46
00:03:47,410 --> 00:03:58,750
ukuran font seperti ini, mengaturnya menjadi katakanlah 20 dan mungkin juga menambahkan beberapa spasi pada sumbu vertikal dengan margin vertikal katakanlah 10, 10 seperti

47
00:03:58,750 --> 00:04:09,750
ini dan selalu diingat, margin vertikal pada dasarnya menggantikan margin bawah dan margin atas dan sekarang ke wadah tombol dan saya akan kembali

48
00:04:09,990 --> 00:04:17,050
ke wadah input dalam hitungan detik, wadah tombol akan mendapatkan arah fleksibel baris, standarnya adalah

49
00:04:17,060 --> 00:04:19,780
kolom tapi sekarang saya ingin memiliki

50
00:04:19,790 --> 00:04:23,790
item yang duduk bersebelahan, jadi kita perlu menggunakan

51
00:04:23,790 --> 00:04:25,870
baris di sini.

52
00:04:25,870 --> 00:04:31,420
Saya ingin menetapkan lebar di sini karena jika kita tidak menetapkan lebar pada wadah tombol, itu

53
00:04:31,450 --> 00:04:34,960
hanya akan sama lebarnya dengan dua tombol bersama, sebagai gantinya

54
00:04:34,960 --> 00:04:41,050
saya ingin menggunakan lebar induk, jadi dari pandangan ini di sini dan kemudian posisikan tombol di dalam tampilan

55
00:04:41,050 --> 00:04:41,880
ini, jadi

56
00:04:41,890 --> 00:04:47,140
saya ingin melakukan yang sebaliknya, bukan gaya tampilan sesuai dengan tombol tetapi posisi tombol sesuai

57
00:04:47,140 --> 00:04:47,970
dengan tampilan.

58
00:04:48,160 --> 00:04:55,150
Jadi saya akan memberikan wadah tombol tampilan ini dan lebar eksplisit di sini dan sekarang untuk memposisikan tombol-tombol di sana,

59
00:04:55,150 --> 00:04:55,590
kita

60
00:04:55,690 --> 00:05:01,630
dapat menggunakan justifyContent untuk memposisikannya di sepanjang sumbu utama yang untuk baris arah lentur dibiarkan ke kanan

61
00:05:01,630 --> 00:05:07,930
dan di sana saya akan memilih ruang antara sehingga tombol duduk di tepi kiri dan kanan baris ini

62
00:05:07,930 --> 00:05:15,000
dan mendistribusikan semua ruang kosong yang tersedia di antara mereka. Juga tambahkan sedikit padding horizontal di sini sehingga kami memiliki

63
00:05:15,000 --> 00:05:21,660
beberapa spasi di kiri dan kanan dalam tampilan kami, mungkin 15 sehingga tombol tidak benar-benar duduk langsung di

64
00:05:21,660 --> 00:05:24,920
tepi di kiri dan kanan tetapi ada beberapa

65
00:05:25,020 --> 00:05:29,420
melamun di kiri dan kanan. Oke, jadi dengan itu

66
00:05:29,560 --> 00:05:35,240
jika kita menyimpan ini, kita melihat apa yang tidak saya ketahui

67
00:05:35,660 --> 00:05:39,860
tentang Anda tetapi yang tidak terlihat bagus, bukan?

68
00:05:39,860 --> 00:05:45,650
Sekarang masalahnya adalah bahwa wadah input belum memiliki gaya. Wadah input menampung semua input, oleh karena itu

69
00:05:45,650 --> 00:05:48,340
stylings di sana terlihat agak tidak aktif.

70
00:05:49,040 --> 00:05:56,000
Jadi kita harus memberi wadah masukan beberapa gaya dan di sana, saya ingin menambahkan lebar dan

71
00:05:56,090 --> 00:06:02,690
sekarang Anda dapat menggunakan lebar hardcoded katakanlah 300 piksel atau menggunakan lebar dan persentase.

72
00:06:02,990 --> 00:06:11,570
Sekarang saya akan menambahkan lebar di sini 300 tetapi juga menambahkan lebar maks 80% sehingga kita memiliki lebar 300 piksel tetapi jika perangkat akan terlalu

73
00:06:11,570 --> 00:06:17,120
kecil, jadi itu sedikit responsif yang saya tambahkan di sini sudah, jika perangkat akan terlalu kecil,

74
00:06:17,120 --> 00:06:23,300
kami memastikan bahwa lebar kami tidak melebihi 80%. Dan kemudian saya ingin menyelaraskan item di

75
00:06:23,300 --> 00:06:25,840
tengah, perlu diingat wadah input

76
00:06:25,850 --> 00:06:29,600
adalah pandangan, karena itu menggunakan flexbox, menggunakan default kolom

77
00:06:29,600 --> 00:06:35,420
arah lentur dan oleh karena itu dengan menyelaraskan item center, kami menempatkan item di

78
00:06:35,630 --> 00:06:39,240
tengah pada sumbu silang yang kiri ke kanan,

79
00:06:39,260 --> 00:06:44,500
jadi kami memusatkan item secara horizontal. Sekarang dengan itu, sekarang ini terlihat jauh lebih

80
00:06:44,500 --> 00:06:46,140
baik, kita tidak bisa

81
00:06:46,180 --> 00:06:48,780
benar-benar melihat input tapi itu yang lama, kan?

82
00:06:48,970 --> 00:06:53,710
Kita harus menatanya sehingga kita benar-benar bisa melihatnya. Kami melihat tombol dan kita dapat

83
00:06:53,710 --> 00:06:57,710
melihat bahwa tata letak dan gaya umum kami mengambil beberapa bentuk.

84
00:06:58,090 --> 00:07:01,440
Namun, saya belum 100% senang dengan tampilan ini.