MDC-102: Struktur dan susun atur bahan

Reka bentuk bahan menawarkan format navigasi yang menjamin kemudahan penggunaan yang hebat. Salah satu komponen yang paling ketara ialah bar aplikasi atas.

Buat Akaun Pemaju Google Play

Maklumkan maklumat peribadi anda, alamat pilihan dan kata laluan anda.

Terima Syarat Umum Jualan (GTC).

Tambahkan gambar diri anda yang bagus.

Buat Akaun Pemaju Google Play

Prosedur untuk membuat akaun pemaju google main jauh lebih mudah daripada di epal.

Sambungkan dengan alamat gmail anda.

Terima GTC.

Laraskan Yuran Pendaftaran: Satu pembayaran sebanyak 25 Euro untuk menerbitkan semua aplikasi pilihan anda !

Maklumkan maklumat yang berkaitan dengan akaun anda: Nama pemaju, alamat e -mel dan nombor telefon.

Ini telah menjawab soalan anda ?

Terima kasih atas komen ada masalah untuk mengemukakan komen anda. sila cuba sebentar lagi.

Kemas kini terakhir pada 9 November 2021

Artikel yang berkaitan

• Buat aplikasi di Google Play Console
• Menjana sijil p12 Android
• Mengeksport fail APK atau AAB
• Menerbitkan aplikasi Android
• Terbitkan aplikasi Android di luar Play Store
• Terbitkan di Google Play Store

MDC-102: Struktur dan susun atur bahan

Komponen Bahan (MDC) membantu pemaju melaksanakan reka bentuk bahan. Direka oleh pasukan jurutera dan pakar pengalaman pengguna di Google, MDC menawarkan berpuluh -puluh komponen antara muka pengguna yang elegan dan berfungsi. Ia tersedia untuk Android, iOS, Web dan Flutter.bahan.Io/berkembang.

Dalam bengkel pengaturcaraan MDC-101, anda menggunakan dua elemen komponen bahan untuk membuat halaman sambungan: medan teks dan butang yang terdiri daripada animasi “dakwat”. Di pangkalan ini, marilah kita memperkayakan aplikasi kita dengan menambahkan navigasi, struktur dan data.

Objektif bengkel

Dalam bengkel pengaturcaraan ini, anda akan membuat skrin utama untuk Kuil, Permohonan e-dagang untuk penjualan pakaian dan barang untuk rumah. Skrin ini akan mengandungi:

• Bar aplikasi yang lebih tinggi
• Senarai produk dalam bentuk grid

Sila ambil perhatian bahawa bengkel pengaturcaraan ini digantikan oleh bahan 3, kecuali tangkapan skrin. Mereka tetap menyampaikan maklumat yang sama.

Bengkel pengaturcaraan ini adalah yang kedua dari empat bengkel yang akan membantu anda membuat aplikasi untuk produk yang dipanggil Sanctuary. Kami mengesyorkan agar anda mengikuti semua bengkel pengaturcaraan dengan teratur, untuk memajukan tugas sedikit demi sedikit. Anda akan menemui bengkel pengaturcaraan anda di sini:

• MDC-101 Flutter: Prinsip Asas Komponen Bahan
• MDC-103 Flutter: Penggunaan tema reka bentuk bahan (warna, bentuk, ketinggian dan jenis)
• MDC-104 Flutter: Komponen Reka Bentuk Bahan Lanjutan

Komponen dan subsistem bahan berkibar bahan dalam bengkel pengaturcaraan ini

• Atas
• Grid
• Kad

Dalam bengkel pengaturcaraan ini, anda akan menggunakan komponen lalai yang disediakan oleh Flutter Material. Anda akan belajar menyesuaikannya di bahagian MDC-103: penggunaan tema reka bentuk bahan (warna, bentuk, ketinggian dan jenis).

Bagaimana anda menilai tahap pengalaman anda dalam pembangunan dengan Flutter ?

2. Konfigurasikan Persekitaran Pembangunan Flutter

Untuk bengkel ini, anda memerlukan dua perisian: Flutter SDK dan Penerbit.

Anda boleh menjalankan bengkel pengaturcaraan di salah satu peranti berikut:

• Peranti iOS Android atau fizikal yang disambungkan ke komputer anda dan ditetapkan dalam mod pemaju.
• Simulator iOS (alat xcode untuk dipasang).
• Emulator Android (yang mesti dikonfigurasikan di Android Studio).
• Penyemak imbas (Chrome diperlukan untuk debugging).
• Sebagai Windows, Linux atau MacOS Desktop. Anda mesti mengembangkan aplikasi anda di platform di mana anda merancang untuk menggunakannya. Contohnya, jika anda ingin membangunkan aplikasi desktop Windows, anda mesti melakukannya pada Windows untuk mengakses rantai kompilasi yang sesuai. Juga pelajari mengenai keperluan khusus untuk sistem pengendalian, yang terperinci mengenai dokumen.flutter.Dev/desktop.

3. Muat turun aplikasi berlepas untuk bengkel pengaturcaraan

Anda sudah mengikuti bengkel MDC-101 ?

Sekiranya anda telah menyelesaikan bengkel pengaturcaraan MDC-101, kod anda harus bersedia untuk memulakan bengkel ini. Pergi ke peringkat seterusnya: Tambahkan bar aplikasi yang lebih tinggi.

Anda bermula dari awal ?

Muat turun permohonan Berlepas Bengkel Permulaan

Aplikasi permulaan adalah dalam bahan-komponen-flutter-codelabs-102-starter_and_101-lengkap/mdc_100_series .

… atau klon bengkel dari GitHub

Untuk mengklon bengkel pengaturcaraan ini dari GitHub, jalankan arahan berikut:

Git Clone https: // github.Com/bahan-komponen/bahan-komponen-flutter-codelabs.Git cd bahan-komponen-flutter-codelabs/mdc_100_series git checkout 102-starter_and_101-lengkap

Untuk bantuan, lihat bahagian pengklonan dari GitHub

Pilih cawangan yang betul

Bengkel pengaturcaraan MDC-101 pada 104 bergantung pada satu sama lain. Oleh itu, apabila anda menyelesaikan kod untuk bengkel MDC-102, ia menjadi kod permulaan bengkel MDC-103. Kod ini dibahagikan kepada beberapa cawangan, yang boleh anda memaparkan senarai menggunakan arahan ini:

Cawangan git -list

Untuk memaparkan kod siap, pergi ke cawangan 103-starter_and_102-lengkap .

Buka projek dan laksanakan aplikasi

1. Buka projek di penerbit pilihan anda.
2. Ikuti arahan mengenai penerbit yang telah anda pilih. Mereka boleh diakses dengan perenggan “Jalankan Aplikasi” (laksanakan aplikasi) pada halaman pemacu uji mulai (langkah pertama> ujian).

Operasi yang berjaya. Halaman Sambungan Sanctuary dari bengkel pengaturcaraan MDC-101 mesti dipaparkan pada peranti anda.

Sekarang bahawa skrin sambungan ada, mari tambahkan beberapa produk ke aplikasi.

4. Tambahkan bar aplikasi yang lebih tinggi

Buat masa ini, jika anda mengklik butang “Seterusnya”, skrin utama dipaparkan dengan mesej “Anda melakukannya!”(Anda berjaya.))). Sempurna. Walau bagaimanapun, pengguna kami tidak ada kaitan dan tidak tahu di mana dia berada dalam permohonan itu. Untuk menolong anda, sudah tiba masanya untuk menambah navigasi.

Di sana navigasi merujuk kepada komponen, interaksi, petunjuk visual dan seni bina maklumat yang membolehkan pengguna menavigasi dalam aplikasi. Ia membolehkan anda menemui kandungan dan ciri -ciri, dan dengan mudah melaksanakan tugas.

Untuk mengetahui lebih lanjut, rujuk artikel yang dikhaskan untuk navigasi dalam arahan reka bentuk bahan.

Reka bentuk bahan menawarkan format navigasi yang menjamin kemudahan penggunaan yang hebat. Salah satu komponen yang paling ketara ialah bar aplikasi atas.

Anda mungkin tahu elemen ini di bawah nama “bar navigasi” di bawah iOS, atau hanya “bar aplikasi” atau “header”.

Untuk menawarkan pengguna akses cepat ke tindakan lain, mari tambahkan bar aplikasi yang lebih tinggi.

Tambahkan widget AppBar

Dalam rumah.Dart, tambahkan appbar ke “perancah”, kemudian padamkan const yang diserlahkan:

Kembalikan Const Scaffold (// Todo: Tambah App Bar (102) AppBar: AppBar (// Todo: Tambah Butang dan Tajuk (102)), 

PenambahanAppBar Di medan AppBar: Perancah membolehkan kami mendapatkan susun atur yang sempurna dan percuma, meninggalkan bar aplikasi di bahagian atas halaman dan di bawah badan.

Perancah adalah widget penting dalam materips. Ia menyediakan API praktikal untuk memaparkan semua jenis komponen perkara semasa, seperti panel, bar pemberitahuan “snackbar” dan elemen lembaran bawah. Ia bahkan memudahkan penempatan butang tindakan terapung.

Rujuk dokumentasi Flutter untuk mengetahui lebih lanjut mengenai perancah.

Catat projek. Setelah kuil dikemas kini, klik Seterusnya (Mengikuti) untuk memaparkan skrin utama.

Unsurnya berada di kedudukan yang baik, tetapi ia tidak mempunyai tajuk.

Tambahkan widget teks

Dalam rumah.Dart, tambahkan tajuk ke bar aplikasi AppBar:

// Todo: Tambah App Bar (102) AppBar: AppBar (// Todo: Tambah Butang dan Tajuk (102) Tajuk: Const Text ('Shrine'), // Todo: Tambah Butang Trailing (102) 

Catat projek.

Anda mungkin perasan variasi untuk setiap platform. Sistem Reka Bentuk Bahan mengambil kira bahawa setiap platform (Android, iOS, Web) berbeza dan jangkaan pengguna berbeza. Contohnya, pada iOS, tajuk hampir selalu berpusat. Ini adalah tingkah laku lalai yang disediakan oleh UIKIT. Di Android, mereka dibariskan di sebelah kiri. Oleh itu, jika anda menggunakan emulator atau peranti Android, tajuk anda harus diselaraskan di sebelah kiri. Sekiranya simulator atau peranti iOS, ia mesti berpusat.

Untuk mengetahui lebih lanjut, rujuk artikel ini mengenai penyesuaian ke platform yang berbeza dengan reka bentuk bahan.

Banyak bar aplikasi mempunyai butang di sebelah tajuk. Tambahkan ikon menu ke aplikasi kami.

Tambahkan butang Iconbutton pada permulaan baris

Sentiasa di rumah.Dart, Tentukan Elemen Iconbutton untuk Bidang Utama: Bar Aplikasi Appbar. (Letakkannya sebelum medan tajuk: mengikut permulaan dari awal hingga akhir baris):

 // Todo: Tambah Butang dan Tajuk (102) Terkemuka: IconButton (Icon: Const Icon (Ikon.Menu, SemanticLabel: 'Menu',), Onpressed: () < print('Menu button'); >, ))), 

Catat projek.

Ikon menu (juga dipanggil “hamburger”), muncul di lokasi yang dikehendaki.

Kelas Iconbutton adalah cara praktikal untuk mengintegrasikan ikon bahan ke dalam aplikasi anda. Dia menggunakan widget Ikon. Flutter mempunyai koleksi ikon lengkap di dalam kelas Ikon. Ikon diimport secara automatik mengikut pemetaan saluran “const”.

Untuk mengetahui lebih lanjut mengenai kelas ikon, lihat dokumentasi Flutter. Untuk mengetahui lebih lanjut mengenai widget ikon, lihat dokumentasi Flutter.

Anda juga boleh menambah butang di hujung baris. Dalam Flutter, butang ini dipanggil “Tindakan”.

Syarat permulaan Dan Akhir menyatakan makna membaca, tanpa mengira bahasa yang berkenaan. Semasa anda bekerja dalam bacaan lidah dari kiri ke kanan, seperti Bahasa Inggeris, permulaan bermaksud ke kiri Dan Akhir bermaksud ke kanan. Dalam bahasa yang dibaca dari kanan ke kiri, seperti bahasa Arab, istilahnya permulaan bermaksud ke kanan, Dan Akhir bermaksud ke kiri.

Untuk mengetahui lebih lanjut mengenai pembalikan antara muka pengguna, rujuk arahan reka bentuk bahan mengenai bidirecticity.

Tambah tindakan

Ada ruang yang cukup untuk dua elemen iconbutton lain.

Tambahkannya ke contoh AppBar selepas tajuk:

// Todo: Tambah Butang Trailing (102) Tindakan: [IconButton (Icon: Const Icon (Ikon.Cari, semantikLabel: 'cari',), ontpresd: () < print('Search button'); >, ), Iconbutton (Ikon: Const Icon (Ikon.Tune, SemanticLabel: 'Filter',), onPresd: () < print('Filter button'); >, ),], 

Catat projek. Skrin utama anda harus timbul seperti berikut:

Aplikasi sekarang mempunyai butang pada permulaan baris, tajuk dan dua tindakan di sebelah kanan. Bar permohonan juga mempunyai kesanketinggian kerana sedikit naungan yang menunjukkan bahawa ia berada pada tahap yang berbeza dari kandungan.

Dalam kelas ikon, bidang Semantiklabel adalah cara biasa untuk menambah maklumat kebolehaksesan untuk berkibar. Ia adalah sistem yang sangat dekat dengan kata -kata kandungan Android dan fungsi uiaccessibility pada aksesibiliti iOS . Anda akan dapati dalam banyak kursus.

Maklumat yang terkandung dalam bidang ini memungkinkan untuk memberikan maklumat mengenai pembaca skrin mengenai peranan butang ini.

Sekiranya widget tidak mempunyai medan semantikLabel :, anda boleh merangkumnya dalam widget Semantik. Untuk mengetahui lebih lanjut mengenai widget Semantik, lihat dokumentasi Flutter.

5. Tambahkan lembaran dalam grid

Sekarang aplikasi kami sedikit lebih berstruktur, marilah kita mengatur kandungannya dengan meletakkannya dalam fail.

The kad adalah elemen bebas yang memaparkan kandungan dan tindakan yang berkaitan dengan subjek tertentu. Mereka menawarkan cara yang fleksibel untuk membentangkan kandungan yang serupa dalam bentuk koleksi.

Untuk mengetahui lebih lanjut, lihat artikel yang dikhaskan untuk fail dalam arahan reka bentuk bahan.

Untuk mengetahui lebih lanjut mengenai widget kad (lembaran), rujuk artikel mengenai penciptaan susun atur di Flutter.

Tambahkan widget GridView

Mari mulakan dengan menambahkan lembaran di bawah bar aplikasi atas. Pada masa ini, widget Kad (Lembaran) tidak mengandungi maklumat yang mencukupi untuk meletakkan diri anda dengan jelas. Oleh itu, kami akan merangkumnya dalam widget Paparan grid.

Gantikan pusat dalam badan elemen perancah dengan widget GridView:

// Todo: Tambahkan Paparan Grid (102) Badan: GridView.Count (Crossaxiscount: 2, Padding: Const Edgeinsts.Semua (16.0), Childaspectratio: 8.0/9.0, // Todo: Bina grid kad (102) Kanak -kanak: [kad ()],),), 

Mari analisis kod ini. Widget griver memanggil kiraan pengeluar (), kerana bilangan elemen yang dipaparkan dapat dikira dan tidak tak terbatas. Tetapi dia memerlukan maklumat tambahan untuk menentukan susun aturnya.

Pembolehubah Crossaxiscount: Menunjukkan bilangan elemen setiap baris. Kami mahu mendapatkan dua lajur.

L ‘paksi transversal dalam Flutter sepadan dengan paksi yang kita tidak tatal. Rasa menatal dipanggil paksi utama. Sekiranya anda menggunakan menatal menegak, seperti kes lalai dengan GridView, paksi melintang adalah mendatar.

Untuk mengetahui lebih lanjut, lihat halaman yang didedikasikan untuk membuat susun atur.

Medan padding: mentakrifkan ruang kosong di empat sisi widget Gridview. Sudah tentu, margin ini tidak dapat dilihat sebagai hasil dari elemen atau di bawahnya, kerana tidak ada anak Gridview yang belum diletakkan di sebelah elemen ini buat masa ini.

Medan Childaspecto: Mengenal pasti saiz unsur -unsur dalam bentuk perkadaran (lebar pada ketinggian).

Secara lalai, GridView mencipta blok saiz yang sama.

Kami mempunyai lembaran, tetapi kosong. Tambahkan widget kanak -kanak ke helaian ini.

Letakkan kandungannya

Lembaran mesti termasuk kawasan untuk imej, tajuk dan teks sekunder.

Kemas kini kanak -kanak dari widget GridView:

// Todo: Bina grid kad (102) Kanak -kanak: [Kad (ClipBehavior: Klip.Antialias, Kanak.Mula, Kanak -kanak: [Aspectratio (Aspectratio: 18.0/11.0, Anak: Gambar.Aset ('aset/berlian.png '),), padding (padding: const edgeinsts.Fromltrb (16.0, 12.0, 16.0, 8.0), Kanak -kanak: Lajur (Crossaxisalignment: Crossaxisalignment.Mula, Kanak -kanak: [Teks ('Tajuk'), Const SizedBox (Ketinggian: 8.0), teks ('teks sekunder'),],),),],)]]]], 

Kod ini menambah widget lajur (lajur) yang membolehkan anda mempunyai widget kanak -kanak secara menegak.

Parameter Crossaxisalignment: Medan Menentukan Nilai Crossaxisalisasi.Mula, yang bermaksud “menyelaraskan teks pada ‘permulaan garis'” sisi “.

Widget Nisbah aspek mentakrifkan perkadaran imej yang dipaparkan, tanpa mengira jenis imej yang disediakan.

Elemen Padding mentakrifkan margin untuk teks.

Kedua -dua widget Teks Satu di atas yang lain diletakkan dan dipisahkan oleh lapan titik ruang kosong (Kotak bersaiz))). Kami mencipta elemen lain Kolum untuk memberi mereka margin dalaman.

Catat projek.

Dalam gambaran ini, anda dapat melihat bahawa lembaran itu diposisikan dengan margin, sudutnya dibulatkan dan ia memproyeksikan bayangan (mewakili ketinggiannya). Bentuk keseluruhan dipanggil “bekas” dalam sistem reka bentuk bahan (tidak boleh dikelirukan dengan kelas widget yang dipanggil kontena).

Selain daripada bekas, semua elemen lembaran adalah pilihan dalam bahan. Anda boleh menambah teks header, pelekat atau avatar, teks sarikata, pemisah, dan juga jerawat dan ikon.

Untuk mengetahui lebih lanjut mengenai kandungan lembaran, rujuk artikel ini dalam arahan reka bentuk bahan.

Lembaran biasanya dipaparkan dalam koleksi dengan helaian lain. Susun mereka dalam bentuk koleksi dalam grid.

6. Buat koleksi fail

Apabila beberapa helaian hadir di skrin, mereka dikelompokkan dalam satu atau lebih koleksi. Fail koleksi adalah coplanar: mereka mempunyai semua ketinggian yang sama pada rehat (iaitu apabila mereka tidak dipilih atau dipindahkan, yang tidak akan kita lakukan di sini).

Buat koleksi fail

Buat masa ini, lembaran kami diletakkan di dalam bidang kanak -kanak: Gridview Grid. Ini membawa kepada sejumlah besar kod bersarang yang sukar dibaca. Marilah kita mengubah bahagian kod ini ke dalam fungsi yang membolehkan untuk menghasilkan seberapa banyak lembaran kosong yang diperlukan dan mengembalikan senarai fail.

Buat fungsi peribadi di atas fungsi binaan () (ingat bahawa fungsi bermula dengan garis bawah adalah API persendirian):

// Todo: Buat Koleksi Koleksi (102) Senarai _BuildGridCards (int cent) < Listcards = List.generate( count, (int index) < return Card( clipBehavior: Clip.antiAlias, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ AspectRatio( aspectRatio: 18.0 / 11.0, child: Image.asset('assets/diamond.png'), ), Padding( padding: const EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: const [ Text('Title'), SizedBox(height: 8.0), Text('Secondary Text'), ], ), ), ], ), ); >, ); Kad pengembalian; > 

Berikan fail yang dihasilkan di medan kanak -kanak widget Gridview. jangan lupa untuk Gantikan semua elemen yang terkandung dalam widget GridView dengan kod baru ini ::

// Todo: Tambahkan Paparan Grid (102) Badan: GridView.Count (Crossaxiscount: 2, Padding: Const Edgeinsts.Semua (16.0), Childaspectratio: 8.0/9.0, Kanak -kanak: _buildgridcards (10) // Ganti), 

Catat projek.

Kad hadir, tetapi mereka tidak memaparkan apa -apa buat masa ini. Masa telah tiba untuk menambah data produk.

Tambah data produk

Aplikasi ini mengandungi beberapa produk dengan imej, nama dan harga. Tambahkan ini ke widget yang sudah ada dalam fail

Kemudian di rumah.Dart, mengimport pakej baru dan beberapa fail yang disediakan untuk model data:

Pakej Import ': Flutter/Bahan.Dart '; Pakej Import ': INTL/INTL.Dart '; Import 'Model/Produk.Dart '; Import 'model/produk_repository.Dart '; 

Akhirnya, ubah suai _buildgridcards () untuk mendapatkan maklumat produk dan gunakan data ini dalam fail:

// Todo: Buat Koleksi Kad (102) // Gantikan keseluruhan senarai kaedah ini _BuildGridCards (konteks BuildContext) < Listproducts = ProductsRepository.loadProducts(Category.all); if (products.isEmpty) < return const []; > Tema Themedata Akhir = Tema.daripada (konteks); Formatter Formal Formatter = NumberFormat.SimpleCurrent (Tempatan: Premis.Tempatan (konteks).menjalin ()); Pulangan produk.Peta ((produk) < return Card( clipBehavior: Clip.antiAlias, // TODO: Adjust card heights (103) child: Column( // TODO: Center items on the card (103) crossAxisAlignment: CrossAxisAlignment.start, children: [ AspectRatio( aspectRatio: 18 / 11, child: Image.asset( product.assetName, package: product.assetPackage, // TODO: Adjust the box size (102) ), ), Expanded( child: Padding( padding: const EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0), child: Column( // TODO: Align labels to the bottom and center (103) crossAxisAlignment: CrossAxisAlignment.start, // TODO: Change innermost Column (103) children: [ // TODO: Handle overflowing labels (103) Text( product.name, style: theme.textTheme.titleLarge, maxLines: 1, ), const SizedBox(height: 8.0), Text( formatter.format(product.price), style: theme.textTheme.titleSmall, ), ], ), ), ), ], ), ); >))).Tolist (); > 

Perasan : Tunggu sebelum melancarkan kompilasi dan pelaksanaan. Masih ada pengubahsuaian untuk dibuat.

Untuk memformat teks, kami menggunakan data tema Themedata dari nilai BuildContext semasa.

Untuk mengetahui lebih lanjut mengenai pemformatan teks, rujuk artikel mengenai tipografi dalam arahan reka bentuk bahan. Untuk mengetahui lebih lanjut mengenai pemformatan dari tema, teruskan selepas bengkel pengaturcaraan ini dengan MDC-103: penggunaan tema reka bentuk bahan (warna, bentuk, ketinggian dan jenis).

Juga mengubahsuai fungsi binaan () untuk menghantar nilai BuildContext di _buildgridcards () sebelum melancarkan kompilasi:

// Todo: Tambahkan Paparan Grid (102) Badan: GridView.Count (Crossaxiscount: 2, Padding: Const Edgeinsts.Semua (16.0), Childaspectratio: 8.0/9.0, Kanak -kanak: _buildgridcards (konteks) // kod perubahan), 

Mulakan semula aplikasi panas.

Anda mungkin mendapati bahawa kami tidak menambah ruang menegak antara fail. Kerana mereka mempunyai empat margin di bahagian atas dan bawah.

Catat projek.

Data yang dihasilkan dipaparkan, tetapi imej dikelilingi oleh ruang yang tidak perlu. Secara lalai, imej ditarik dengan medan Boxfit ditakrifkan .Scaledown (dalam kes ini). Ganti nilai ini dengan .Fitwidth supaya dia dapat mengezum dan mengeluarkan ruang yang tidak perlu.

Tambahkan medan yang sesuai: Seperti nilai boxfit.Fitwidth:

 // Todo: Laraskan saiz kotak (102) sesuai: boxfit.fitwidth, 

Produk kami kini dipaparkan dengan sempurna dalam aplikasi.

7. Tahniah !

Aplikasi kami menawarkan operasi asas yang membolehkan pengguna pergi dari skrin sambungan ke skrin utama di mana produk dipaparkan. Beberapa baris kod sudah cukup untuk menambah bar aplikasi yang lebih tinggi (dengan tajuk dan tiga butang) dan fail (untuk membentangkan kandungan aplikasi kami). Skrin utama yang diperolehi adalah mudah dan berfungsi, dan mempunyai struktur asas dan kandungan yang boleh digunakan.

Versi lengkap aplikasi MDC-102 boleh didapati di cawangan 103-starter_and_102-lengkap .

Anda boleh membandingkan versi anda di halaman dengan aplikasi cawangan ini.

Langkah berikut

Dengan bar aplikasi, lembaran, medan teks dan butang yang terletak di bahagian atas halaman, kami kini telah menggunakan empat komponen utama Perpustakaan Bahan Bahan. Untuk mengetahui lebih lanjut, lihat katalog komponen bahan.

Walaupun aplikasi kami berfungsi dengan sempurna, ia tidak mencerminkan identiti jenama atau sudut pandang tertentu. Dalam bengkel MDC-103: penggunaan tema reka bentuk bahan (warna, bentuk, ketinggian dan jenis), kami akan memperibadikan gaya komponen ini untuk menyatakan jenama moden dan dinamik.

Kesedaran bengkel pengaturcaraan ini bertanya kepada saya untuk usaha masa dan yang munasabah

Benar -benar setuju

Tidak setuju, dan tidak setuju

tidak setuju sama sekali

Saya mahu terus menggunakan komponen bahan

Benar -benar setuju

Tidak setuju, dan tidak setuju

tidak setuju sama sekali

Melainkan dinyatakan sebaliknya, kandungan halaman ini ditadbir oleh lesen Tugasan Creative Commons 4.0, dan sampel kod ditadbir oleh lesen Apache 2.0. Untuk maklumat lanjut, lihat Peraturan Laman Pemaju Google. Java adalah tanda dagangan berdaftar Oracle dan/atau syarikat gabungannya.