Tentu saja terserah Anda bagaimana Anda ingin mendesain teks konfirmasi ini di sini atau sebenarnya tidak boleh hanya
berupa teks, itu harus berupa tampilan dengan teks di sana yang menampilkan nomor kami dan kemudian tombol untuk memulai permainan dan
Anda pasti dapat menghentikan sebentar video pada titik ini dan muncul dengan gaya Anda sendiri di sana, tata
letak Anda sendiri.
Saya memiliki tata letak tertentu dalam pikiran yang tentunya akan berbeda dari milik Anda, tetapi
tidak ada keputusan yang salah atau benar di sini, jadi pasti ambil ini sebagai kesempatan lain untuk
memunculkan tata letak Anda sendiri untuk ini dan tombol yang saat ini tidak melakukan apa-apa tapi
itu ada yang akan memungkinkan pengguna untuk memulai permainan dan setelah jeda singkat yang dapat Anda gunakan untuk menjeda
video, saya akan menerapkan solusi saya bersama dengan Anda.
Jadi, inilah cara saya berpikir bahwa ini akan terlihat bagus.
Saya ingin memiliki pandangan sehingga saya dapat mengatur wadah umum di sekitar itu atau sebenarnya mungkin bukan tampilan tetapi mengapa kita
tidak menggunakan kartu kami di sini, itu
terdengar seperti ide yang bagus.
Sekarang kartu itu, jika kita melihatnya, tidak memiliki margin dan saya ingin memiliki jarak antara
kartu di bagian atas dan kartu ringkasan saya.
Jadi karena itu di sini, saya akan memberikan ini gaya terpisah di sini di stylesheet saya, di
layar mulai permainan, saya akan memberi nama wadah ringkasan ini, nama seperti biasa
terserah Anda dan saya ingin memiliki margin ke atas mari katakanlah 20, beberapa spasi yang bagus di sini dan tambahkan ini melalui gaya prop ke kartu di sini dan di sana,
saya ingin mengatakan Anda memilih dan kemudian di baris baru menampilkan nomor dengan cara yang disajikan dengan baik, mungkin nomor dalam
jenis kotak dengan batas terpisah dengan sudut bulat sehingga terlihat jelas atau juga lebih besar
dari teks lainnya dan oleh karena itu di sini, saya akan menambahkan
tampilan dengan teks di sana dan dalam teks itu, saya akan memiliki nomor yang dipilih tetapi
sekarang tampilan dan teks harus mendapatkan gaya khusus dan karena saya berencana menggunakannya kembali,
saya akan benar-benar
mengambilnya dan mengalihdayakannya menjadi komponen baru dan saya akan menamainya wadah nomor. Dalam komponen ini, saya akan mengimpor Bereaksi dari Bereaksi dan mengimpor tampilan dan teks dari
Bereaksi Asli dan kemudian memiliki komponen penampung nomor di sini, ekspor penampung nomor default dan tentu saja kita juga akan memerlukan stylesheet di
sini, jadi mari kita mengatur stylesheet juga dengan Stylesheet. buat di sana dan kemudian di komponen ini,
saya akan mengembalikan tampilan ini di sini dengan nomor yang dipilih yang sekarang harus diteruskan dan
saya berharap untuk mendapatkannya antara tag pembuka dan penutup dari komponen saya sendiri
dengan bantuan alat peraga anak-anak.
Sekarang wadah ini tentu saja adalah sesuatu yang dapat
Anda konfigurasi dengan bebas, saya akan menambahkan hanya gaya wadah, nama wadah di sini di mana saya pikir lebar dua perbatasan
mungkin terlihat bagus, jadi sedikit lebih lebar, perbatasan yang lebih luas. Warna batas tempat saya sebenarnya ingin menggunakan warna primer atau warna aksen saya,
kita akan melihat mana yang terlihat lebih baik.
Jadi mari kita impor warna dari konstanta / Warna dan untuk warna batas, lalu gunakan aksen warna untuk saat
ini dan lihat bagaimana tampilannya. Beberapa padding sehingga angkanya tidak
langsung di tepi kotak
yang mengelilinginya, tidak duduk langsung di sebelah perbatasan, jari-jari perbatasan 10 untuk memiliki beberapa batas
bulat,
beberapa sudut bundar permisi, ngomong-ngomong jika kamu mau ingin menargetkan setiap sudut,
Anda dapat melakukannya dengan jari-jari kiri batas atas, jari-jari kanan atas, ujung atas dan mulai atas juga mempertimbangkan pengaturan
pengguna mengenai apakah itu bahasa kiri ke kanan atau kanan ke kiri sehingga Anda
dapat menargetkan semua tunggal sudut juga atau mengatur radius untuk semua sudut dengan radius perbatasan dan juga
menambahkan sedikit margin di sini, margin vertikal 10 mungkin memiliki beberapa jarak ke atas dan bawah di
sekitar wadah ini di sini dan juga penting, pusatkan teks di sana dengan menyelaraskan pusat item
dan pusat justifyContent memanfaatkan perilaku kotak fleksibel itu. Dan dengan itu, saya juga ingin memberikan angka itu sendiri, jadi
teks gaya tertentu dan gaya itu adalah saya memberikan teks juga warna aksen dan saya ingin menggunakan ukuran font 22 agar benar-benar menonjol
dan nantinya , kami juga akan menggunakan font khusus. Dan kemudian tampilan ini mendapatkan gaya
wadah dan teks di sini tentu saja menerima gaya angka. Dengan pengaturan itu, kita dapat menggunakan wadah nomor di layar mulai
permainan, jadi di sana kita cukup menambahkan impor itu dan apa yang kita lakukan di
sini cukup normal, bahwa Anda memiliki beberapa komponen yang Anda buat aplikasi Anda.
Jadi sekarang kita dapat menggunakan penampung angka di komponen layar mulai permainan, tambahkan di sini di bawah teks ini dan
di penampung angka, kita mendapatkan konten di sini dengan alat peraga anak-anak, kita output dengan alat peraga anak-anak, itu
berarti kita harus meneruskannya antara tag pembuka dan
penutup, jadi di sini, kami meneruskan nomor yang dipilih.
Nah, itu hanya saran saya untuk bagaimana kita bisa mendesain ini tapi saya
suka gaya dan kemudian untuk saat ini, saya akan menambahkan tombol di sini yang merupakan tag penutup sendiri, tombol
built-in dengan judul start game, semua topi untuk membuatnya benar-benar menonjol dan menyimpan ini dan sekarang jika kita memilih nomor di sini, ini adalah apa yang
kita dapatkan dan itu tidak terlihat terlalu jelek, kataku. Namun, ada dua hal yang
ingin saya ubah, teks ini di sini harus dipusatkan dan kotak ini
dengan nomor tidak boleh selebar kotak di sekitarnya tetapi hanya selebar jumlah yang diperlukan.
Sekarang untuk membuat keduanya berfungsi, saya akan pergi ke kartu saya yang memegang semua konten di sini
dan dengan itu, maksud saya, saya pergi ke
gaya di layar
mulai permainan yang juga saya gunakan pada kartu itu, itu wadah ringkasan saya dan di sana kami dapat menyelaraskan item di sana
untuk dipusatkan, alih-alih menggunakan default yang akan merentang dan sekarang ini terpusat secara otomatis dan kotak
hanya selebar jumlah yang diperlukan.
Sekarang itu tidak terlihat terlalu buruk, satu
hal terakhir yang saya perhatikan adalah bahwa ketika kita mengkonfirmasi input, saya juga ingin menggunakan API keyboard
untuk mengabaikan keyboard sehingga segera setelah kami menekan konfirmasi di sini, kami juga menutup keyboard dan sekarang kami memiliki
output yang bagus di sini.
Sekarang dengan itu, kita memiliki tampilan dasar yang solid. Saya katakan, kita dapat
memilih nomor, kita melakukan beberapa validasi kasar untuk memastikan bahwa kita memiliki nomor yang valid dan langkah selanjutnya adalah kita
membuat tombol start game ini berfungsi. dan kami menukar apa yang kami lihat di layar di sini untuk permainan kami sedang
menjalankan layar di mana komputer sekarang membuat tebakan dan kami kemudian memastikan kami memberi pengguna kesempatan untuk memberi tahu
apakah jumlahnya harus lebih besar atau lebih rendah dan
kami kemudian di beberapa titik selesai dan menampilkan game di atas layar.