Erstellen Sie mit Flutter eine verschiebbare Stapel-Widget-Funktion

Dieser Beitrag konzentriert sich auf ein streng geheimes Flutter-Projekt, das ich für den Desktop und das Web entwickelt habe und das eine Canvas- und eine verschiebbare Knotenschnittstelle verwendet. Dieses Tutorial zeigt, wie ich Stapel verwende, um verschiebbare Funktionen mit Widgets zu erreichen.

Wie unten gezeigt.

Wir werden dem Stapel dynamisch Elemente hinzufügen und um sie zu unterscheiden, werde ich den Typer RandomColor verwenden. Also müssen wir dieses Paket hinzufügen.

zufällige Farbe:

Wir können dann die HomeView erstellen, die unseren Stapel enthält

Klasse HomeView erweitert StatefulWidget {
  @überschreiben
  _HomeViewState createState() => _HomeViewState();
}

Klasse _HomeViewState erweitert State<HomeView> {
  Liste<Widget> beweglicheElemente = [];

  @überschreiben
  Widget erstellen (BuildContext Kontext) {
    Gerüst zurückgeben (
        Körper: Stapel(
          Kinder: bewegliche Gegenstände,
        ));
  }
}

Die Funktionsweise ist denkbar einfach. Wir werden ein MoveableStackItem -Stateful-Widget haben. Es behält seine eigene Position und Farbe im Auge. Die Farbe wird bei der Initialisierung festgelegt und die Position über GestureDetector aktualisiert.

Klasse _MoveableStackItemState erweitert State<MoveableStackItem> {
  doppelte xPosition = 0;
  doppelte yPosition = 0;
  Farbe Farbe;

  @überschreiben
  void initState() {
    Farbe = ZufälligeFarbe().zufälligeFarbe();
    super.initState();
  }

  @überschreiben
  Widget erstellen (BuildContext Kontext) {
    return Positioniert(
      oben: yPosition,
      links: xPosition,
      Kind: GestureDetector(
        beiPanUpdate: (tapInfo) {
          setzeZustand(() {
            xPosition += tapInfo.delta.dx;
            yPosition += tapInfo.delta.dy;
          });
        },
        Kind:Container(
          Breite: 150,
          Höhe: 150,
          Farbe: Farbe,
        ),
      ),
    );
  }
}

Als letztes müssen Sie eine neue MoveableStackItem -Ansicht hinzufügen. Wir tun dies über eine schwebende Aktionsschaltfläche in HomeView.

 Gerüst zurückgeben (
  schwebenderActionButton:SchwimmenderActionButton(
    beim Drücken: () {
      setzeZustand(() {
        beweglichesElemente.add(BeweglichesStackItem());
      });
    },
  ),
  Körper: Stapel(
    Kinder: bewegliche Gegenstände,
  ));

Das ist es. Jetzt haben Sie einen beweglichen Stapel in Ihrer Ansicht.

Dies ist das Ende dieses Artikels zum Erstellen eines verschiebbaren Stapel-Widgets in Flutter. Weitere verwandte Inhalte zum Flutter-Stapel-Widget finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!