Jelas, layar ini sekarang tidak begitu berguna dan karena itu sekarang
saya akan pergi ke teks yang saya gunakan sebagai boneka dan menggantinya dengan katakanlah memulai permainan baru, sesuatu seperti itu dan
di bawah ini, saya ingin memiliki input area dengan sedikit drop shadow, jadi ini tampilan kartu yang khas yang mungkin Anda ketahui dari
beberapa aplikasi dan situs web di mana Anda memiliki sebuah kotak dengan sedikit drop shadow di belakangnya,
mungkin beberapa sudut bulat.
Saya ingin membuatnya kembali di sini, jadi saya akan menambahkan tampilan di sini, tampilan karena sekali lagi itu adalah elemen yang sangat
fleksibel, kita dapat menerapkan banyak gaya di sana, kita dapat menambahkan bayangan dan sudut bundar kita di
sana dan kemudian
tahan konten dalam tampilan itu, jadi itu bagus untuk memiliki gaya umum wadah dan sekarang di dalam
tampilan itu, saya ingin memiliki teks di mana kita katakan pilih nomor misalnya dan di mana kita kemudian juga ingin memiliki bidang teks di
mana pengguna dapat memasukkan sesuatu.
Jadi
di sana, saya akan menambahkan komponen input teks yang merupakan komponen bawaan di mana pengguna dapat menggunakan keyboard untuk memasukkan
nilai dan di sini, mereka harus memasukkan angka. Kami akan mengonfigurasikan ini dan menata ini dalam sedetik,
untuk saat ini saya hanya akan memasukkannya seperti itu dan di bawah itu, saya ingin ada dua tombol
yang saling
bersebelahan dan itu penting, di samping satu sama lain, tidak di bawah satu sama lain lain yang memungkinkan kita untuk
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
sama lain sedangkan item ini diposisikan di atas satu sama lain maka karena jika saya hanya akan menambahkan dua
tombol di sini, maka saya harus mengubah pandangan ini arah fleksibel untuk memilikinya selanjutnya satu sama lain tetapi kemudian input teks
dan teks juga akan duduk di sebelah satu sama lain.
Jadi sekarang saya akan menambahkan tampilan di sini sehingga dalam tampilan ini, tampilan sekitarnya, ini, ini dan komponen tampilan ini
duduk di atas satu
sama lain, jadi pada sumbu vertikal tetapi di dalam tampilan ini, saya sekarang juga dapat memastikan bahwa barang-barang di sana
kemudian duduk bersebelahan, jadi di sumbu horizontal dan itulah yang saya inginkan di sini.
Jadi saya akan mengimpor tombol bawaan yang merupakan salah satu komponen tampilan yang secara otomatis menyesuaikan diri dengan
platform yang mendasarinya, kemudian dalam modul terpisah, Anda akan belajar bagaimana Anda bisa mencari tahu secara manual pada
platform mana Anda menjalankan untuk menyesuaikan tampilan dan nuansa aplikasi Anda untuk itu.
Di sini, kita akan pergi dengan tombol built-in dan memberikan yang pertama judul reset dan yang kedua, tombol kedua di
sini judul konfirmasi dan kemudian di sini, onPress
akan saat ini tidak melakukan apa-apa, jadi itu hanya sebuah fungsi kosong, cukup tambahkan sehingga kita memiliki prop sudah ada
di sana, kita akan menambahkan logika
nanti dan untuk sekarang,
kita akan memiliki tombol di sini.
Sekarang penataan rambut akan hilang, seperti yang saya katakan, tombol harus duduk bersebelahan.
Oleh karena itu saya akan memberikan pandangan ini di sini yang memegang tombol gaya menunjuk
ke objek gaya dan
di sana, katakanlah wadah tombol, nama ini seperti
selalu sepenuhnya terserah Anda dan saya juga ingin memberikan pandangan ini yang memegang input saya dan gaya di sini, mengacu pada objek
gaya dan saya akan menggunakan katakanlah wadah masukan, nama ini
tentu juga terserah Anda dan ini di sini, saya ingin gaya ini seperti judul khusus,
mungkin dengan ukuran font yang lebih besar, jadi di sini, saya akan menetapkan gaya judul katakanlah.
Sekarang kita bisa pergi ke sana di stylesheet kita dan menambahkan judul, menambahkan wadah input dan juga menambahkan wadah tombol dan sekarang kita
dapat mulai menambahkan beberapa gaya di sana. Sekarang untuk judul, sekali lagi saya
ingin mengatur ukuran font, jadi saya akan mengatur
ukuran font seperti ini, mengaturnya menjadi katakanlah 20 dan mungkin juga menambahkan beberapa spasi pada sumbu vertikal dengan margin vertikal katakanlah 10, 10 seperti
ini dan selalu diingat, margin vertikal pada dasarnya menggantikan margin bawah dan margin atas dan sekarang ke wadah tombol dan saya akan kembali
ke wadah input dalam hitungan detik, wadah tombol akan mendapatkan arah fleksibel baris, standarnya adalah
kolom tapi sekarang saya ingin memiliki
item yang duduk bersebelahan, jadi kita perlu menggunakan
baris di sini.
Saya ingin menetapkan lebar di sini karena jika kita tidak menetapkan lebar pada wadah tombol, itu
hanya akan sama lebarnya dengan dua tombol bersama, sebagai gantinya
saya ingin menggunakan lebar induk, jadi dari pandangan ini di sini dan kemudian posisikan tombol di dalam tampilan
ini, jadi
saya ingin melakukan yang sebaliknya, bukan gaya tampilan sesuai dengan tombol tetapi posisi tombol sesuai
dengan tampilan.
Jadi saya akan memberikan wadah tombol tampilan ini dan lebar eksplisit di sini dan sekarang untuk memposisikan tombol-tombol di sana,
kita
dapat menggunakan justifyContent untuk memposisikannya di sepanjang sumbu utama yang untuk baris arah lentur dibiarkan ke kanan
dan di sana saya akan memilih ruang antara sehingga tombol duduk di tepi kiri dan kanan baris ini
dan mendistribusikan semua ruang kosong yang tersedia di antara mereka. Juga tambahkan sedikit padding horizontal di sini sehingga kami memiliki
beberapa spasi di kiri dan kanan dalam tampilan kami, mungkin 15 sehingga tombol tidak benar-benar duduk langsung di
tepi di kiri dan kanan tetapi ada beberapa
melamun di kiri dan kanan. Oke, jadi dengan itu
jika kita menyimpan ini, kita melihat apa yang tidak saya ketahui
tentang Anda tetapi yang tidak terlihat bagus, bukan?
Sekarang masalahnya adalah bahwa wadah input belum memiliki gaya. Wadah input menampung semua input, oleh karena itu
stylings di sana terlihat agak tidak aktif.
Jadi kita harus memberi wadah masukan beberapa gaya dan di sana, saya ingin menambahkan lebar dan
sekarang Anda dapat menggunakan lebar hardcoded katakanlah 300 piksel atau menggunakan lebar dan persentase.
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
kecil, jadi itu sedikit responsif yang saya tambahkan di sini sudah, jika perangkat akan terlalu kecil,
kami memastikan bahwa lebar kami tidak melebihi 80%. Dan kemudian saya ingin menyelaraskan item di
tengah, perlu diingat wadah input
adalah pandangan, karena itu menggunakan flexbox, menggunakan default kolom
arah lentur dan oleh karena itu dengan menyelaraskan item center, kami menempatkan item di
tengah pada sumbu silang yang kiri ke kanan,
jadi kami memusatkan item secara horizontal. Sekarang dengan itu, sekarang ini terlihat jauh lebih
baik, kita tidak bisa
benar-benar melihat input tapi itu yang lama, kan?
Kita harus menatanya sehingga kita benar-benar bisa melihatnya. Kami melihat tombol dan kita dapat
melihat bahwa tata letak dan gaya umum kami mengambil beberapa bentuk.
Namun, saya belum 100% senang dengan tampilan ini.