1
00:00:02,380 --> 00:00:08,860
Sekarang dalam daftar yang kami render di sini, item daftar kami selebar daftar karena kami membungkus daftar pada tampilan ini di

2
00:00:10,090 --> 00:00:12,140
sini di sekitar tampilan gulir kami,

3
00:00:12,140 --> 00:00:17,290
oleh karena itu ini menetapkan lebar untuk penambahan tampilan gulir yang menetapkan lebar untuk barang di sana.

4
00:00:17,290 --> 00:00:22,330
Sekarang katakanlah kita memiliki lebar berbeda di sini pada item daftar, katakanlah lebar item daftar

5
00:00:22,330 --> 00:00:24,330
harus hanya 60% dari daftar,

6
00:00:24,340 --> 00:00:30,760
jadi bukan 100% yang merupakan default tetapi hanya 60%. Jika kita melakukan itu dan kita mulai, Anda

7
00:00:30,760 --> 00:00:35,570
melihat sekarang ini duduk di sebelah kiri yang masuk akal, penentuan posisi default

8
00:00:35,620 --> 00:00:42,400
di sini jika Anda menetapkan lebar pada item yang ada di dalam kotak fleksibel dan daftar item di

9
00:00:42,400 --> 00:00:49,420
dalam kotak flex karena tampilan gulir secara internal juga menggunakan flexbox pada akhirnya, meskipun ada beberapa perbedaan dibandingkan dengan

10
00:00:49,600 --> 00:00:55,550
flexbox normal dan saya akan kembali ke mereka tetapi masih menggunakan flexbox dan oleh karena itu

11
00:00:55,580 --> 00:01:03,250
karena kami menetapkan lebar, standar peregangan barang anak di sepanjang sumbu silang dan sumbu silang akan menjadi sumbu horizontal karena kami

12
00:01:03,250 --> 00:01:08,950
memiliki kolom arah lentur sebagai default tetapi peregangan default ditimpa karena kami memiliki lebar pada item

13
00:01:08,950 --> 00:01:14,890
daftar kami, jadi pada elemen anak kami. Sekarang kami mungkin masih ingin memusatkan item-item

14
00:01:14,890 --> 00:01:20,620
ini dalam daftar dan untuk ini, Anda dapat pergi ke tampilan gulir dan menetapkan

15
00:01:20,620 --> 00:01:21,430
gaya

16
00:01:21,430 --> 00:01:28,000
di sana, meskipun tidak melalui prop gaya yang dapat Anda gunakan tetapi yang tidak memungkinkan Anda

17
00:01:28,000 --> 00:01:34,720
untuk mendisain apa pun. tetapi untuk gaya konten dalam tampilan gulir dan menerapkan misalnya pengaturan fleksibel

18
00:01:34,720 --> 00:01:40,090
untuk konten, Anda perlu menggunakan gaya wadah konten dan itu hanya sesuatu untuk

19
00:01:40,090 --> 00:01:47,260
menghafal atau mencari di dokumen resmi tentu saja. Untuk tampilan gulir dan untuk FlatList, Anda memiliki gaya wadah konten yang Anda

20
00:01:47,260 --> 00:01:50,140
gunakan untuk mengontrol tata letak di dalam tampilan gulir itu.

21
00:01:50,230 --> 00:01:56,620
Sekarang di sini di gaya wadah konten, sekarang kita bisa merujuk ke daftar gaya dan oleh karena itu, izinkan saya benar-benar

22
00:01:56,620 --> 00:02:02,320
mengubah nama gaya daftar saat ini kami menerapkan untuk itu melihat melihat wadah daftar karena pada akhirnya itu adalah

23
00:02:02,320 --> 00:02:06,670
wadah di sekitar daftar kami dan ini di sini adalah daftar itu sendiri.

24
00:02:06,670 --> 00:02:11,750
Atau, Anda bisa saja menamai konten daftar ini tetapi saya hanya akan memberi nama daftar itu dan

25
00:02:11,750 --> 00:02:16,810
mengganti nama yang lain menjadi daftar kontainer. Oleh karena itu, ini di sini akan diubah

26
00:02:16,810 --> 00:02:21,700
namanya menjadi daftar wadah dan sekarang kita dapat menambahkan properti daftar baru di sini ke

27
00:02:21,760 --> 00:02:28,060
stylesheet dan itu sekarang di dalam tampilan gulir, menata wadah kami atau meletakkan konten wadah kami agar lebih akurat

28
00:02:28,060 --> 00:02:34,750
dan di sana, karena ini menggunakan kotak flex secara internal, Anda dapat menggunakan item pelurusan untuk mengontrol perataan sepanjang sumbu silang

29
00:02:34,810 --> 00:02:41,380
dan mengatur ini ke pusat dan ini sekarang harus memastikan bahwa item dipusatkan lagi jika mereka lebih kecil dan memang

30
00:02:41,380 --> 00:02:43,440
itulah yang terjadi di sini.

31
00:02:43,510 --> 00:02:50,170
Maka dengan itu, Anda tahu cara mengontrol dan meletakkan konten di

32
00:02:50,170 --> 00:02:58,660
dalam tampilan gulir atau daftar secara umum. Sekarang bagaimana jika Anda juga ingin mengontrol flexbox di sepanjang sumbu utama?

33
00:02:58,660 --> 00:03:06,520
Katakanlah daftar kami di sini sebenarnya tidak boleh dimulai tepat di bawah kotak ini di sini dengan kontrol kami tetapi sedikit lebih jauh

34
00:03:06,520 --> 00:03:11,620
ke bawah, itu harus dimulai di bagian bawah layar dan kemudian tumbuh hingga ke atas

35
00:03:11,620 --> 00:03:14,500
dan kemudian hanya dapat digulir ketika mencapai teratas.

36
00:03:14,520 --> 00:03:21,590
Ini juga dapat dikontrol dengan gaya daftar kami yang merupakan gaya yang diterapkan pada gaya wadah konten, sehingga

37
00:03:21,590 --> 00:03:27,350
dengan gaya wadah konten ini, Anda dapat mengontrol ini juga dengan menambahkan justifyContent karena

38
00:03:27,350 --> 00:03:33,440
membenarkan konten memungkinkan Anda untuk memposisikan konten di sepanjang sumbu utama flexbox dan sumbu utama

39
00:03:33,440 --> 00:03:38,430
flexbox secara default adalah sumbu vertikal karena arah default adalah kolom.

40
00:03:38,600 --> 00:03:45,410
Jadi di sini, mari kita sekarang menggunakan ujung fleksibel bukan default yang mulai fleksibel dan ujung fleksibel sekarang harus benar-benar

41
00:03:45,410 --> 00:03:47,350
memindahkan item ke akhir daftar.

42
00:03:47,360 --> 00:03:48,740
Jadi mari kita lihat

43
00:03:49,870 --> 00:03:50,480
apakah

44
00:03:50,570 --> 00:03:52,590
itu berhasil, ya, sepertinya tidak berhasil, kan?

45
00:03:52,610 --> 00:03:59,670
Masalahnya di sini adalah bahwa tampilan gulir hanya menumbuhkan tampilan internal yang dibungkus pada akhirnya ketika item baru

46
00:03:59,670 --> 00:04:01,360
ditambahkan, sekarang kami ingin

47
00:04:01,370 --> 00:04:06,310
tampilan internal itu tumbuh secara otomatis. Pada tampilan normal, kita

48
00:04:06,320 --> 00:04:08,800
akan mencapainya dengan menambahkan flex.

49
00:04:08,990 --> 00:04:14,170
Jadi mari kita coba ini di sini di styling daftar ini kita tambahkan ke tampilan gulir juga.

50
00:04:14,180 --> 00:04:21,570
Jika kita menambahkannya di sini, sekarang Anda melihat ini berlaku dengan benar, itu dimulai di sini di bagian bawah dan sekarang mari kita tumbuhkan

51
00:04:21,600 --> 00:04:23,860
ini dan berharap kita tidak menyelesaikan

52
00:04:24,450 --> 00:04:32,870
ini terlalu dini dan Anda lihat, kita dapat menggulir. Jadi ini sebenarnya sedang tumbuh dan bekerja persis seperti yang kita inginkan. Ini dapat digulir dan umumnya berfungsi

53
00:04:32,890 --> 00:04:39,000
seperti yang kita inginkan, tetapi Anda akan melihat bahwa Anda sebenarnya tidak dapat benar-benar

54
00:04:39,000 --> 00:04:45,420
menggulirnya sehingga Anda selalu melihat item terbaru. Anda dapat menggulir ke sana tetapi kemudian melompat kembali dan

55
00:04:45,420 --> 00:04:48,270
itu mungkin bukan yang kita inginkan, di Android, itu

56
00:04:48,270 --> 00:04:50,370
juga tidak berfungsi. Di sana,

57
00:04:50,370 --> 00:04:53,340
jika sekarang kita mulai menebak, Anda akan melihat

58
00:04:53,340 --> 00:04:59,110
perilaku yang sama, baik jika saya akan sampai di sana, satu-satunya perbedaan adalah itu rusak karena

59
00:04:59,140 --> 00:05:05,320
alasan yang berbeda, saya bahkan tidak bisa menggulir. Jadi flex satu tidak benar-benar melakukan pekerjaan, apa yang dapat Anda gunakan di sana

60
00:05:05,320 --> 00:05:11,170
adalah sesuatu yang belum pernah kami gunakan sebelumnya dan itu flex tumbuh. Sekarang flex tumbuh juga memastikan bahwa

61
00:05:11,230 --> 00:05:17,230
item yang Anda tambahkan ini tumbuh dan memakan ruang sebanyak mungkin, sama seperti

62
00:05:17,230 --> 00:05:23,150
flex, perbedaannya adalah bahwa flex grow bekerja sedikit berbeda secara internal, itu lebih

63
00:05:23,260 --> 00:05:26,250
fleksibel daripada flex. Flex hanya mengatakan, ambil

64
00:05:26,290 --> 00:05:32,050
semua ruang yang tersedia di semua arah yang bisa Anda dapatkan, pertumbuhan fleksibel pada dasarnya

65
00:05:32,050 --> 00:05:38,980
menginstruksikan wadah untuk dapat tumbuh, untuk dapat mengambil ruang sebanyak yang bisa didapat dan itu akan tetapi itu tetap

66
00:05:38,980 --> 00:05:39,580
perilaku

67
00:05:39,780 --> 00:05:45,280
lain yang dimilikinya. biasanya, dalam hal ini tampilan gulir, tempat ini dapat digulir dan

68
00:05:45,310 --> 00:05:47,300
dapat melampaui batas layar juga.

69
00:05:47,320 --> 00:05:53,080
Jadi ini sedikit lebih fleksibel dan Anda mungkin tidak sering membutuhkannya pada tampilan normal tetapi pada tampilan gulir, itu persis

70
00:05:53,080 --> 00:05:54,720
yang kami butuhkan dan saya

71
00:05:54,820 --> 00:06:00,340
hanya menunjukkan ini di sini karena ini adalah kasus khusus yang hanya perlu Anda lakukan. tahu atau yang Anda

72
00:06:00,340 --> 00:06:01,680
mungkin tersandung dan biasanya

73
00:06:01,760 --> 00:06:07,420
Anda kemudian menemukan solusi pada stack overflow dan sebagainya, di sini Anda menemukannya dalam kursus ini karena itu adalah

74
00:06:07,660 --> 00:06:12,520
skenario yang mungkin Anda temui dan karena itu mudah-mudahan, Anda kemudian dapat mengingat kuliah ini dan

75
00:06:12,520 --> 00:06:14,140
melihat bagaimana caranya pecahkan ini.

76
00:06:14,170 --> 00:06:20,410
Jadi saya menambahkan flex tumbuh ke properti daftar itu dan sekarang mari kita coba ini lagi. Di sini di iOS, jika kita

77
00:06:20,530 --> 00:06:30,520
mulai menebak angka di sini, sekarang Anda lihat saya benar-benar dapat menggulir sedemikian rupa sehingga item terbaru terlihat dan saya masih juga dapat menggulir sedemikian

78
00:06:30,610 --> 00:06:33,750
rupa sehingga item terlama terlihat, jadi sekarang ini

79
00:06:33,760 --> 00:06:37,620
menunjukkan perilaku yang kita inginkan, terima kasih untuk melenturkan tumbuh.

80
00:06:37,750 --> 00:06:41,480
Dan di Android, itu akan sama jika kita memulai permainan di

81
00:06:45,510 --> 00:06:52,140
sana, Anda lihat sekarang saya juga bisa menggulir ini di sini dan saya bisa melihat tebakan terbaru dan tebakan tertua.

82
00:06:52,200 --> 00:06:58,860
Jadi ini sekarang bekerja dengan cara yang seharusnya di sini di Android dan iOS dan saya menunjukkan semua ini hanya agar

83
00:06:59,070 --> 00:07:05,490
Anda mengetahui pola-pola ini, gaya wadah konten khusus ini pada tampilan gulir dan saya juga ingin memastikan bahwa Anda mengetahui

84
00:07:05,670 --> 00:07:09,960
beberapa masalah yang bisa Anda hadapi ketika Anda mulai menata gaya dan ketika

85
00:07:09,960 --> 00:07:15,180
Anda ingin menambahkan tata letak Anda sendiri di sana, maka ini adalah beberapa trik yang bisa

86
00:07:15,180 --> 00:07:18,510
sangat berguna jika Anda menghadapi situasi itu di aplikasi Anda.