Sekarang dalam daftar yang kami render di sini, item daftar kami selebar daftar karena kami membungkus daftar pada tampilan ini di
sini di sekitar tampilan gulir kami,
oleh karena itu ini menetapkan lebar untuk penambahan tampilan gulir yang menetapkan lebar untuk barang di sana.
Sekarang katakanlah kita memiliki lebar berbeda di sini pada item daftar, katakanlah lebar item daftar
harus hanya 60% dari daftar,
jadi bukan 100% yang merupakan default tetapi hanya 60%. Jika kita melakukan itu dan kita mulai, Anda
melihat sekarang ini duduk di sebelah kiri yang masuk akal, penentuan posisi default
di sini jika Anda menetapkan lebar pada item yang ada di dalam kotak fleksibel dan daftar item di
dalam kotak flex karena tampilan gulir secara internal juga menggunakan flexbox pada akhirnya, meskipun ada beberapa perbedaan dibandingkan dengan
flexbox normal dan saya akan kembali ke mereka tetapi masih menggunakan flexbox dan oleh karena itu
karena kami menetapkan lebar, standar peregangan barang anak di sepanjang sumbu silang dan sumbu silang akan menjadi sumbu horizontal karena kami
memiliki kolom arah lentur sebagai default tetapi peregangan default ditimpa karena kami memiliki lebar pada item
daftar kami, jadi pada elemen anak kami. Sekarang kami mungkin masih ingin memusatkan item-item
ini dalam daftar dan untuk ini, Anda dapat pergi ke tampilan gulir dan menetapkan
gaya
di sana, meskipun tidak melalui prop gaya yang dapat Anda gunakan tetapi yang tidak memungkinkan Anda
untuk mendisain apa pun. tetapi untuk gaya konten dalam tampilan gulir dan menerapkan misalnya pengaturan fleksibel
untuk konten, Anda perlu menggunakan gaya wadah konten dan itu hanya sesuatu untuk
menghafal atau mencari di dokumen resmi tentu saja. Untuk tampilan gulir dan untuk FlatList, Anda memiliki gaya wadah konten yang Anda
gunakan untuk mengontrol tata letak di dalam tampilan gulir itu.
Sekarang di sini di gaya wadah konten, sekarang kita bisa merujuk ke daftar gaya dan oleh karena itu, izinkan saya benar-benar
mengubah nama gaya daftar saat ini kami menerapkan untuk itu melihat melihat wadah daftar karena pada akhirnya itu adalah
wadah di sekitar daftar kami dan ini di sini adalah daftar itu sendiri.
Atau, Anda bisa saja menamai konten daftar ini tetapi saya hanya akan memberi nama daftar itu dan
mengganti nama yang lain menjadi daftar kontainer. Oleh karena itu, ini di sini akan diubah
namanya menjadi daftar wadah dan sekarang kita dapat menambahkan properti daftar baru di sini ke
stylesheet dan itu sekarang di dalam tampilan gulir, menata wadah kami atau meletakkan konten wadah kami agar lebih akurat
dan di sana, karena ini menggunakan kotak flex secara internal, Anda dapat menggunakan item pelurusan untuk mengontrol perataan sepanjang sumbu silang
dan mengatur ini ke pusat dan ini sekarang harus memastikan bahwa item dipusatkan lagi jika mereka lebih kecil dan memang
itulah yang terjadi di sini.
Maka dengan itu, Anda tahu cara mengontrol dan meletakkan konten di
dalam tampilan gulir atau daftar secara umum. Sekarang bagaimana jika Anda juga ingin mengontrol flexbox di sepanjang sumbu utama?
Katakanlah daftar kami di sini sebenarnya tidak boleh dimulai tepat di bawah kotak ini di sini dengan kontrol kami tetapi sedikit lebih jauh
ke bawah, itu harus dimulai di bagian bawah layar dan kemudian tumbuh hingga ke atas
dan kemudian hanya dapat digulir ketika mencapai teratas.
Ini juga dapat dikontrol dengan gaya daftar kami yang merupakan gaya yang diterapkan pada gaya wadah konten, sehingga
dengan gaya wadah konten ini, Anda dapat mengontrol ini juga dengan menambahkan justifyContent karena
membenarkan konten memungkinkan Anda untuk memposisikan konten di sepanjang sumbu utama flexbox dan sumbu utama
flexbox secara default adalah sumbu vertikal karena arah default adalah kolom.
Jadi di sini, mari kita sekarang menggunakan ujung fleksibel bukan default yang mulai fleksibel dan ujung fleksibel sekarang harus benar-benar
memindahkan item ke akhir daftar.
Jadi mari kita lihat
apakah
itu berhasil, ya, sepertinya tidak berhasil, kan?
Masalahnya di sini adalah bahwa tampilan gulir hanya menumbuhkan tampilan internal yang dibungkus pada akhirnya ketika item baru
ditambahkan, sekarang kami ingin
tampilan internal itu tumbuh secara otomatis. Pada tampilan normal, kita
akan mencapainya dengan menambahkan flex.
Jadi mari kita coba ini di sini di styling daftar ini kita tambahkan ke tampilan gulir juga.
Jika kita menambahkannya di sini, sekarang Anda melihat ini berlaku dengan benar, itu dimulai di sini di bagian bawah dan sekarang mari kita tumbuhkan
ini dan berharap kita tidak menyelesaikan
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
seperti yang kita inginkan, tetapi Anda akan melihat bahwa Anda sebenarnya tidak dapat benar-benar
menggulirnya sehingga Anda selalu melihat item terbaru. Anda dapat menggulir ke sana tetapi kemudian melompat kembali dan
itu mungkin bukan yang kita inginkan, di Android, itu
juga tidak berfungsi. Di sana,
jika sekarang kita mulai menebak, Anda akan melihat
perilaku yang sama, baik jika saya akan sampai di sana, satu-satunya perbedaan adalah itu rusak karena
alasan yang berbeda, saya bahkan tidak bisa menggulir. Jadi flex satu tidak benar-benar melakukan pekerjaan, apa yang dapat Anda gunakan di sana
adalah sesuatu yang belum pernah kami gunakan sebelumnya dan itu flex tumbuh. Sekarang flex tumbuh juga memastikan bahwa
item yang Anda tambahkan ini tumbuh dan memakan ruang sebanyak mungkin, sama seperti
flex, perbedaannya adalah bahwa flex grow bekerja sedikit berbeda secara internal, itu lebih
fleksibel daripada flex. Flex hanya mengatakan, ambil
semua ruang yang tersedia di semua arah yang bisa Anda dapatkan, pertumbuhan fleksibel pada dasarnya
menginstruksikan wadah untuk dapat tumbuh, untuk dapat mengambil ruang sebanyak yang bisa didapat dan itu akan tetapi itu tetap
perilaku
lain yang dimilikinya. biasanya, dalam hal ini tampilan gulir, tempat ini dapat digulir dan
dapat melampaui batas layar juga.
Jadi ini sedikit lebih fleksibel dan Anda mungkin tidak sering membutuhkannya pada tampilan normal tetapi pada tampilan gulir, itu persis
yang kami butuhkan dan saya
hanya menunjukkan ini di sini karena ini adalah kasus khusus yang hanya perlu Anda lakukan. tahu atau yang Anda
mungkin tersandung dan biasanya
Anda kemudian menemukan solusi pada stack overflow dan sebagainya, di sini Anda menemukannya dalam kursus ini karena itu adalah
skenario yang mungkin Anda temui dan karena itu mudah-mudahan, Anda kemudian dapat mengingat kuliah ini dan
melihat bagaimana caranya pecahkan ini.
Jadi saya menambahkan flex tumbuh ke properti daftar itu dan sekarang mari kita coba ini lagi. Di sini di iOS, jika kita
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
rupa sehingga item terlama terlihat, jadi sekarang ini
menunjukkan perilaku yang kita inginkan, terima kasih untuk melenturkan tumbuh.
Dan di Android, itu akan sama jika kita memulai permainan di
sana, Anda lihat sekarang saya juga bisa menggulir ini di sini dan saya bisa melihat tebakan terbaru dan tebakan tertua.
Jadi ini sekarang bekerja dengan cara yang seharusnya di sini di Android dan iOS dan saya menunjukkan semua ini hanya agar
Anda mengetahui pola-pola ini, gaya wadah konten khusus ini pada tampilan gulir dan saya juga ingin memastikan bahwa Anda mengetahui
beberapa masalah yang bisa Anda hadapi ketika Anda mulai menata gaya dan ketika
Anda ingin menambahkan tata letak Anda sendiri di sana, maka ini adalah beberapa trik yang bisa
sangat berguna jika Anda menghadapi situasi itu di aplikasi Anda.