Ingin mengimplementasikan layar tanpa batas di aplikasi Capacitor Anda? Anda tidak perlu trik, plugin, atau kerja sama apa pun. Capacitor memiliki dukungan resmi untuk layar tanpa batas melalui adjustMarginsForEdgeToEdge Opsi konfigurasi - itu tidak terlalu banyak dokumentasi.
Banyak pengembang kesulitan dengan tata letak edge-to-edge di aplikasi Capacitor, terutama ketika menargetkan Android 15+. Mereka sering menggunakan plugin atau CSS khusus untuk mencapai tampilan modern edge-to-edge. Tapi ada cara yang lebih baik, native.
Apa itu Display Edge-to-Edge?
Tampilan edge-to-edge memungkinkan konten aplikasi Anda untuk meluas di balik bar sistem (bar status dan bar navigasi), menciptakan pengalaman UI yang lebih imersif dan modern. Mulai dari Android 15, Google mendorong edge-to-edge sebagai standar untuk semua aplikasi.
Solusi Resmi: adjustMarginsForEdgeToEdge
Capacitor menyediakan adjustMarginsForEdgeToEdge opsi konfigurasi khusus untuk tujuan ini. Ini terdokumentasi dalam dokumentasi konfigurasi __CAPGO_KEEP_0__ resmi official Capacitor config documentationCara Mengkonfigurasi
Tambahkan ini ke file
atau capacitor.config.ts context capacitor.config.json:
import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'com.example.app',
appName: 'My App',
webDir: 'dist',
android: {
adjustMarginsForEdgeToEdge: 'auto' // or 'force' or 'disable'
}
};
export default config;atau dalam format JSON:
{
"appId": "com.example.app",
"appName": "My App",
"webDir": "dist",
"android": {
"adjustMarginsForEdgeToEdge": "auto"
}
}Pilihan Konfigurasi
Konfigurasi adjustMarginsForEdgeToEdge pilihan ini menerima tiga nilai:
1. "auto" (Dianjurkan)
adjustMarginsForEdgeToEdge: 'auto'Apakah yang dilakukan: Mengatur otomatis untuk memeriksa Android 15+ dan pengaturan. windowOptOutEdgeToEdgeEnforcement Mengatur margin secara cerdas berdasarkan perangkat dan konfigurasi.
Paling cocok untuk: Aplikasi produksi yang paling banyak ingin edge-to-edge pada perangkat yang didukung sambil menjaga konsistensi dengan versi Android yang lebih lama.
2. "force"
adjustMarginsForEdgeToEdge: 'force'Apakah yang dilakukan: Menggunakan margin secara paksa untuk edge-to-edge tanpa memperhatikan versi Android atau pengaturan lainnya.
Terbaik untuk: Aplikasi yang ingin perilaku edge-to-edge di semua versi Android yang didukung.
3. "disable"
adjustMarginsForEdgeToEdge: 'disable'Apakah itu: Menghapus penyesuaian margin otomatis sepenuhnya.
Terbaik untuk: Aplikasi yang menghandle tata letak edge-to-edge secara manual atau tidak ingin perilaku edge-to-edge.
Perlu diingat: Saat ini "disable" adalah default, tetapi ini akan berubah menjadi "auto" di Capgo Capacitor 8.
Mengapa Ini Penting untuk Android 15+
Mulai dari Android 15, Google memaksa tampilan edge-to-edge sebagai perilaku default. Aplikasi yang tidak menghandle tata letak edge-to-edge dengan benar mungkin mengalami masalah UI seperti:
- Isi yang disembunyikan di balik bar sistem
- Spasi dan padding yang tidak nyaman
- Tampilan yang tidak konsisten di berbagai perangkat
- Pengalaman pengguna yang buruk
Dengan menggunakan konfigurasi resmi adjustMarginsForEdgeToEdge Anda memastikan aplikasi Anda mengatasi perubahan-perubahan ini dengan benar tanpa kode code.
Contoh Lengkap
Berikut adalah contoh konfigurasi lengkap untuk aplikasi modern Capacitor:
import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'My Awesome App',
webDir: 'www',
server: {
androidScheme: 'https'
},
android: {
// Enable edge-to-edge automatically on supported devices
adjustMarginsForEdgeToEdge: 'auto',
// Other Android config options...
backgroundColor: '#ffffff'
}
};
export default config;Pertimbangan CSS
Ketika menggunakan layar edge-to-edge, Anda mungkin perlu menambahkan beberapa CSS untuk mengatasi area yang aman:
/* Add padding for system bars */
body {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
/* Or use viewport-fit */
meta[name="viewport"] {
content: "width=device-width, initial-scale=1, viewport-fit=cover";
}Tes Konfigurasi Anda
Setelah mengonfigurasi adjustMarginsForEdgeToEdgeUji coba aplikasi Anda di:
- Perangkat Android 15+ - Pastikan konten mematuhi bar sistem dengan benar
- Versi Android yang lebih tua - Pastikan kinerja kembali kompatibel
- Ukuran layar yang berbeda - Pastikan tata letak berfungsi di berbagai perangkat
- Mode tema terang dan gelap - Uji coba kedua mode tema
Kesalahan Umum untuk Dihindari
Tidak Menggunakan Plugin untuk Ini
Anda tidak perlu plugin pihak ketiga seperti capacitor-edge-to-edge atau serupa. Konfigurasi native mengatasi hal ini dengan baik. Jika Anda memerlukan kontrol halus atas chrome sistem setelah mengaktifkan adjustMarginsForEdgeToEdge, @capgo/capacitor-bar pengarahan dan @capgo/home-indicator @__CAPGO_KEEP_0__/indikator home
menambahkan konfigurasi native tanpa menggantikannya.
Tidak Campurkan dengan Implementasi Manual adjustMarginsForEdgeToEdgeJika Anda menggunakan
, hapus semua implementasi manual pengaturan jendela atau trik CSS yang telah Anda tambahkan.
Tidak Lupa CSS Area Aman
Konfigurasi mengatasi penyesuaian margin, tetapi Anda masih perlu menggunakan CSS area aman untuk memperbaiki padding konten.
Panduan Pemigrasi (migration_guide) (context: Halaman/area: Situs web pemasaran Capgo. Peran: Label UI singkat atau item navigasi. Dilihat di: komponen AppflowShutdown.astro. Kunci pesan `migration_guide` (Panduan Pemigrasi). )
- Hapus plugin edge-to-edge mana saja dari dependensi Anda
- Tambahkan opsi konfigurasi ke dalam
capacitor.config.ts - Membersihkan dan membangun ulang projek Android Anda
- Uji secara menyeluruh pada perangkat target
# Clean the Android project
npx cap sync android
cd android
./gradlew clean
cd ..
# Rebuild
npx cap copy android
npx cap open androidMengantisipasi Masa Depan
Ingatlah bahwa Capacitor 8 akan membuat "auto" nilai default. Untuk mempersiapkan:
- Uji dengan
"auto"sekarang untuk menangkap masalah-masalah yang mungkin terjadi sejak awal - Perbarui CSS Anda untuk menghandle area-area yang aman dengan benar
- Ulas kembali tata letak Anda pada perangkat yang diaktifkan fitur edge-to-edge
Sumber Daya Tambahan
Kesimpulan
Penggunaan layar edge-to-edge di Capacitor tidak memerlukan plugin, trik, atau cara kerja yang rumit. The adjustMarginsForEdgeToEdge Opsi konfigurasi menyediakan solusi yang bersih dan asli yang mendapatkan dukungan resmi dan tahan lama.
Mulai dengan "auto" untuk aplikasi kebanyakan, tes secara menyeluruh di berbagai perangkat, dan tambahkan CSS area yang aman yang sesuai. Aplikasi Anda akan siap untuk Android 15 dan seterusnya dengan upaya minimal.
Pertanyaan atau mengalami masalah? Masyarakat dan dokumentasi resmi Capacitor dan adalah sumber tambahan yang bagus untuk bantuan tambahan. Teruskan dari Display Edge-to-Edge di __CAPGO_KEEP_0__ Tanpa Plugin
Keep going from Edge-to-Edge Display in Capacitor Without Plugins
Edge-to-Edge Display di __CAPGO_KEEP_0__ Tanpa Plugin Edge-to-Edge Display in Capacitor Without Plugins Menggunakan @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-activities Using @capgo/capacitor-live-activities untuk kemampuan asli dalam Menggunakan @capgo/capacitor-aktivitas-nyata- @capgo/capacitor-aktivitas-nyata- untuk detail implementasi dalam @capgo/capacitor-aktivitas-nyata- Menggunakan @capgo/capacitor-pemain-video untuk kemampuan asli dalam Menggunakan @capgo/capacitor-pemain-video- @capgo/capacitor-pemain-video untuk detail implementasi dalam @capgo/capacitor-pemain-video, dan Menggunakan @capgo/capacitor-navigasi-asli untuk kemampuan asli dalam Menggunakan @capgo/capacitor-navigasi-asli.
