1
00:00:02,300 --> 00:00:07,270
Untuk memberi style pada item yang terpisah, saya akan membuat lagi komponen yang terpisah

2
00:00:07,350 --> 00:00:11,620
dan saya akan menamainya mealitem. js, nama seperti

3
00:00:11,640 --> 00:00:15,320
biasa sepenuhnya terserah Anda dan di sana, Anda

4
00:00:15,320 --> 00:00:18,200
tahu permainannya, kami membuat komponen Bereaksi

5
00:00:18,440 --> 00:00:25,360
dengan mengimpor Bereaksi, kami mungkin juga akan memerlukan tampilan, teks, dan stylesheet dan mungkin

6
00:00:25,460 --> 00:00:32,610
juga beberapa hal lain dari Bereaksi Asli. Kemudian kami mengatur komponen, makanan, di mana kami menerima alat peraga dan

7
00:00:32,610 --> 00:00:38,010
di mana kami kemudian mengembalikan beberapa JSX pada akhirnya. Siapkan stylesheet di sini, simpan dalam styles konstan dengan stylesheet buat

8
00:00:38,010 --> 00:00:46,090
yang kami berikan objek dan pada akhirnya, kami ekspor item makanan kami di sini sebagai file default. Sekarang dengan itu di sini, dalam item makanan, dalam komponen ini,

9
00:00:46,090 --> 00:00:48,100
kita tentu saja perlu mengembalikan

10
00:00:48,100 --> 00:00:54,040
beberapa kode JSX untuk item makanan itu dan itu adalah sesuatu yang saya dapatkan dari layar

11
00:00:54,040 --> 00:00:55,750
makanan kategori. Di sana

12
00:00:55,810 --> 00:01:02,260
saya memiliki pandangan ini dengan teks saya di sini, itu pada akhirnya apa yang saya inginkan keluaran, sedikit lebih kompleks dari itu tetapi saya

13
00:01:02,710 --> 00:01:07,150
akan memotongnya dari sana dan memindahkannya ke item makanan dan di sana, kembalikan pandangan ini ke

14
00:01:07,150 --> 00:01:12,380
sini tetapi dari Tentu saja kita belum selesai dengan itu. Untuk satu, ini juga harus

15
00:01:12,380 --> 00:01:17,390
menyentuh karena kita dapat memilih makanan, kita dapat memilih resep untuk dibawa

16
00:01:17,390 --> 00:01:21,010
ke layar detail, jadi saya akan mengimpor opacity terjamah.

17
00:01:21,020 --> 00:01:25,910
Sekarang tentu saja, Anda dapat kembali membuat perbedaan itu dan menggunakan efek riak dengan umpan balik

18
00:01:25,970 --> 00:01:27,880
asli yang dapat disentuh di

19
00:01:27,920 --> 00:01:35,270
Android jika Anda mau, saya akan menggunakan opacity yang dapat disentuh untuk saat ini dan membungkus pandangan saya di sini dengan opacity yang

20
00:01:35,420 --> 00:01:44,350
dapat disentuh, seperti ini sehingga kami dapat sebenarnya mengetuk item kami di sini dan diTekan, saya sebenarnya ingin memicu fungsi yang saya harapkan untuk dapatkan di properti yang

21
00:01:44,350 --> 00:01:49,000
belum kami masukkan ke item makanan tetapi karena kami tidak menggunakan item makanan di mana

22
00:01:49,000 --> 00:01:54,460
pun tetapi yang saya inginkan lewat di masa depan, mungkin kita beri nama ini pada makanan pilihan

23
00:01:54,460 --> 00:02:00,820
atau hanya di Pilih, apa pun yang Anda inginkan, saya akan menamainya di CellMeal dan saya berharap untuk mendapatkan prop

24
00:02:00,820 --> 00:02:06,950
pada item makanan ketika kita kemudian menggunakannya di jsx. Jadi itulah opacity terjamah, di sana

25
00:02:08,790 --> 00:02:16,050
saya memiliki pandangan saya dengan judul dan sebenarnya pandangan itu harus sedikit lebih kompleks dari itu.

26
00:02:16,740 --> 00:02:24,150
Saya ingin memiliki tampilan, tampilan bersarang di sana seperti ini dan tampilan lain di bawahnya, jadi saya ingin

27
00:02:24,180 --> 00:02:25,530
memiliki dua baris.

28
00:02:25,530 --> 00:02:31,060
Ini akan ditetapkan sebagai kolom tetapi dua tampilan di sini akan ditetapkan sebagai baris di sini.

29
00:02:31,230 --> 00:02:38,280
Tampilan pertama juga harus membuat gambar latar belakang, sehingga judul berada di depan gambar latar belakang

30
00:02:38,310 --> 00:02:39,130
ini,

31
00:02:39,180 --> 00:02:44,730
tampilan kedua, baris kedua di sini harus membuat beberapa detail tentang resep

32
00:02:44,730 --> 00:02:47,270
yang dipilih, seperti kompleksitas dan durasinya.

33
00:02:50,190 --> 00:02:55,530
Jadi mari kita mulai dengan itu sebelum kita nanti menambahkan gambar, pada kedua pandangan ini,

34
00:02:55,560 --> 00:03:00,660
oleh karena itu saya akan menambahkan properti gaya dan menunjuk pada baris gaya

35
00:03:03,050 --> 00:03:08,860
makan atau apa pun yang Anda ingin nama ini karena itu akan menjadi baris dalam presentasi

36
00:03:10,030 --> 00:03:18,140
makan saya di sini dan saya Karena itu akan menambah baris makan di sana dan mengatur arah fleksibel di sini untuk baris tentu

37
00:03:18,140 --> 00:03:23,150
saja karena itu harus baris data. Sekarang di sekitar keseluruhan item

38
00:03:23,170 --> 00:03:27,290
di sini, saya akan membungkus pandangan lain di mana

39
00:03:30,050 --> 00:03:34,850
saya ingin mengatur gaya umum item gaya makan dan item makanan,

40
00:03:34,850 --> 00:03:40,670
yang juga dikonfigurasi di sini di stylesheet tentu saja dan di sana saya ingin

41
00:03:40,700 --> 00:03:46,940
memberikan setiap makan tinggi dari 200 katakanlah, setiap item dalam daftar di sini dan lebar

42
00:03:46,940 --> 00:03:55,390
100% untuk mengambil lebar penuh yang tersedia dan juga mungkin warna latar belakang tampilan keabu-abuan ini di sini, kita dapat

43
00:03:55,430 --> 00:04:00,570
melihat apakah kita ingin mempertahankannya, untuk saat ini saya akan gunakan itu.

44
00:04:00,810 --> 00:04:04,770
Sekarang kita dapat menggunakan item makanan di sini dan kita belum

45
00:04:04,770 --> 00:04:14,560
selesai dengan itu tetapi kita dapat mulai menggunakannya di sini di layar kategori makan dengan tentu saja mengimpornya, mengimpor item makanan dari folder komponen dan di sana,

46
00:04:14,560 --> 00:04:25,230
dari file item makanan dan kemudian render ini di sini, jadi kembalikan item makanan di sini seperti ini dan tentu saja kita sekarang harus memasukkan beberapa data, data seperti judul

47
00:04:25,230 --> 00:04:32,010
yang kita dapatkan dari itemData. barang. judul dan prop onSelect yang saya

48
00:04:32,010 --> 00:04:38,850
harapkan untuk mendapatkan dalam item makanan yang kita pada akhirnya menghubungkan ke prop onPress opacity terjamah, onSelectMeal, itu

49
00:04:38,850 --> 00:04:42,840
nama yang saya pilih, itu juga sesuatu yang perlu kita atur

50
00:04:42,840 --> 00:04:44,030
di sini

51
00:04:44,070 --> 00:04:46,820
ketika kita menggunakan makanan item dan ini

52
00:04:46,830 --> 00:04:51,330
harus menunjuk pada suatu fungsi yang untuk saat ini tidak melakukan apa-apa

53
00:04:51,330 --> 00:04:55,090
tetapi yang kemudian akan memuat halaman detail untuk makan itu.

54
00:04:55,110 --> 00:05:00,300
Jadi sekarang kita mendapatkan judul pada prop judul, maka item makan, di sini ketika kita output judul kita melakukan ini dengan

55
00:05:00,300 --> 00:05:01,590
bantuan props. judul.

56
00:05:01,740 --> 00:05:09,260
Jika sekarang kita menyimpan ini, kita seharusnya benar-benar dapat melihat sesuatu di sini, jadi mari kita tunggu ini untuk memuat ulang dan ya,

57
00:05:09,260 --> 00:05:10,580
kita melihat makanan

58
00:05:10,580 --> 00:05:16,730
kita di sini dan tentu saja tidak terlalu indah tetapi setidaknya, kita melihat sedikit lebih banyak dari sebelumnya.

59
00:05:16,730 --> 00:05:21,620
Sekarang yang ingin saya miliki di sini adalah sedikit spasi di sekitar daftar tetapi di

60
00:05:21,710 --> 00:05:26,930
dalam spasi, item daftar harus mengambil lebar penuh yang tersedia dan bukan hanya lebar item terluas

61
00:05:26,930 --> 00:05:28,850
yang saat ini sedang terjadi.

62
00:05:29,090 --> 00:05:35,800
Dan untuk itu, kita bisa pergi ke FlatList dan di sana, tambahkan properti style dan atur lebar ini menjadi 100% untuk

63
00:05:35,810 --> 00:05:39,470
memastikan bahwa FlatList itu sendiri mengambil semua lebar yang bisa didapat.

64
00:05:39,470 --> 00:05:42,020
Dengan itu, kita harus melihat yang kita inginkan di sini.

65
00:05:42,290 --> 00:05:44,710
Sekarang tentu saja, item makanan tidak selesai, mereka tidak terlihat seperti yang

66
00:05:44,720 --> 00:05:51,380
saya ingin mereka lihat meskipun kita juga perlahan-lahan sampai di sana. Sekarang di MealItem. File js, kita masih memiliki

67
00:05:51,380 --> 00:05:53,680
beberapa pekerjaan yang harus dilakukan, misalnya tampilan

68
00:05:53,690 --> 00:05:59,840
ini di sini dengan judul nanti juga akan menahan gambar dan oleh karena itu ini harus jauh lebih

69
00:05:59,840 --> 00:06:03,960
besar daripada baris di bawahnya yang nantinya hanya akan menampilkan beberapa rincian.

70
00:06:05,500 --> 00:06:18,310
Oleh karena itu di sini, saya akan menggabungkan gaya baris makanan saya dengan objek gaya lain, jadi dengan gaya yang diatur dalam objek stylesheet lain yang saya akan beri nama header

71
00:06:18,350 --> 00:06:26,530
makan atau apa pun yang Anda ingin beri nama dan hal yang sama di sana dengan cara untuk detailnya

72
00:06:26,530 --> 00:06:29,090
pada akhirnya, di sana saya akan

73
00:06:29,110 --> 00:06:36,920
menggabungkan ini dengan detail gaya makan, sehingga kami telah menggabungkan gaya dan mari kita mulai dengan header makanan yang

74
00:06:36,920 --> 00:06:39,470
dapat kita atur di sini.

75
00:06:39,470 --> 00:06:47,090
Header makan pada akhirnya akan menampung gambar dan juga judul dan saya ingin ketinggian ini

76
00:06:47,410 --> 00:06:49,580
menjadi katakanlah 80%

77
00:06:49,580 --> 00:06:59,550
dari tinggi yang tersedia, jadi ini harus sangat sangat besar. Karenanya, rincian makanan secara otomatis akan mendapatkan 20% sisanya dan untuk melihat

78
00:06:59,550 --> 00:07:07,470
apakah itu berfungsi, mari kita tampilkan beberapa detail di sini, jadi dalam pandangan itu di sini, pada baris

79
00:07:07,470 --> 00:07:10,020
di bawah baris judul kami, saya

80
00:07:10,020 --> 00:07:13,420
juga ingin memiliki beberapa teks di sana-sini. akan

81
00:07:13,440 --> 00:07:21,920
menghasilkan katakanlah durasi alat peraga dan kemudian m setelahnya, untuk menit karena durasi m akan menjadi angka yang kita perlakukan

82
00:07:21,920 --> 00:07:23,330
sebagai menit.

83
00:07:23,330 --> 00:07:27,740
Kita hanya perlu meneruskan durasi dari layar kategori makanan saja, jadi ketika kita

84
00:07:27,740 --> 00:07:33,140
menggunakan item makanan, selain melewati judul, saya akan mengatur prop durasi karena kita sekarang mengharapkan

85
00:07:33,140 --> 00:07:34,940
ini pada item makanan.

86
00:07:34,940 --> 00:07:40,700
Kami mendapatkan ini dari itemData. item yang merupakan makanan kami dan di sana, kami

87
00:07:40,760 --> 00:07:45,630
akan memiliki properti durasi karena makanan kami sebagaimana ditentukan dalam model di sini memang memiliki properti durasi

88
00:07:45,800 --> 00:07:50,690
dan memang jika Anda melihat data dummy, ini di sini adalah durasi Anda yang dimasukkan dalam .

89
00:07:54,760 --> 00:07:56,560
Jika kita menyimpan ini,

90
00:07:56,560 --> 00:08:06,850
sekarang kita melihat durasi kita di sana dan sebenarnya, kita masih dapat mengubah ketinggian di sini menjadi bahkan 90%, harus lebih tinggi daripada di sini,

91
00:08:06,910 --> 00:08:09,420
yang terlihat lebih baik dan tentu

92
00:08:09,430 --> 00:08:10,630
saja Anda

93
00:08:10,750 --> 00:08:14,830
dapat bereksperimen dengan ini juga. Di baris detail makanan,

94
00:08:14,830 --> 00:08:22,680
saya juga ingin memiliki beberapa bantalan horizontal, jadi kiri dan kanan katakanlah 10 dan membenarkan konten saya

95
00:08:22,690 --> 00:08:32,650
di sini dengan ruang di antara, ingatlah ini adalah baris sehingga ini akan membenarkan secara horizontal, sehingga ketika kita memiliki beberapa item,

96
00:08:32,650 --> 00:08:35,690
mereka akan didistribusikan dengan baik di sana.

97
00:08:35,740 --> 00:08:45,740
Jadi kita punya 20 menit, mari kita keluarkan lebih banyak informasi di sana dengan menambahkan teks lain

98
00:08:45,900 --> 00:08:47,030
dan

99
00:08:47,030 --> 00:08:53,140
di sana, keluarkan kerumitannya, jadi di sini saya akan menampilkan

100
00:08:53,140 --> 00:09:01,950
kompleksitas dan setelah itu, saya akan menampilkan keterjangkauan. Sekarang kita hanya perlu memasukkan data itu juga saat membuat item makanan kita.

101
00:09:01,990 --> 00:09:06,460
Jadi di sini selain durasi, kami menyampaikan kompleksitas yang

102
00:09:06,460 --> 00:09:16,420
kami dapatkan di sini, itemData. barang. kompleksitas dan keterjangkauan, itu tentu saja data

103
00:09:16,430 --> 00:09:18,530
data. barang. keterjangkauan, seperti

104
00:09:18,740 --> 00:09:28,910
itu dan jika kita menyimpan ini dan membiarkan ini dibuat ulang, sekarang kita melihat output ini di sini. Masih tidak super cantik dan kita pasti bisa

105
00:09:29,000 --> 00:09:37,390
meningkatkan ini tetapi awal yang bagus. Sekarang sederhana dan terjangkau atau kompleksitas dan keterjangkauan

106
00:09:37,390 --> 00:09:45,000
kami, yang harus ditata sedikit berbeda. Kami tahu ini akan berupa teks dan karena

107
00:09:45,000 --> 00:09:51,680
itu saya dapat menggunakan beberapa fungsi Javascript atau metode yang kami miliki di string,

108
00:09:51,770 --> 00:09:59,930
saya hanya akan menggunakan toUppercase untuk mengubahnya menjadi huruf besar sepenuhnya seperti ini dan sekarang ini seharusnya sudah

109
00:09:59,930 --> 00:10:06,590
terlihat sedikit lebih bagus dari sebelumnya. Sekarang Anda masih dapat mengubah style di sini, saya akan pergi dengan style ini di sini

110
00:10:06,620 --> 00:10:09,440
untuk saat ini dan mari sekarang tambahkan gambar latar belakang di atas.

111
00:10:09,440 --> 00:10:16,370
Jadi untuk ini, kami ingin gambar latar belakang di belakang teks judul ini dan untungnya, React Native membuat

112
00:10:16,370 --> 00:10:23,930
menambahkan gambar latar belakang seperti itu benar-benar sangat sederhana. Bereaksi asli dikirim dengan komponen bawaan, komponen latar

113
00:10:23,990 --> 00:10:29,690
belakang gambar yang dapat kita gunakan untuk membuat gambar di latar belakang

114
00:10:29,690 --> 00:10:36,020
seperti yang Anda bayangkan dengan namanya. Anda menambahkannya di sebelah komponen di mana Anda ingin menambahkannya dan Anda menambahkannya sebelum komponen itu,

115
00:10:36,020 --> 00:10:43,520
jadi di sini saya menambahkan latar belakang gambar dan pada latar belakang gambar seperti pada gambar normal, Anda menetapkan sumber. Di sini sumber saya adalah gambar web, jadi kami mengirimkan sebuah objek, jika

116
00:10:43,520 --> 00:10:49,220
itu akan menjadi gambar lokal, Anda akan menggunakan yang diperlukan dan apa yang Anda pelajari tentang gambar lokal di awal

117
00:10:49,220 --> 00:10:54,380
kursus tetapi di sini, itu adalah gambar web, jadi kami melewati sebuah objek dengan alat peraga URI dan

118
00:10:54,380 --> 00:11:00,560
di sana kami menggunakan alat peraga gambar yang merupakan tempat saya berharap mendapatkan URL itu di komponen ini, jadi tentu saja kita

119
00:11:00,560 --> 00:11:07,370
harus memastikan bahwa kita meneruskan URL pada alat peraga itu. Saya juga akan menambahkan beberapa gaya

120
00:11:07,370 --> 00:11:15,000
di sini dan itu akan menjadi gaya. bgImage yang sekarang akan kita tambahkan ke stylesheet di sana, di

121
00:11:15,720 --> 00:11:22,110
mana pun Anda inginkan, mungkin di sini, tidak masalah. Yang penting di sini, Anda harus mengatur

122
00:11:22,110 --> 00:11:27,060
lebar dan tinggi karena ini adalah gambar dari web dan saya akan

123
00:11:27,060 --> 00:11:36,350
menggunakannya 100% untuk keduanya karena harus mengisi seluruh ruang yang didapat. Sekarang kita hanya perlu memastikan bahwa kita memasukkan prop gambar di sini di layar kategori makanan,

124
00:11:36,440 --> 00:11:45,560
jadi selain judulnya, di sini saya juga ingin mengirimkan itemData. barang. imageUrl adalah nama itu, Anda dapat melihat bahwa dalam model,

125
00:11:45,560 --> 00:11:51,020
imageUrl, jadi itulah yang kami lewati dan kami meneruskan ini ke penyangga gambar karena itulah yang kami harapkan dan

126
00:11:51,020 --> 00:11:56,960
apa yang kami siapkan di sini saat makan barang. Dan jika Anda sekarang menyimpannya dan mari mencampur semuanya

127
00:11:56,970 --> 00:12:02,910
dan menguji ini di Android, hanya butuh sedikit lebih lama untuk memuat itu sebabnya saya biasanya menggunakan iOS di sini

128
00:12:03,000 --> 00:12:10,410
tapi sekarang jika kami menguji ini, kami melihat burger kami di sini. Apa yang tidak kita

129
00:12:10,410 --> 00:12:19,010
lihat lagi adalah gelar kita. Untuk menampilkan judul lagi, pastikan Anda benar-benar membungkus latar

130
00:12:19,010 --> 00:12:27,480
belakang gambar di sekitarnya, ini adalah bagaimana Anda memberi tahu React Native konten mana yang harus berada di

131
00:12:27,480 --> 00:12:34,320
dalam di atas gambar latar belakang itu. Jadi sekarang dengan itu, inilah judul kami, tidak mudah dibaca dan kami akan memperbaikinya tetapi ada di sana lagi.

132
00:12:35,480 --> 00:12:41,050
Jadi kita mulai dengan resep itu di sini, sekarang mari kita pastikan judulnya sedikit

133
00:12:41,050 --> 00:12:50,760
lebih mudah dilihat dengan memberinya gaya di sini, judul gaya yang sekarang dapat kita atur di sana dan saya ingin menetapkan keluarga font yang

134
00:12:50,850 --> 00:12:52,210
terbuka sans

135
00:12:52,220 --> 00:12:55,490
bold, masuk akal karena kita mendaftarkan font ini.

136
00:12:55,590 --> 00:12:59,380
Berikan ukuran font yang kami tingkatkan sedikit, mungkin 22, Anda bisa

137
00:12:59,400 --> 00:13:01,310
bermain-main dengan itu tentu saja.

138
00:13:01,440 --> 00:13:07,380
Berikan warna putih untuk membuatnya sedikit lebih mudah dibaca dan juga menetapkan warna latar belakang sehingga

139
00:13:07,380 --> 00:13:10,600
kita selalu dapat melihatnya, bahkan jika gambar latar belakang

140
00:13:10,620 --> 00:13:16,800
akan putih, dalam hal ini teks putih akan sulit dibaca, dengan memberikan ini warna RGBA yang merupakan

141
00:13:16,800 --> 00:13:22,380
warna yang memiliki transparansi built-in sehingga untuk mengatakan dan ini hanyalah warna hitam yang agak

142
00:13:25,490 --> 00:13:28,400
transparan dan sekarang juga menambahkan sedikit padding

143
00:13:28,390 --> 00:13:35,000
di sini, padding vertikal lima harus terlihat bagus sehingga background kotak berwarna di sini tidak duduk tepat di tepi

144
00:13:35,000 --> 00:13:42,950
teks yang ada di dalam kotak dan padding horizontal 12 mungkin. Dengan itu kita harus selalu melihat judul

145
00:13:42,950 --> 00:13:48,540
kita dan sebenarnya, kita mungkin bisa meningkatkan transparansi itu di

146
00:13:48,560 --> 00:13:51,790
sini, mengurangi opacity, ya itu

147
00:13:51,890 --> 00:13:53,630
terlihat sedikit

148
00:13:59,550 --> 00:14:06,420
lebih bagus menurut saya, seperti ini. Dan satu-satunya hal yang ingin saya lakukan sekarang adalah

149
00:14:06,420 --> 00:14:10,250
saya ingin memindahkan judul itu di bagian bawah gambar ini dan

150
00:14:12,450 --> 00:14:23,230
oleh karena itu pada gaya bgImage yang saya miliki di sini, saya akan mengatur pembenaran konten untuk melenturkan ujung karena gambar latar belakang secara otomatis bertindak sebagai jadi flexbox bisa

151
00:14:23,230 --> 00:14:27,970
dikatakan, seperti tampilan, sehingga kami dapat membenarkan konten kami di sana dan sekarang kami

152
00:14:27,970 --> 00:14:30,400
memiliki judul itu di bagian bawah.

153
00:14:30,430 --> 00:14:39,460
Kita sekarang bisa juga memusatkan teks dengan pergi ke judul di sini dan menambahkan pusat perataan teks dan jika terlalu lama, terlalu besar,

154
00:14:39,580 --> 00:14:42,210
selain tentu saja mengecilkan ukuran

155
00:14:42,310 --> 00:14:46,400
font yang saya akan lakukan sedikit ke 20, tentu saja

156
00:14:46,420 --> 00:14:53,080
Anda bisa buka teks di sini di mana Anda menampilkan judul dan atur jumlah baris ke 1

157
00:14:53,080 --> 00:14:55,870
dan ini akan memastikan bahwa teks secara

158
00:14:55,870 --> 00:15:06,780
otomatis dipersingkat jika terlalu besar, seperti di sini untuk salad dengan tomat ceri. Kami juga melihat efek aneh di sini di iOS di mana

159
00:15:06,880 --> 00:15:15,150
kami memiliki beberapa latar belakang tambahan di belakang teks kami dan bukan hanya kotak berwarna latar belakang di sini.

160
00:15:15,160 --> 00:15:22,880
Itu karena saya menerapkan warna latar belakang saya dan efek langsung pada teks, untuk memperbaikinya kita dapat memotongnya dari judul di

161
00:15:22,880 --> 00:15:29,510
sini dan hanya mengatur warna dan seterusnya dan bukannya menambahkan wadah judul di sini di mana kita menambahkan

162
00:15:29,540 --> 00:15:37,100
warna latar belakang ini dan seterusnya dan bungkus wadah ini di sekitar judul kami, jadi tampilan tambahan yang kami tambahkan

163
00:15:37,120 --> 00:15:42,580
di sini dan cukup normal di Bereaksi Asli untuk membuat sarang beberapa tampilan seperti

164
00:15:42,580 --> 00:15:51,580
itu dan pada tampilan itu, kami sekarang dapat menambahkan gaya, gaya wadah judul dan jika kami menyimpannya, kita harus menyingkirkan perilaku aneh itu di

165
00:15:51,580 --> 00:15:52,860
iOS, ya

166
00:15:52,900 --> 00:15:55,590
sekarang kita tidak memiliki kotak tambahan di

167
00:15:55,600 --> 00:16:00,380
sana, alih-alih kita hanya memiliki satu warna latar belakang dan sama pada Android.

168
00:16:00,520 --> 00:16:04,270
Jadi sekarang ini tidak terlihat terlalu buruk tapi saya tidak sepenuhnya

169
00:16:04,270 --> 00:16:10,480
bahagia, saya ingin memusatkan detail saya di sini secara vertikal juga dan memberikan sedikit lebih banyak ruang kurasa dan

170
00:16:10,480 --> 00:16:17,560
untuk itu kita bisa memberikan header mungkin 85% dari ketinggian dan pada detail makanan di sini, perlu diingat bahwa arah fleksibel kami

171
00:16:17,560 --> 00:16:23,650
adalah baris karena kami menggabungkan detail makanan dan makan di sini dan oleh karena itu sumbu silang kami

172
00:16:23,670 --> 00:16:26,080
adalah dari atas ke bawah, jadi

173
00:16:26,080 --> 00:16:30,540
jika kita ingin memusatkan secara vertikal, yaitu sumbu silang yang kita butuhkan untuk memusatkan.

174
00:16:30,550 --> 00:16:37,540
Jadi di sini kita dapat mengatur item pelurusan yang melakukan pemosisian sumbu silang ke tengah dan juga

175
00:16:37,540 --> 00:16:43,280
mengubah warna kita di sini sedikit menjadi sedikit warna yang lebih bagus, abu-abu

176
00:16:43,510 --> 00:16:49,170
yang sangat terang ini, # f5f5f5 mungkin terlihat sedikit lebih baik, ya itu

177
00:16:49,300 --> 00:16:50,800
pasti tidak .

178
00:16:50,800 --> 00:16:56,610
Sekarang untuk memastikan bahwa kita benar-benar memusatkan secara vertikal, kita hanya perlu lebih eksplisit

179
00:16:56,650 --> 00:16:58,660
tentang tinggi detail makan

180
00:17:03,480 --> 00:17:09,590
kita, kita ambil 85% pada tajuk, jadi pada detail di sini, kita dapat mengatur

181
00:17:09,600 --> 00:17:17,230
ketinggian 15% jelas untuk beristirahat, ya dan saya akan mengatakan ini terlihat cukup baik di sini, tentu daftar

182
00:17:17,420 --> 00:17:20,620
item yang kami dapat bekerja di sini.

183
00:17:20,630 --> 00:17:25,670
Sekarang saya hanya akan menambahkan sedikit radius perbatasan karena Anda tahu saya suka radius

184
00:17:25,670 --> 00:17:33,500
perbatasan, jadi saya akan menambahkan radius perbatasan 10 di sini sehingga kami memiliki beberapa sudut bulat dan dengan itu, jika Anda kembali, kami

185
00:17:33,500 --> 00:17:38,820
Anda hampir sampai di sana tetapi Anda akan melihat bahwa gambar sebenarnya tidak menghormati radius perbatasan.

186
00:17:38,870 --> 00:17:46,780
Sekarang untuk memperbaikinya, pada item makanan, kita hanya harus mengatakan overflow disembunyikan sehingga tidak ada item anak yang bisa keluar dari ruang

187
00:17:46,780 --> 00:17:49,130
ini atau bentuk yang kita bangun di

188
00:17:49,130 --> 00:17:49,910
sini.

189
00:17:53,550 --> 00:17:56,880
Dan dengan itu, itu adalah permulaan, sesuatu yang dapat kita kerjakan,

190
00:17:56,880 --> 00:18:02,070
sekarang tentu saja kita ingin memastikan bahwa ketika kita mengetuk item seperti itu, kita benar-benar pergi ke halaman detail.