Flattern. Vereinfachung des Widget-Layouts mit Dart-Erweiterungen

In Dart 2.7 wurden uns Erweiterungen vorgestellt, mit denen Entwickler vorhandenen Typen neue Funktionen hinzufügen können. Erweiterungen können nicht nur beim Schreiben von Geschäftslogik hilfreich sein, sondern auch bei anderen Aufgaben! Ein Beispiel für eine solche Aufgabe ist die Arbeit mit Widgets.

Basierend auf meiner Erfahrung in der iOS-Entwicklung, inspiriert von ViewModifierSwiftUI, wollte ich herausfinden, wie Dart-Erweiterungen auf ähnliche Weise verwendet werden können, um die visuelle Unordnung zu verringern, die sich aus einer großen Verschachtelung des Widget-Baums ergibt.

Nehmen wir ein Beispiel!

Option mit verschachtelten Widgets

Unten finden Sie ein MyWidgetWidget mit Text Padding(aus dem Standardbeispiel mit dartpad.dev ).

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return
      Padding(
        padding: const EdgeInsets.all(16),
        child: Text('Hello, World!', style: Theme.of(context).textTheme.headline4)
      );
  }
}

Nun wollen wir sehen, wie wir dasselbe mit Dart-Erweiterungen machen können.

Option mit Erweiterungen

WidgetMit der Methode erstellen wir eine Erweiterung für die Klasse padding. Wenn diese Methode aufgerufen wird, wird das Objekt in Folgendes eingeschlossen Padding:

extension WidgetModifier on Widget {
  Widget padding([EdgeInsetsGeometry value = const EdgeInsets.all(16)]) {
    return Padding(
      padding: value,
      child: this,
    );
  }
}

Mit der neuen Erweiterung können wir MyWidgetwie folgt aktualisieren :

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, World!', style: Theme.of(context).textTheme.headline4)
            .padding();
  }
}

, , ! , , .

:

extension WidgetModifier on Widget {

  // ...

  Widget background(Color color) { // 
    return DecoratedBox(
      decoration: BoxDecoration(
        color: color,
      ),
      child: this,
    );
  }

  Widget cornerRadius(BorderRadiusGeometry radius) { //  
    return ClipRRect(
      borderRadius: radius,
      child: this,
    );
  }

  Widget align([AlignmentGeometry alignment = Alignment.center]) { // 
    return Align(
      alignment: alignment,
      child: this,
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, World!', style: Theme.of(context).textTheme.headline4)
            .padding()
            .background(Colors.lightBlue)
            .cornerRadius(BorderRadius.all(Radius.circular(8.0)))
            .padding(EdgeInsets.symmetric(horizontal: 8, vertical: 16))
            .background(Colors.purple);
  }
}

dartpad.dev

? , ! , , .

In diesem Artikel haben wir einen alternativen Ansatz zum ViewModifierErstellen eines Widgetbaums in einem Flutter-Projekt betrachtet, wobei ein ähnliches Konzept wie bei SwiftUI verwendet wurde. Mit diesem Ansatz können wir die Widget-Bäume vereinfachen, indem wir ihre Verschachtelung reduzieren. Und ich habe nur einige Beispiele für solche Erweiterungen gezeigt, aber nach dem gleichen Prinzip können Sie viele neue für andere Fälle erstellen, in denen sie genauso nützlich sind.

Vielen Dank für Ihre Aufmerksamkeit! Ich hoffe, Sie finden diesen Beitrag hilfreich. Wenn Sie Fragen oder Kommentare zu diesem Material haben, können Sie mich gerne auf Twitter kontaktieren !

Bis zum nächsten Mal!