Nota
Capaian ke halaman ini memerlukan kebenaran. Anda boleh cuba mendaftar masuk atau menukar direktori.
Capaian ke halaman ini memerlukan kebenaran. Anda boleh cuba menukar direktori.
Sebelum anda membina aplikasi kanvas dalam Power Apps, tentukan sama ada untuk menyesuaikan aplikasi untuk telefon atau tablet. Pilihan ini menentukan saiz dan bentuk kanvas yang anda bina apl anda.
Selepas anda membuat pilihan tersebut, anda boleh membuat beberapa pilihan lagi jika anda memilih Paparan Tetapan>. Anda boleh memilih orientasi potret atau landskap dan saiz skrin (tablet sahaja). Anda juga boleh mengunci atau membuka kunci nisbah aspek dan penggiliran peranti sokongan (atau tidak).
Pilihan tersebut menjadi asas kepada setiap pilihan lain yang anda buat apabila anda reka bentuk tataletak skrin. Jika aplikasi anda berjalan pada peranti yang mempunyai saiz berbeza atau pada web, tataletak keseluruhan anda dibesarkan untuk memenuhi skrin aplikasi yang sedang berjalan. Jika aplikasi yang direka untuk telefon berjalan dalam tetingkap pelayar besar, contohnya, aplikasi membesarkan untuk mengimbangi dan kelihatan terlalu besar untuk ruang tersebut. Aplikasi tidak mendapat manfaat daripada piksel tambahan dengan menunjukkan lebih banyak kawalan atau lebih kandungan.
Jika anda mencipta tataletak responsif, kawalan boleh memberi respons kepada peranti atau saiz tetingkap yang berbeza, menjadikan pelbagai pengalaman terasa lebih semula jadi. Untuk mencapai reka letak responsif, anda melaraskan beberapa tetapan dan menulis ungkapan di seluruh apl anda.
Nyahdaya Skala untuk sesuaikan
Anda boleh mengkonfigurasi setiap kawalan skrin supaya reka letaknya menyesuaikan diri dengan ruang sebenar di mana apl sedang berjalan.
Anda mengaktifkan responsif dengan mematikan tetapan Skala agar sesuai apl, yang dihidupkan secara lalai. Apabila anda menyahaktifkan tetapan ini, anda juga menyahaktifkan Kunci nisbah aspek kerana anda tidak lagi mereka bentuk untuk bentuk skrin tertentu. (Anda masih boleh menentukan sama ada aplikasi anda menyokong penggiliran peranti.)
Untuk menjadikan aplikasi anda responsif, anda mesti mengambil langkah tambahan tetapi perubahan ini ialah langkah pertama ke arah membolehkan responsif berlaku.
Fahami dimensi skrin apl dan peranti
Untuk menjadikan reka letak apl anda bertindak balas terhadap perubahan dalam dimensi skrin peranti atau penyemak imbas web, anda akan menulis formula yang menggunakan sifat Lebar dan Ketinggian skrin. Untuk menunjukkan sifat ini, buka aplikasi dalam Power Apps Studio dan kemudian pilih kawalan skrin. Formula lalai untuk sifat ini muncul pada tab Lanjutan anak tetingkap sebelah kanan.
Lebar = Max(App.Width, App.MinScreenWidth)
Ketinggian = Max(App.Height, App.MinScreenHeight)
Formula ini merujuk kepada sifat Width, Height, MinScreenWidth dan MinScreenHeight apl. Sifat Lebar dan Ketinggian apl sepadan dengan dimensi peranti atau tetingkap penyemak imbas yang dijalankan oleh apl anda. Jika pengguna mengubah saiz tetingkap penyemak imbas (atau memutarkan peranti jika anda telah menyahaktifkan orientasi Kunci), nilai sifat ini berubah secara dinamik. Formula dalam sifat Lebar dan Tinggi kawalan skrin dinilai semula apabila nilai ini berubah.
Nilai dalam sifat App.Width dan App.Height datang daripada dimensi yang anda tentukan dalam anak tetingkap PaparanTetapan. Contohnya, jika anda memilih saiz landskap "16:9 Lalai", App.Width ialah 1366 dan App.Height ialah 768.
Memandangkan ia digunakan dalam formula untuk sifat Lebar dan Ketinggian kawalan skrin, MinScreenWidth dan MinScreenHeight ialah dimensi minimum yang anda akan mereka bentuk apl. Jika kawasan sebenar yang tersedia untuk apl anda adalah lebih kecil daripada dimensi minimum ini, formula untuk sifat Lebar dan Ketinggian kawalan skrin memastikan nilainya tidak akan menjadi lebih kecil daripada minimum. Dalam kes itu, pengguna mesti menatal untuk melihat semua kandungan reka letak. Sifat MinScreenWidth dan MinScreenHeight boleh ditetapkan dalamSifat Objek>Apl>Lanjutan.
Selepas anda menetapkan MinScreenWidth dan MinScreenHeight apl anda, anda tidak perlu (dalam kebanyakan kes) menukar formula lalai untuk sifat Lebar dan Ketinggian setiap kawalan skrin. Kemudian, topik ini membincangkan kes di mana anda mungkin mahu menyesuaikan formula ini.
Gunakan formula untuk tataletak dinamik
Untuk mencipta reka bentuk responsif, anda dapat mencari dan mengubah saiz setiap kawalan dengan menggunakan formula dan bukannya nilai koordinat mutlak (malar). Formula ini menyatakan kedudukan dan saiz setiap kawalan dari segi saiz skrin keseluruhan atau berbanding kawalan lain dalam skrin semasa.
Penting
Selepas anda menulis formula untuk sifat X, Y, Lebar dan Ketinggian kawalan, formula anda akan ditulis ganti dengan nilai malar jika anda kemudiannya menyeret kawalan dalam editor kanvas. Apabila anda mula menggunakan formula untuk mencapai tataletak dinamik, anda patut mengelakkan menyeret kawalan.
Dalam kes yang paling mudah, satu kawalan mengisi keseluruhan skrin. Untuk mencipta kesan ini, tetapkan sifat kawalan kepada nilai ini:
| Sifat | Nilai |
|---|---|
| X | 0 |
| Y | 0 |
| Lebar | Parent.Width |
| Ketinggian | Parent.Height |
Formula ini menggunakan operator Induk . Untuk sebarang kawalan yang diletakkan terus pada skrin, Ibu Bapa merujuk kepada skrin. Dengan nilai sifat ini, kawalan muncul di penjuru kiri sebelah atas skrin (0, 0) dan mempunyai Lebar dan Ketinggian yang sama seperti skrin.
Kemudian dalam topik ini, anda akan menggunakan prinsip ini (dan pengendali Induk ) untuk meletakkan kawalan di dalam bekas lain, seperti galeri, kawalan kumpulan dan komponen.
Sebagai alternatif, kawalan boleh mengisi hanya separuh bahagian atas skrin. Untuk mencipta kesan ini, tetapkan sifat Height kepada Parent.Height / 2 dan biarkan formula lain tidak berubah.
Jika anda mahu kawalan kedua untuk mengisi separuh bahagian bawah skrin yang sama, anda boleh mengambil sekurang-kurangnya dua pendekatan lain untuk membina formulanya. Untuk kesederhanaan, anda mungkin mengambil pendekatan ini:
| Kawalan | Sifat | Formula |
|---|---|---|
| Bahagian atas | X | 0 |
| Bahagian atas | Y | 0 |
| Bahagian atas | Lebar | Parent.Width |
| Bahagian atas | Ketinggian | Parent.Height / 2 |
| Rendah | X | 0 |
| Rendah | Y | Parent.Height / 2 |
| Rendah | Lebar | Parent.Width |
| Rendah | Ketinggian | Parent.Height / 2 |
Konfigurasi ini akan mencapai kesan yang anda mahu, tetapi anda perlu mengedit setiap formula jika anda mengubah fikiran anda mengenai saiz relatif kawalan. Sebagai contoh, anda mungkin memutuskan bahawa kawalan bahagian atas mesti menduduki hanya satu pertiga daripada skrin, dengan kawalan bahagian bawah mengisi dua pertiga yang lebih rendah.
Untuk mencipta kesan tersebut, anda perlu mengemas kini sifat Ketinggian kawalan Atas dan sifat Y dan Ketinggian kawalan Bawah . Sebaliknya, pertimbangkan untuk menulis formula untuk kawalan Bawah dari segi kawalan Atas (dan dirinya sendiri), seperti dalam contoh ini:
| Kawalan | Sifat | Formula |
|---|---|---|
| Bahagian atas | X | 0 |
| Bahagian atas | Y | 0 |
| Bahagian atas | Lebar | Parent.Width |
| Bahagian atas | Ketinggian | Parent.Height / 3 |
| Rendah | X | 0 |
| Rendah | Y | Upper.Y + Upper.Height |
| Rendah | Lebar | Parent.Width |
| Rendah | Ketinggian | Parent.Height - Lower.Y |
Dengan formula ini, anda hanya perlu menukar sifat Ketinggian kawalan Atas untuk menyatakan pecahan ketinggian skrin yang berbeza. Kawalan Bawah bergerak dan mengubah saiz secara automatik untuk mengambil kira perubahan.
Anda boleh menggunakan corak formula ini untuk menyatakan hubungan reka letak biasa antara kawalan, bernama C, dan induknya atau kawalan adik-beradik, bernama D.
| Hubungan antara C dan induknya | Sifat | Formula | Ilustrasi |
|---|---|---|---|
| C mengisi lebar induk, dengan margin N | X | N |
|
| Lebar | Parent.Width - (N * 2) |
||
| C mengisi ketinggian induk, dengan jidar N | Y | N |
|
| Ketinggian | Parent.Height - (N * 2) |
||
| C diselaraskan dengan tepi kanan induk, dengan jidar N | X | Parent.Width - (C.Width + N) |
|
| C diselaraskan dengan tepi bawah induk, dengan jidar N | Y | Parent.Height - (C.Height + N) |
|
| C berpusat secara mendatar pada induk | X | (Parent.Width - C.Width) / 2 |
|
| C berpusat secara menegak pada induk | Y | (Parent.Height - C.Height) / 2 |
|
| Hubungan antara C dan D | Sifat | Formula | Ilustrasi |
|---|---|---|---|
| C dijajarkan secara mendatar dengan D dan lebar yang sama dengan D | X | D.X |
|
| Lebar | D.Width |
||
| C dijajarkan secara menegak dengan D dan ketinggian yang sama dengan D | Y | D.Y |
|
| Ketinggian | D.Height |
||
| Tepi kanan C dijajarkan dengan tepi kanan D | X | D.X + D.Width - C.Width |
|
| Tepi bawah C dijajarkan dengan tepi bawah D | Y | D.Y + D.Height - C.Height |
|
| C berpusat secara mendatar berbanding dengan D | X | D.X + (D.Width - C.Width) / 2 |
|
| C berpusat secara menegak berbanding D | Y | D.Y + (D.Height - C.Height) /2 |
|
| C diletak di sebelah kanan D dengan jurang N | X | D.X + D.Width + N |
|
| C diletakkan di bawah D dengan jurang N | Y | D.Y + D.Height + N |
|
| C mengisi ruang antara D dan tepi kanan induk | X | D.X + D.Width |
|
| Lebar | Parent.Width - C.X |
||
| C mengisi ruang antara D dan tepi bawah induk | Y | D.Y + D.Height |
|
| Ketinggian | Parent.Height - C.Y |
Tanda hierarki
Apabila anda membina skrin yang mengandungi lebih banyak kawalan, ia akan menjadi lebih mudah (atau malah diperlukan) untuk kedudukan kawalan relatif kepada kawalan induk, berbanding relatif kepada skrin atau kawalan adik-beradik. Dengan mengaturkan kawalan anda ke dalam struktur hierarki, anda boleh menjadikan formula anda lebih mudah untuk ditulis dan dikekalkan.
Galeri
Jika anda menggunakan galeri dalam aplikasi anda, anda perlu meletakkan kawalan dalam templat galeri tersebut. Anda boleh meletakkan kawalan ini dengan menulis formula yang menggunakan pengendali Induk , yang akan merujuk kepada templat galeri. Dalam formula tentang kawalan dalam templat galeri, gunakan Parent.TemplateHeight dan Parent.TemplateWidth sifat; jangan gunakan Parent.Width dan Parent.Height, yang merujuk kepada saiz keseluruhan galeri.
Kawalan bekas
Anda boleh menggunakan bekas reka letak kawalan, sebagai kawalan ibu bapa.
Pertimbangkan contoh pengepala di bahagian atas skrin. Perkara biasa apabila melihat pengepala dengan tajuk dan beberapa ikon yang pengguna anda boleh berinteraksi. Anda boleh membina pengepala sedemikian menggunakan Kawalan Bekas, yang mengandungi Kawalan Label dan dua Ikon kawalan:
Tetapkan sifat untuk kawalan ini kepada nilai ini:
| Sifat | Pengepala | Menu | Tutup | Gelaran |
|---|---|---|---|---|
| X | 0 |
0 |
Parent.Width - Close.Width |
Menu.X + Menu.Width |
| Y | 0 |
0 |
0 |
0 |
| Lebar | Parent.Width |
Parent.Height |
Parent.Height |
Close.X - Title.X |
| Ketinggian | 64 |
Parent.Height |
Parent.Height |
Parent.Height |
Untuk kawalan Header , Parent merujuk kepada skrin. Bagi yang lain, Parent merujuk kepada kawalan Header.
Setelah menulis formula ini, anda boleh melaraskan saiz atau kedudukan kawalan Header dengan menukar formula untuk sifatnya. Saiz dan kedudukan kawalan anak akan dilaraskan secara automatik sewajarnya.
Kawalan bekas tataletak automatik
Anda boleh menggunakan ciri, Auto-reka letak kawalan bekas untuk menyusun komponen anak secara automatik. Bekas ini menentukan kedudukan komponen anak supaya anda tidak perlu menetapkan X, Y untuk komponen dalam bekas. Juga, ia boleh mengedarkan ruang yang tersedia kepada komponen anak berdasarkan tetapan serta menentukan penjajaran menegak dan mendatar komponen anak. Maklumat lanjut: Kawalan bekas reka letak automatik
Komponen
Jika anda menggunakan ciri lain, bernama Komponen, anda boleh membina blok binaan dan menggunakannya semula di seluruh apl anda. Seperti Kawalan Bekas, kawalan yang anda letakkan dalam komponen harus mendasarkan formula kedudukan dan saiznya pada Parent.Width dan Parent.Height, yang merujuk kepada saiz komponen. Maklumat lanjut: Buat komponen.
Menyesuaikan tataletak untuk saiz dan orientasi peranti
Setakat ini, anda telah belajar cara menggunakan formula untuk mengubah setiap saiz kawalan sebagai respons kepada ruang sedia ada, serta menyimpan kawalan secara selari antara satu sama lain. Tetapi anda mungkin mahu atau perlu membuat perubahan tataletak yang lebih banyak sebagai respons kepada saiz dan orientasi peranti yang berbeza. Apabila peranti diputar daripada potret ke orientasi landskap, sebagai contoh, anda mungkin mahu bertukar daripada tataletak menegak kepada mendatar. Pada peranti yang lebih besar, anda boleh menunjukkan lebih banyak kandungan atau susun semula untuk memberikan tataletak yang lebih menarik. Pada peranti yang lebih kecil, anda mungkin perlu memecah kandungan merentasi berbilang skrin.
Orientasi peranti
Formula lalai untuk sifat Lebar dan Ketinggian skrin, seperti yang diterangkan sebelum ini topik ini, tidak semestinya memberikan pengalaman yang baik jika pengguna memutarkan peranti. Contohnya, apl yang direka untuk telefon dalam orientasi potret mempunyai Lebar Reka Bentuk 640 dan DesignHeight sebanyak 1136. Aplikasi yang sama pada telefon dalam orientasi landskap akan mempunyai nilai hartanah ini:
- Sifat Lebar skrin ditetapkan kepada
Max(App.Width, App.DesignWidth). Apl Lebar (1136) lebih besar daripada DesignWidth (640), jadi formula menilai kepada 1136. - Sifat Ketinggian skrin ditetapkan kepada
Max(App.Height, App.DesignHeight). Ketinggian (640) apl lebih kecil daripada DesignHeight (1136), jadi formula menilai kepada 1136.
Dengan skrin Ketinggian 1136 dan ketinggian peranti (dalam orientasi ini) 640, pengguna mesti menatal skrin secara menegak untuk menunjukkan semua kandungannya, yang mungkin bukan pengalaman yang anda inginkan.
Untuk menyesuaikan Lebar dan Ketinggian sifat skrin kepada orientasi peranti, anda boleh menggunakan formula ini:
Lebar = Max(App.Width, If(App.Width < App.Height, App.DesignWidth, App.DesignHeight))
Ketinggian = Max(App.Height, If(App.Width < App.Height, App.DesignHeight, App.DesignWidth))
Formula ini menukar nilai DesignWidth dan DesignHeight apl, berdasarkan sama ada lebar peranti kurang daripada ketinggiannya (orientasi potret) atau lebih daripada ketinggiannya (orientasi landskap).
Selepas anda melaraskan formula Lebar dan Ketinggian skrin, anda juga mungkin mahu menyusun semula kawalan dalam skrin anda untuk menggunakan ruang yang tersedia dengan lebih baik. Sebagai contoh, jika setiap daripada dua kawalan menduduki separuh skrin, anda mungkin menindannya secara menegak dalam potret tetapi menyusunnya secara sebelah-menyebelah dalam landskap.
Anda boleh menggunakan sifat Orientasi skrin untuk menentukan sama ada skrin diorientasikan secara menegak atau mendatar.
Nota
Dalam orientasi landskap, kawalan Atas dan Bawah terlihat sebagai kawalan kiri dan kanan.
| Kawalan | Sifat | Formula |
|---|---|---|
| Bahagian atas | X | 0 |
| Bahagian atas | Y | 0 |
| Bahagian atas | Lebar | If(Parent.Orientation = Layout.Vertical, Parent.Width, Parent.Width / 2) |
| Bahagian atas | Ketinggian | If(Parent.Orientation = Layout.Vertical, Parent.Height / 2, Parent.Height) |
| Rendah | X | If(Parent.Orientation = Layout.Vertical, 0, Upper.X + Upper.Width) |
| Rendah | Y | If(Parent.Orientation = Layout.Vertical, Upper.Y + Upper.Height, 0) |
| Rendah | Lebar | Parent.Width - Lower.X |
| Rendah | Ketinggian | Parent.Height - Lower.Y |
Saiz dan titik pisah skrin
Anda boleh sesuaikan tataletak anda berdasarkan saiz peranti. Skrin Saiz harta mengklasifikasikan saiz peranti semasa. Saiznya ialah integer positif; jenis ScreenSize menyediakan pemalar bernama untuk membantu kebolehbacaan. Jadual ini menyenaraikan pemalar:
| Pemalar | Nilai | Jenis peranti biasa (menggunakan tetapan aplikasi lalai) |
|---|---|---|
| ScreenSize.Small | 1 | Nombor Telefon |
| ScreenSize.Medium | 2 | Tablet, dipegang secara menegak |
| ScreenSize.Large | 3 | Tablet, dipegang secara melintang |
| ScreenSize.ExtraLarge | 4 | Komputer desktop |
Gunakan saiz ini untuk membuat keputusan tentang tataletak aplikasi anda. Contohnya, jika anda mahu kawalan disembunyikan pada peranti bersaiz telefon tetapi boleh dilihat sebaliknya, anda boleh menetapkan kawalan Kelihatan harta kepada formula ini:
Parent.Size >= ScreenSize.Medium
Formula ini menilai kepada benar apabila saiznya sederhana atau lebih besar dan palsu sebaliknya.
Jika anda mahu kawalan untuk menduduki pecahan berbeza daripada lebar skrin berdasarkan saiz skrin, tetapkan kawalan Lebar harta kepada formula ini:
Parent.Width *
Switch(
Parent.Size,
ScreenSize.Small, 0.5,
ScreenSize.Medium, 0.3,
0.25
)
Formula ini menetapkan lebar kawalan kepada separuh lebar skrin pada skrin kecil, tiga titik lebar skrin pada skrin sederhana, dan satu perempat daripada lebar skrin pada semua skrin lain.
Titik pisah tersuai
Skrin Saiz harta dikira dengan membandingkan skrin Lebar harta kepada nilai dalam apl SaizBreakpoints harta benda. Sifat ini ialah jadual nombor lajur tunggal yang menunjukkan titik pisah lebar yang memisahkan saiz skrin bernama:
Dalam apl yang dibuat untuk tablet atau web, nilai lalai dalam apl itu SaizBreakpoints harta adalah [600, 900, 1200]. Dalam apl yang dibuat untuk telefon, nilainya ialah [1200, 1800, 2400]. (Nilai untuk aplikasi telefon adalah dua kali ganda kerana aplikasi menggunakan koordinat yang secara berkesan menggandakan koordinat yang digunakan dalam aplikasi lain.)
Anda boleh menyesuaikan titik putus apl anda dengan menukar nilai dalam apl SaizBreakpoints harta benda. Pilih Apl dalam paparan pokok, pilih SaizBreakpoints dalam senarai harta, dan kemudian edit nilai dalam bar formula. Anda boleh mencipta seberapa banyak titik pisah mengikut keperluan aplikasi anda, tetapi hanya saiz 1 hingga 4 sesuai dengan saiz skrin yang dinamakan. Dalam formula, anda boleh merujuk kepada saiz melebihi ExtraLarge dengan nilai angka (5, 6, dan sebagainya).
Anda juga boleh menentukan sedikit titik pisah. Contohnya, aplikasi anda mungkin memerlukan tiga saiz (dua titik pisah), jadi saiz skrin mungkin akan menjadi kecil, sederhana dan besar.
Batasan diketahui
Kanvas pengarangan tidak memberi respons kepada formula pensaizan yang dicipta. Untuk menguji kelakuan responsif, simpan dan terbitkan aplikasi anda, kemudian buka pada peranti atau dalam tetingkap pelayar bagi pelbagai saiz dan orientasi.
Jika anda menulis ungkapan atau formula dalam X, Y, Lebar, dan Ketinggian sifat kawalan, anda akan menimpa ungkapan atau formula tersebut jika anda kemudian menyeret kawalan ke lokasi lain atau mengubah saiz kawalan dengan menyeret sempadannya.