[Flutter] Verwenden Sie flutter_floating, um die Flutter-Floating-Window-Lösung zu realisieren

I. Einleitung

Bei der Entwicklung mobiler Anwendungen ist ein schwebendes Fenster ein gängiges UI-Element, das auf der Anwendungsoberfläche schweben kann, um Benutzern einen schnellen Zugriff auf bestimmte Funktionen zu ermöglichen. Die Implementierung eines schwebenden Fensters in Flutter ist jedoch keine einfache Angelegenheit, da verschiedene Faktoren berücksichtigt werden müssen, wie z. B. die Position, Größe, der Stil und das Verhalten des schwebenden Fensters. In diesem Artikel wird erläutert, wie Sie die leistungsstarke Bibliothek flutter_floating verwenden, um schwebende Flutter-Fenster zu implementieren.

Durch die Lektüre dieses Artikels können Sie sich folgendes Wissen aneignen:

• Anwendungsszenarien und Implementierungsschwierigkeiten des Flutter Floating Window
• Funktionsmerkmale und Nutzungsbedingungen von flutter_floating
• So installieren und konfigurieren Sie flutter_floating
• So verwenden Sie flutter_floating, um schwebende Fenster zu erstellen und anzupassen

Möchten Sie ein Flutter-Experte werden und weitere Tipps und Best Practices erhalten? Wir haben tolle Neuigkeiten für Sie! Flattern Sie von null auf einen Basiseintrag zur Anwendungszeile der gesamten Strategie und warten Sie darauf, dass Sie beitreten! Diese Spalte enthält alle Ressourcen, die Sie zum Erlernen von Flutter benötigen, einschließlich Codebeispielen und ausführlicher Analysen. Der Inhalt der Kolumne wird weiterhin aktualisiert und der Preis entsprechend erhöht. Melden Sie sich jetzt an und profitieren Sie vom besten Preis! Darüber hinaus haben wir auch eine spezielle Diskussionsgruppe. Sie können hier klicken, um unserer Diskussionsgruppe beizutreten und mit anderen Flutter-Lernenden zu kommunizieren und zu lernen. Beginnen wir noch heute unsere Flutter-Lernreise!

2. Die Anforderungen und Herausforderungen des Flutter-Floating-Fensters und die Einführung von flutter_floating

1. Anwendungsszenarien des schwebenden Flutter-Fensters

Overlay-Fenster werden in vielen mobilen Anwendungen häufig verwendet, um einen schnellen Zugriff auf bestimmte Funktionen zu ermöglichen. Beispielsweise könnte eine Musik-Player-App über einen schwebenden Wiedergabe-Controller verfügen, den Benutzer jederzeit steuern können, um Musik abzuspielen und anzuhalten; eine soziale App könnte über eine schwebende Nachrichtenschaltfläche verfügen, mit der Benutzer neue Nachrichten schnell anzeigen und beantworten können.

2. Schwierigkeiten bei der Implementierung des schwebenden Flutter-Fensters

Obwohl schwebende Fenster in mobilen Apps üblich sind, stellt die Implementierung in Flutter einige Herausforderungen dar. Erstens basiert das Layoutsystem von Flutter auf dem Widget-Baum, was bedeutet, dass jedes Widget ein übergeordnetes Widget haben muss und seine Position relativ zum übergeordneten Widget ist. Dies steht im Widerspruch zur Funktion des schwebenden Fensters, das frei auf dem Bildschirm verschoben werden kann. Zweitens muss das schwebende Fenster normalerweise auf die Berührungsereignisse des Benutzers wie Ziehen, Klicken usw. reagieren, was ein tiefes Verständnis des Gestensystems von Flutter erfordert.

3. Funktionsmerkmale von flutter_floating

flutter_floating ist eine Bibliothek, die sich der Implementierung schwebender Fenster in Flutter widmet. Es bietet einen globalen Verwaltungsmechanismus für schwebende Fenster und unterstützt verschiedene Rückrufüberwachungen wie Verschieben, Drücken usw. Es unterstützt auch das Anpassen, ob die Positionsinformationen des schwebenden Fensters gespeichert werden sollen, unterstützt die Einzelseiten- und globale Verwendung und kann N schwebende Fenster einfügen. Darüber hinaus werden auch benutzerdefinierte Bereiche ohne Wischen unterstützt, z. B. das Gleiten innerhalb des Bereichs 50 von oben nach unten usw. Es verfügt außerdem über ein vollständiges Protokollsystem, und Sie können die Protokolle zu verschiedenen schwebenden Fenstern anzeigen.

4. Nutzungsbedingungen von flutter_floating

Für die Verwendung von flutter_floating sind Flutter 3.0.0 oder höher und Dart SDK 3.0.0 oder höher erforderlich. Außerdem ist die aktuelle Version von flutter_floating 1.0.8.

3. Installation und Konfiguration von flutter_floating

1. So installieren Sie flutter_floating

Um flutter_floating in einem Flutter-Projekt zu verwenden, müssen Sie zunächst die Abhängigkeit von flutter_floating zur Datei pubspec.yaml des Projekts hinzufügen. Öffnen Sie die Datei pubspec.yaml, suchen Sie den Abschnitt „Abhängigkeiten“ und fügen Sie den folgenden Code hinzu:

dependencies:
  flutter:
    sdk: flutter
  flutter_floating: ^1.0.8

Führen Sie dann den Befehl im Terminal aus flutter pub getund Flutter lädt flutter_floating automatisch herunter und installiert es.

2. So konfigurieren Sie flutter_floating

Die Konfiguration von flutter_floating erfolgt hauptsächlich über die Parameter, die beim Erstellen des schwebenden Fensters übergeben werden. Im Folgenden sind einige häufig verwendete Parameter aufgeführt:

• slideType: Der Schiebetyp des schwebenden Fensters, z. B. Schieben nach rechts und unten.
• isPosCache: Ob die Positionsinformationen des schwebenden Fensters gespeichert werden sollen. Nach der Aktivierung behält das schwebende Fenster bei einem Floating.closeerneuten Aufruf seine vorherige Position bei.Floating.open
• isShowLog: Ob Protokolle angezeigt werden sollen. Nach der Aktivierung können Sie verschiedene Verhaltensweisen des schwebenden Fensters anzeigen, z. B. Bewegen, Drücken usw.

Ok, ich werde mit den restlichen Kapiteln fortfahren. Das Folgende ist der Inhalt des vierten, fünften und sechsten Kapitels:

4. Beispiel für die Verwendung von flutter_floating

1. Erstellen Sie ein einfaches schwebendes Fenster

Um ein schwebendes Fenster zu erstellen, müssen wir zunächst ein Objekt erstellen Floating. Hier ist ein einfaches Beispiel:

Floating floating = Floating(
  Container(
    width: 100,
    height: 100,
    color: Colors.red,
  ),
  slideType: FloatingSlideType.onRightAndBottom,
  isShowLog: true,
);

In diesem Beispiel erstellen wir ein rotes quadratisches Hover-Fenster. Die Größe des schwebenden Fensters beträgt 100 x 100, der Schiebetyp ist onRightAndBottomund die Protokollierung ist aktiviert.

Dann können wir floating.open()das schwebende Fenster öffnen, indem wir die Methode aufrufen.

2. Passen Sie den Stil und das Verhalten des schwebenden Fensters an

flutter_floating bietet viele Parameter, mit denen Sie den Stil und das Verhalten des schwebenden Fensters anpassen können. Beispielsweise können wir slideTypeüber den Parameter den Schiebetyp des schwebenden Fensters ändern, über isPosCacheden Parameter entscheiden, ob die Positionsinformationen des schwebenden Fensters gespeichert werden sollen, und über isShowLogden Parameter entscheiden, ob das Protokoll angezeigt werden soll.

Hier ist ein komplexeres Beispiel, das zeigt, wie diese Parameter verwendet werden:

Floating floating = Floating(
  Container(
    width: 100,
    height: 100,
    color: Colors.red,
  ),
  slideType: FloatingSlideType.onLeftAndTop,
  isPosCache: true,
  isShowLog: true,
  slideTopHeight: 50,
  slideBottomHeight: 50,
);

In diesem Beispiel erstellen wir ein rotes quadratisches Hover-Fenster. Die Größe des schwebenden Fensters beträgt 100 x 100, der Schiebetyp ist onLeftAndTop, das Speichern von Standortinformationen und die Protokollanzeige sind aktiviert und die Schiebegrenze ist festgelegt. Das schwebende Fenster kann auf eine Position von 50 von oben und 50 von unten verschoben werden.

3. Fügen Sie interaktive Funktionen im schwebenden Fenster hinzu

Wir können dem schwebenden Fenster verschiedene interaktive Funktionen hinzufügen. Wir können beispielsweise eine Schaltfläche hinzufügen. Wenn der Benutzer auf die Schaltfläche klickt, wird im schwebenden Fenster eine Eingabeaufforderung angezeigt.

Hier ist ein Beispiel:

Floating floating = Floating(
  GestureDetector(
    onTap: () {
    
    
      print('You tapped the floating window!');
    },
    child: Container(
      width: 100,
      height: 100,
      color: Colors.red,
    ),
  ),
  slideType: FloatingSlideType.onRightAndBottom,
  isShowLog: true,
);

In diesem Beispiel fügen wir eins zum Overlay hinzu GestureDetector. Wenn der Benutzer auf das schwebende Fenster klickt, gibt das Programm eine Eingabeaufforderung aus.

V. Zusammenfassung

In diesem Artikel wird erläutert, wie Sie mit flutter_floating das schwebende Flutter-Fenster implementieren. Wir stellten zunächst die Anwendungsszenarien und Implementierungsschwierigkeiten des Flutter-Floating-Fensters vor und stellten dann die Funktionsmerkmale und Nutzungsbedingungen von flutter_floating vor. Als Nächstes erklärten wir, wie man flutter_floating installiert und konfiguriert und wie man flutter_floating zum Erstellen und Anpassen schwebender Fenster verwendet.

Sind Sie neugierig auf Flutter und möchten mehr darüber erfahren? Dann ist Flutter from Zero to One Basic Introduction to Application Launch Guide Ihre beste Wahl! Hier finden Sie umfassende Flutter-Lernressourcen, einschließlich Codebeispielen und ausführlicher Analysen. Fragen Sie sich, wie Sie mit Flutter Apps erstellen können? Alle Antworten finden Sie in unserer Kolumne! Zögern Sie nicht länger, der Inhalt der Kolumne wird ständig aktualisiert und der Preis erhöht sich entsprechend. Melden Sie sich jetzt an und profitieren Sie vom besten Preis! Lassen Sie uns gemeinsam die Welt von Flutter erkunden! Möchten Sie mehr wissen? Klicken Sie hier, um den Spaltenleitfaden der Broschüre „Flutter Developer 101 Erste Schritte“ anzuzeigen . Darüber hinaus haben wir auch eine spezielle Diskussionsgruppe. Sie können hier klicken, um unserer Diskussionsgruppe beizutreten und mit anderen Flutter-Lernenden zu kommunizieren und zu lernen.