Flatter TwoPane-Widget

Dieses Layout verfügt über zwei untergeordnete Bereiche, die nebeneinander, oben und unten angezeigt werden können, oder ein einzelner Bereich kann priorisiert werden. Die relative Größe der beiden Bereichswidgets kann proportional angepasst werden, und auf Dual-Screen-Geräten wird die Grenze am Scharnierbereich angedockt.

Installieren von

Damit Ihr Projekt von dual_screen abhängig ist, dem Paket, das TwoPaneenthält, können Sie folgendes ausführen:

flutter pub add dual_screen

Dadurch wird der Datei "pubspec.yaml " Ihres Pakets eine Zeile wie diese hinzugefügt (und eine implizite flutter pub getausführung):

dependencies:
  dual_screen: ^1.0.2+2

Wenn Sie die Abhängigkeit manuell zu "pubspec.yaml" hinzugefügt haben, müssen Sie auch ausführen flutter pub get.

Sie können nun mit der Verwendung des TwoPane Widgets in Ihren dart-Dateien beginnen, wo Sie auch die Abhängigkeit importieren müssen:

import 'package:dual_screen/dual_screen.dart';

Rendern von faltbaren Geräten

Wenn die App auf Surface Duo überspannt ist, füllt jedes Widget einen gesamten Bildschirm aus:

Plattformübergreifendes Rendering

Wenn die App auf größeren Bildschirmen wie einem Tablet, einer Desktop-App oder einer Webseite gerendert wird, werden die Bereiche angezeigt, aber ihre Größe ist proportional festgelegt:

TwoPane-API

class TwoPane {
  const TwoPane({
    Widget startPane,
    Widget endPane,
    double paneProportion,
    TwoPanePriority panePriority,
    Axis direction,
    TextDirection? textDirection,
    VerticalDirection verticalDirection,
    EdgeInsets padding,
  });
}

Eigenschaften des TwoPane Widgets:

• startPane – Startbereich, der sich für Layouts von links nach rechts oder oben für Layouts von oben nach unten befinden kann. Wenn panePriority ist start und kein Scharnier vorhanden ist, ist dies der einzige sichtbare Bereich.
• endPane - Endbereich, der sich bei Layouts von links nach rechts oder bei Layouts von oben nach unten befinden kann. Wenn panePriority ist endund kein Scharnier vorhanden ist, ist dies der einzige sichtbare Bereich.
• paneProportion - Anteil des Bildschirms, der vom Startbereich belegt ist. Der Endbereich übernimmt den Rest des Raums. Durch den Wert 0,5 sind die beiden Bereiche gleich. Diese Eigenschaft wird für Anzeigen mit einem Scharnier ignoriert. In diesem Fall übernimmt jeder Bereich einen Bildschirm.
• panePriority – Gibt an, ob nur ein Start- oder Endbereich oder beides angezeigt werden soll. Diese Eigenschaft wird für Anzeigen mit einem Scharnier ignoriert, in diesem Fall both sind Bereiche sichtbar.
• direction – Gibt an, ob die beiden Bereiche vertikal oder horizontal gestapelt werden sollen, ähnlich wie in Flex-Richtung. Diese Eigenschaft wird für Anzeigen mit einem Scharnier ignoriert. In diesem Fall ist horizontal die Richtung für vertikale Scharniere und vertical für horizontale Scharniere.
• textDirection - Wenn Fenster horizontal angeordnet sind, bestimmt dies, welche auf der linken Seite angezeigt wird. Verhält sich genauso wie Flex textDirection
• verticalDirection - Wenn Fenster vertikal angeordnet sind, bestimmt dies, welcher oben hingeht. Verhält sich genauso wie Flex verticalDirection
• padding – Der Abstand zwischen TwoPane und den Bildschirmrändern. Wenn ein Abstand zwischen TwoPane und der Stamm-MediaQuery besteht, wird verwendet, padding um die beiden Bereiche ordnungsgemäß am Scharnier auszurichten.

Tipp

Die meisten für bereitgestellten TwoPane Parameter werden ignoriert, wenn das Gerät über ein Scharnier verfügt. Dies bedeutet, dass Sie sich auf die Funktionsweise des Layouts auf großen Bildschirmen wie Tablets und Desktops konzentrieren können und es gleichzeitig standardmäßig gut an den Dual-Screen-Formfaktor anpassen können.

Verwendungsbeispiel

Widget build(BuildContext context) {
  return TwoPane(
    startPane: BlueA(),
    endPane: OrangeB(),
    paneProportion: 0.3,
    panePriority: MediaQuery.of(context).size.width > 500 ? TwoPanePriority.both : TwoPanePriority.start,
  );
}

Dieser Beispielcode erzeugt die Ergebnisse am Anfang dieses Artikels:

• Auf Surface Duo nehmen Widget A und Widget B jeweils einen Bildschirm ein.
• Auf einem Tablet oder Desktop nimmt Widget A 30 % des Bildschirms ein, während Widget B die restlichen 70 % übernimmt.
• Auf einem kleinen Telefon , das weniger als 500 logische Pixel breit ist, ist nur Widget A sichtbar.