1 00:00:02,310 --> 00:00:08,400 Tentu saja terserah Anda bagaimana Anda ingin mendesain teks konfirmasi ini di sini atau sebenarnya tidak boleh hanya 2 00:00:08,400 --> 00:00:15,630 berupa teks, itu harus berupa tampilan dengan teks di sana yang menampilkan nomor kami dan kemudian tombol untuk memulai permainan dan 3 00:00:15,630 --> 00:00:21,780 Anda pasti dapat menghentikan sebentar video pada titik ini dan muncul dengan gaya Anda sendiri di sana, tata 4 00:00:21,780 --> 00:00:23,050 letak Anda sendiri. 5 00:00:23,100 --> 00:00:27,510 Saya memiliki tata letak tertentu dalam pikiran yang tentunya akan berbeda dari milik Anda, tetapi 6 00:00:27,510 --> 00:00:32,430 tidak ada keputusan yang salah atau benar di sini, jadi pasti ambil ini sebagai kesempatan lain untuk 7 00:00:32,430 --> 00:00:36,990 memunculkan tata letak Anda sendiri untuk ini dan tombol yang saat ini tidak melakukan apa-apa tapi 8 00:00:36,990 --> 00:00:42,520 itu ada yang akan memungkinkan pengguna untuk memulai permainan dan setelah jeda singkat yang dapat Anda gunakan untuk menjeda 9 00:00:42,520 --> 00:00:45,370 video, saya akan menerapkan solusi saya bersama dengan Anda. 10 00:00:45,420 --> 00:00:49,020 Jadi, inilah cara saya berpikir bahwa ini akan terlihat bagus. 11 00:00:49,050 --> 00:00:55,640 Saya ingin memiliki pandangan sehingga saya dapat mengatur wadah umum di sekitar itu atau sebenarnya mungkin bukan tampilan tetapi mengapa kita 12 00:00:55,650 --> 00:00:57,720 tidak menggunakan kartu kami di sini, itu 13 00:00:57,720 --> 00:00:59,680 terdengar seperti ide yang bagus. 14 00:00:59,730 --> 00:01:04,980 Sekarang kartu itu, jika kita melihatnya, tidak memiliki margin dan saya ingin memiliki jarak antara 15 00:01:04,980 --> 00:01:07,950 kartu di bagian atas dan kartu ringkasan saya. 16 00:01:08,070 --> 00:01:15,540 Jadi karena itu di sini, saya akan memberikan ini gaya terpisah di sini di stylesheet saya, di 17 00:01:15,540 --> 00:01:21,570 layar mulai permainan, saya akan memberi nama wadah ringkasan ini, nama seperti biasa 18 00:01:21,570 --> 00:01:35,400 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, 19 00:01:35,400 --> 00:01:44,710 saya ingin mengatakan Anda memilih dan kemudian di baris baru menampilkan nomor dengan cara yang disajikan dengan baik, mungkin nomor dalam 20 00:01:44,710 --> 00:01:51,160 jenis kotak dengan batas terpisah dengan sudut bulat sehingga terlihat jelas atau juga lebih besar 21 00:01:51,310 --> 00:01:56,740 dari teks lainnya dan oleh karena itu di sini, saya akan menambahkan 22 00:01:56,740 --> 00:02:04,070 tampilan dengan teks di sana dan dalam teks itu, saya akan memiliki nomor yang dipilih tetapi 23 00:02:04,620 --> 00:02:11,030 sekarang tampilan dan teks harus mendapatkan gaya khusus dan karena saya berencana menggunakannya kembali, 24 00:02:11,030 --> 00:02:12,690 saya akan benar-benar 25 00:02:12,800 --> 00:02:24,080 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 26 00:02:25,300 --> 00:02:33,850 Bereaksi Asli dan kemudian memiliki komponen penampung nomor di sini, ekspor penampung nomor default dan tentu saja kita juga akan memerlukan stylesheet di 27 00:02:34,090 --> 00:02:41,880 sini, jadi mari kita mengatur stylesheet juga dengan Stylesheet. buat di sana dan kemudian di komponen ini, 28 00:02:42,360 --> 00:02:49,320 saya akan mengembalikan tampilan ini di sini dengan nomor yang dipilih yang sekarang harus diteruskan dan 29 00:02:49,530 --> 00:02:55,140 saya berharap untuk mendapatkannya antara tag pembuka dan penutup dari komponen saya sendiri 30 00:02:55,320 --> 00:02:57,800 dengan bantuan alat peraga anak-anak. 31 00:02:57,870 --> 00:03:02,270 Sekarang wadah ini tentu saja adalah sesuatu yang dapat 32 00:03:02,370 --> 00:03:11,590 Anda konfigurasi dengan bebas, saya akan menambahkan hanya gaya wadah, nama wadah di sini di mana saya pikir lebar dua perbatasan 33 00:03:11,650 --> 00:03:20,650 mungkin terlihat bagus, jadi sedikit lebih lebar, perbatasan yang lebih luas. Warna batas tempat saya sebenarnya ingin menggunakan warna primer atau warna aksen saya, 34 00:03:20,680 --> 00:03:23,670 kita akan melihat mana yang terlihat lebih baik. 35 00:03:23,770 --> 00:03:33,400 Jadi mari kita impor warna dari konstanta / Warna dan untuk warna batas, lalu gunakan aksen warna untuk saat 36 00:03:33,400 --> 00:03:39,670 ini dan lihat bagaimana tampilannya. Beberapa padding sehingga angkanya tidak 37 00:03:39,670 --> 00:03:42,070 langsung di tepi kotak 38 00:03:42,080 --> 00:03:49,630 yang mengelilinginya, tidak duduk langsung di sebelah perbatasan, jari-jari perbatasan 10 untuk memiliki beberapa batas 39 00:03:49,630 --> 00:03:50,440 bulat, 40 00:03:50,440 --> 00:03:56,940 beberapa sudut bundar permisi, ngomong-ngomong jika kamu mau ingin menargetkan setiap sudut, 41 00:03:57,120 --> 00:04:06,780 Anda dapat melakukannya dengan jari-jari kiri batas atas, jari-jari kanan atas, ujung atas dan mulai atas juga mempertimbangkan pengaturan 42 00:04:06,780 --> 00:04:13,980 pengguna mengenai apakah itu bahasa kiri ke kanan atau kanan ke kiri sehingga Anda 43 00:04:13,980 --> 00:04:22,820 dapat menargetkan semua tunggal sudut juga atau mengatur radius untuk semua sudut dengan radius perbatasan dan juga 44 00:04:23,340 --> 00:04:32,120 menambahkan sedikit margin di sini, margin vertikal 10 mungkin memiliki beberapa jarak ke atas dan bawah di 45 00:04:32,300 --> 00:04:40,340 sekitar wadah ini di sini dan juga penting, pusatkan teks di sana dengan menyelaraskan pusat item 46 00:04:40,340 --> 00:04:48,740 dan pusat justifyContent memanfaatkan perilaku kotak fleksibel itu. Dan dengan itu, saya juga ingin memberikan angka itu sendiri, jadi 47 00:04:48,740 --> 00:04:57,230 teks gaya tertentu dan gaya itu adalah saya memberikan teks juga warna aksen dan saya ingin menggunakan ukuran font 22 agar benar-benar menonjol 48 00:04:57,230 --> 00:05:04,280 dan nantinya , kami juga akan menggunakan font khusus. Dan kemudian tampilan ini mendapatkan gaya 49 00:05:04,280 --> 00:05:13,830 wadah dan teks di sini tentu saja menerima gaya angka. Dengan pengaturan itu, kita dapat menggunakan wadah nomor di layar mulai 50 00:05:13,830 --> 00:05:19,740 permainan, jadi di sana kita cukup menambahkan impor itu dan apa yang kita lakukan di 51 00:05:19,740 --> 00:05:25,000 sini cukup normal, bahwa Anda memiliki beberapa komponen yang Anda buat aplikasi Anda. 52 00:05:25,160 --> 00:05:31,560 Jadi sekarang kita dapat menggunakan penampung angka di komponen layar mulai permainan, tambahkan di sini di bawah teks ini dan 53 00:05:32,010 --> 00:05:38,160 di penampung angka, kita mendapatkan konten di sini dengan alat peraga anak-anak, kita output dengan alat peraga anak-anak, itu 54 00:05:38,220 --> 00:05:41,190 berarti kita harus meneruskannya antara tag pembuka dan 55 00:05:41,250 --> 00:05:44,370 penutup, jadi di sini, kami meneruskan nomor yang dipilih. 56 00:05:44,580 --> 00:05:48,710 Nah, itu hanya saran saya untuk bagaimana kita bisa mendesain ini tapi saya 57 00:05:48,900 --> 00:05:54,630 suka gaya dan kemudian untuk saat ini, saya akan menambahkan tombol di sini yang merupakan tag penutup sendiri, tombol 58 00:05:55,080 --> 00:06:02,890 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 59 00:06:02,940 --> 00:06:08,820 kita dapatkan dan itu tidak terlihat terlalu jelek, kataku. Namun, ada dua hal yang 60 00:06:08,820 --> 00:06:15,060 ingin saya ubah, teks ini di sini harus dipusatkan dan kotak ini 61 00:06:15,330 --> 00:06:22,120 dengan nomor tidak boleh selebar kotak di sekitarnya tetapi hanya selebar jumlah yang diperlukan. 62 00:06:22,860 --> 00:06:30,260 Sekarang untuk membuat keduanya berfungsi, saya akan pergi ke kartu saya yang memegang semua konten di sini 63 00:06:30,260 --> 00:06:33,900 dan dengan itu, maksud saya, saya pergi ke 64 00:06:34,040 --> 00:06:35,480 gaya di layar 65 00:06:35,750 --> 00:06:45,400 mulai permainan yang juga saya gunakan pada kartu itu, itu wadah ringkasan saya dan di sana kami dapat menyelaraskan item di sana 66 00:06:45,400 --> 00:06:52,280 untuk dipusatkan, alih-alih menggunakan default yang akan merentang dan sekarang ini terpusat secara otomatis dan kotak 67 00:06:52,280 --> 00:06:54,610 hanya selebar jumlah yang diperlukan. 68 00:06:54,700 --> 00:06:57,360 Sekarang itu tidak terlihat terlalu buruk, satu 69 00:06:57,370 --> 00:07:03,160 hal terakhir yang saya perhatikan adalah bahwa ketika kita mengkonfirmasi input, saya juga ingin menggunakan API keyboard 70 00:07:03,190 --> 00:07:09,940 untuk mengabaikan keyboard sehingga segera setelah kami menekan konfirmasi di sini, kami juga menutup keyboard dan sekarang kami memiliki 71 00:07:10,180 --> 00:07:12,220 output yang bagus di sini. 72 00:07:12,220 --> 00:07:16,180 Sekarang dengan itu, kita memiliki tampilan dasar yang solid. Saya katakan, kita dapat 73 00:07:16,180 --> 00:07:22,210 memilih nomor, kita melakukan beberapa validasi kasar untuk memastikan bahwa kita memiliki nomor yang valid dan langkah selanjutnya adalah kita 74 00:07:22,210 --> 00:07:28,540 membuat tombol start game ini berfungsi. dan kami menukar apa yang kami lihat di layar di sini untuk permainan kami sedang 75 00:07:28,540 --> 00:07:34,540 menjalankan layar di mana komputer sekarang membuat tebakan dan kami kemudian memastikan kami memberi pengguna kesempatan untuk memberi tahu 76 00:07:34,540 --> 00:07:37,850 apakah jumlahnya harus lebih besar atau lebih rendah dan 77 00:07:37,990 --> 00:07:41,770 kami kemudian di beberapa titik selesai dan menampilkan game di atas layar.