Scaffold
Structure d'écran
Équivalent natif d'Engine\Scaffold — le widget racine d'un écran. Il réserve un espace en haut/bas du corps défilant pour que le contenu ne passe pas sous l'AppBar/BottomNavigation, puis peint ces éléments (plus un Fab et un Drawer optionnels) via Fixed pour qu'ils restent épinglés au viewport pendant que le corps défile en dessous. $viewportHeight — et non la hauteur, potentiellement plus grande, du contenu mis en page — est ce qui épingle la barre du bas/le Fab au véritable bas d'écran ; c'est le même ?height= que NativeRenderPocActivity envoie déjà à chaque requête.
Exemple
<?php
use Engine\Native\Scaffold;
use Engine\Native\AppBar;
use Engine\Native\BottomNavigation;
use Engine\Native\Fab;
use Engine\Native\Drawer;
use Engine\Native\Center;
use Engine\Native\Text;
use Engine\Native\Tokens;
$screenWidth = (float) ($_GET['width'] ?? 360);
$viewportHeight = (float) ($_GET['height'] ?? 720);
$scaffold = new Scaffold(
body: new Center(new Text('Contenu de l\'écran', Tokens::TEXT_BODY, Tokens::ink()->toHex())),
screenWidth: $screenWidth,
viewportHeight: $viewportHeight,
appBar: new AppBar($screenWidth, 'Accueil'),
bottomNav: new BottomNavigation($screenWidth, [
['icon' => 'home', 'label' => 'Accueil', 'screen' => 'home'],
['icon' => 'settings', 'label' => 'Réglages', 'screen' => 'settings'],
], currentScreen: 'home'),
fab: new Fab('add', 'navigate:new_item'),
drawer: ($_GET['drawer_open'] ?? '') !== '' ? new Drawer($screenWidth, $viewportHeight, [
['label' => 'Profil', 'icon' => 'person', 'action' => 'navigate:profile'],
]) : null,
);Un écran complet avec AppBar, navigation basse à deux onglets, bouton d'action flottant, et un tiroir affiché uniquement si $_GET['drawer_open'] est renseigné.
Constructeur
| Paramètre | Type | Défaut | Description |
|---|---|---|---|
| body | Widget | — | Contenu défilant de l'écran, entouré du padding réservé à l'AppBar/BottomNavigation. |
| screenWidth | float | — | Largeur de l'écran, propagée à l'AppBar/BottomNavigation/Drawer. |
| viewportHeight | float | — | Hauteur visible du viewport, utilisée pour épingler la barre du bas et le Fab au vrai bas d'écran. |
| appBar | ?AppBar | null | Barre supérieure épinglée, si présente. |
| bottomNav | ?BottomNavigation | null | Navigation inférieure épinglée, si présente. |
| fab | ?Fab | null | Bouton d'action flottant, positionné au-dessus de la navigation basse si elle existe. |
| drawer | ?Drawer | null | Tiroir latéral, peint en dernier et donc au-dessus de tout le reste (AppBar/BottomNavigation/Fab inclus). |
À savoir. Le padding réservé au corps ne s'ajuste qu'en fonction de la présence de l'AppBar (
AppBar::HEIGHT) et de la BottomNavigation (BottomNavigation::HEIGHT) — le Fab et le Drawer, eux, n'affectent jamais le padding du corps puisqu'ils sont peints en position fixe par-dessus.