Flottant TwoPane, widget

Important

Les fonctionnalités et l’aide décrites dans cet article sont en préversion publique et peuvent faire l’objet de modifications importantes avant leur lancement en disponibilité générale. Microsoft ne donne aucune garantie, expresse ou implicite, concernant les informations fournies ici.

Cette disposition comporte deux widgets enfants, qui peuvent être affichés côte à côte, au-dessus et au-dessous, ou un widget unique peut être classé par ordre de priorité. La taille relative des deux widgets peut être ajustée proportionnellement. et sur les appareils à deux écrans, la limite s’aligne sur la zone de charnière.

Rendu à deux écrans

Lorsque l’application est fractionnée sur surface Duo, chaque widget remplit l’intégralité de l’écran :

Flottant TwoPaneView sur surface Duo

Rendu multiplateforme

Lorsque l’application est rendue sur des écrans plus grands tels qu’une tablette, une application de bureau ou une page Web, les widgets sont affichés, mais leur taille est définie proportionnellement :

Flottant TwoPaneView sur le Bureau

API TwoPane

class TwoPane extends StatelessWidget {
  Widget pane1;
  Widget pane2;
  double paneProportion;
  TwoPanePriority panePriority;
  Axis direction;
  TextDirection? textDirection;
  VerticalDirection verticalDirection;
}

Propriétés de TwoPane :

  • pane1 -Premier volet, qui peut se trouver sur la gauche pour les dispositions de gauche à droite, ou en haut pour les mises en page de haut en bas. Si panePriority est pane1 , il s’agit du seul volet visible.
  • pane2 -Second volet, qui peut se trouver à droite pour les dispositions de gauche à droite ou en bas pour les mises en page de haut en bas. Si panePriority est pane2 , il s’agit du seul volet visible.
  • paneProportion : Proportion de l’écran occupée par le premier volet. Le deuxième volet prend le contrôle sur le reste de l’espace. La valeur 0,5 rend les deux volets égaux. Cette propriété est ignorée pour les affichages avec une charnière, auquel cas chaque volet prend le contrôle d’un seul écran.
  • panePriority : Indique s’il faut afficher un seul volet et les deux. Cela est utile pour définir le comportement sur les appareils étroits, où les deux volets ne peuvent pas être affichés en même temps. Cette propriété est ignorée pour les affichages avec charnière, auquel cas les both volets sont visibles.
  • direction -Indique que la disposition est verticale ou horizontale, similaire à la direction. Cette propriété est ignorée pour les affichages avec charnière, auquel cas la direction correspond horizontal aux charnières verticales et vertical aux charnières horizontales.
  • textDirection -Lorsque les volets sont disposés horizontalement, cela détermine celui qui se trouve sur la gauche. Se comporte de la même façon que Flex textDirection
  • verticalDirection -Lorsque les volets sont disposés verticalement, cela détermine celui qui se trouve en haut. Se comporte de la même façon que Flex verticalDirection

Exemple

Widget build(BuildContext context) {
  return TwoPane(
    pane1: _widgetA(),
    pane2: _widgetB(),
    paneProportion: 0.3,
    panePriority: MediaQuery.of(context).size.width > 500 ? TwoPanePriority.both :TwoPanePriority.pane1,
  );
}

Cet exemple de code produit les résultats au début de cet article :

  • Sur surface Duo, les widgets A et B prennent tous deux un écran. Flottant TwoPaneView sur surface Duo
  • Sur une tablette ou un Bureau, le widget a occupe 30% de l’écran tandis que le widget B prend les 70% restants. Flottant TwoPaneView sur le Bureau
  • Sur un petit téléphone dont la largeur est inférieure à 500 pixels logiques, seul le widget a est visible. Flottant TwoPaneView sur un téléphone