Flattern - Einführung in Widgets

Wie wir im vorherigen Kapitel erfahren haben, sind Widgets alles im Flutter-Framework. In den vorherigen Kapiteln haben wir bereits gelernt, wie neue Widgets erstellt werden.

Lassen Sie uns in diesem Kapitel das eigentliche Konzept zum Erstellen der Widgets und die verschiedenen Arten von Widgets verstehen, die im Flutter- Framework verfügbar sind .

Lassen Sie uns das MyHomePage- Widget der Hello World- Anwendung überprüfen . Der Code für diesen Zweck lautet wie folgt:

class MyHomePage extends StatelessWidget { 
   MyHomePage({Key key, this.title}) : super(key: key); 
   
   final String title; 
   @override 
   Widget build(BuildContext context) {
      return Scaffold( 
         appBar: AppBar(title: Text(this.title), ), 
         body: Center(child: Text( 'Hello World',)),
      );
   }
}

Hier haben wir ein neues Widget erstellt, indem wir StatelessWidget erweitert haben .

Beachten Sie, dass die StatelessWidget nur eine einzige Methode erfordert build in seiner abgeleiteten Klasse implementiert werden. Die Erstellungsmethode ruft die zum Erstellen der Widgets erforderliche Kontextumgebung über den BuildContext- Parameter ab und gibt das erstellte Widget zurück.

Im Code haben wir title als eines der Konstruktorargumente und Key als weiteres Argument verwendet. Der Titel wird verwendet, um den Titel anzuzeigen, und der Schlüssel wird verwendet, um das Widget in der Build-Umgebung zu identifizieren.

Hier wird die Build ruft Methode , um die Build - Methode von Scaffold , die wiederum ruft die Build - Methode von AppBar und Zentrum zu bauen seine Benutzeroberfläche.

Schließlich ruft die Center- Erstellungsmethode die Texterstellungsmethode auf .

Zum besseren Verständnis ist die visuelle Darstellung derselben unten angegeben -

Widget-Build-Visualisierung

In Flutter können Widgets basierend auf ihren Funktionen in mehrere Kategorien eingeteilt werden, wie unten aufgeführt.

  • Plattformspezifische Widgets
  • Layout-Widgets
  • Widgets für die Statuswartung
  • Plattformunabhängige / grundlegende Widgets

Lassen Sie uns jetzt jeden von ihnen im Detail besprechen.

Plattformspezifische Widgets

Flutter verfügt über spezifische Widgets für eine bestimmte Plattform - Android oder iOS.

Android-spezifische Widgets werden gemäß der Material Design-Richtlinie von Android OS entwickelt. Android-spezifische Widgets werden als Material-Widgets bezeichnet .

iOS-spezifische Widgets wurden gemäß den Richtlinien für Benutzeroberflächen von Apple entwickelt und als Cupertino- Widgets bezeichnet.

Einige der am häufigsten verwendeten Material-Widgets sind:

  • Scaffold
  • AppBar
  • BottomNavigationBar
  • TabBar
  • TabBarView
  • ListTile
  • RaisedButton
  • FloatingActionButton
  • FlatButton
  • IconButton
  • DropdownButton
  • PopupMenuButton
  • ButtonBar
  • TextField
  • Checkbox
  • Radio
  • Switch
  • Slider
  • Datums- und Zeitauswahl
  • SimpleDialog
  • AlertDialog

Einige der am häufigsten verwendeten Cupertino- Widgets sind:

  • CupertinoButton
  • CupertinoPicker
  • CupertinoDatePicker
  • CupertinoTimerPicker
  • CupertinoNavigationBar
  • CupertinoTabBar
  • CupertinoTabScaffold
  • CupertinoTabView
  • CupertinoTextField
  • CupertinoDialog
  • CupertinoDialogAction
  • CupertinoFullscreenDialogTransition
  • CupertinoPageScaffold
  • CupertinoPageTransition
  • CupertinoActionSheet
  • CupertinoActivityIndicator
  • CupertinoAlertDialog
  • CupertinoPopupSurface
  • CupertinoSlider

Layout-Widgets

In Flutter kann ein Widget erstellt werden, indem ein oder mehrere Widgets erstellt werden. Um mehrere Widgets zu einem einzigen Widget zusammenzusetzen, bietet Flutter eine große Anzahl von Widgets mit Layoutfunktion. Beispielsweise kann das untergeordnete Widget mithilfe des Center- Widgets zentriert werden .

Einige der beliebtesten Layout-Widgets sind wie folgt:

  • Container- Eine rechteckige Box, die mit BoxDecoration- Widgets mit Hintergrund, Rand und Schatten dekoriert wurde .

  • Center - Zentrieren Sie das untergeordnete Widget.

  • Row - Ordnen Sie die Kinder in horizontaler Richtung an.

  • Column - Ordnen Sie die Kinder in vertikaler Richtung an.

  • Stack - Übereinander anordnen.

Wir werden die Layout-Widgets im kommenden Kapitel Einführung in Layout-Widgets im Detail überprüfen .

Widgets für die Statuswartung

In Flutter werden alle Widgets entweder von StatelessWidget oder StatefulWidget abgeleitet .

Von StatelessWidget abgeleitetes Widget enthält keine Statusinformationen, kann jedoch von StatefulWidget abgeleitetes Widget enthalten . Die Dynamik der Anwendung beruht auf dem interaktiven Verhalten der Widgets und den Statusänderungen während der Interaktion. Wenn Sie beispielsweise auf eine Zählertaste tippen, wird der interne Status des Zählers um eins erhöht / verringert, und durch die reaktive Natur des Flutter- Widgets wird das Widget automatisch unter Verwendung neuer Statusinformationen neu gerendert.

Wir werden das Konzept der StatefulWidget- Widgets im kommenden Kapitel zur Staatsverwaltung ausführlich kennenlernen .

Plattformunabhängige / grundlegende Widgets

Flutter bietet eine große Anzahl grundlegender Widgets, um plattformunabhängig sowohl einfache als auch komplexe Benutzeroberflächen zu erstellen. Sehen wir uns einige der grundlegenden Widgets in diesem Kapitel an.

Text

Das Text- Widget wird verwendet, um ein Stück Zeichenfolge anzuzeigen. Der Stil des Strings kann durch die Verwendung eingestellt werden Stil Eigenschaft und Textstyle - Klasse. Der Beispielcode für diesen Zweck lautet wie folgt:

Text('Hello World!', style: TextStyle(fontWeight: FontWeight.bold))

Das Text- Widget verfügt über einen speziellen Konstruktor, Text.rich , der das untergeordnete Element vom Typ TextSpan akzeptiert , um die Zeichenfolge mit einem anderen Stil anzugeben. Das TextSpan- Widget ist rekursiver Natur und akzeptiert TextSpan als untergeordnete Elemente . Der Beispielcode für diesen Zweck lautet wie folgt:

Text.rich( 
   TextSpan( 
      children: <TextSpan>[ 
         TextSpan(text: "Hello ", style:  
         TextStyle(fontStyle: FontStyle.italic)),  
         TextSpan(text: "World", style: 
         TextStyle(fontWeight: FontWeight.bold)),  
      ], 
   ), 
)

Die wichtigsten Eigenschaften des Text- Widgets sind:

  • maxLines, int - Maximale Anzahl der anzuzeigenden Zeilen

  • overflow, TextOverFlow- Geben Sie an, wie der visuelle Überlauf mithilfe der TextOverFlow- Klasse behandelt wird

  • style, TextStyle- Geben Sie den Stil der Zeichenfolge mithilfe der TextStyle- Klasse an

  • textAlign, TextAlign- Ausrichtung des Textes wie rechts, links, ausrichten usw. mithilfe der TextAlign- Klasse

  • textDirection, TextDirection - Richtung des Textflusses, entweder von links nach rechts oder von rechts nach links

Image

Das Bild- Widget wird verwendet, um ein Bild in der Anwendung anzuzeigen. Das Bild- Widget bietet verschiedene Konstruktoren zum Laden von Bildern aus mehreren Quellen. Diese lauten wie folgt:

  • Image- Generischer Image Loader mit ImageProvider

  • Image.asset - Laden Sie das Bild aus den Assets des Flatterprojekts

  • Image.file - Laden Sie das Image aus dem Systemordner

  • Image.memory - Bild aus dem Speicher laden

  • Image.Network - Laden Sie das Bild aus dem Netzwerk

Die einfachste Möglichkeit, ein Bild in Flutter zu laden und anzuzeigen, besteht darin, das Bild als Assets der Anwendung einzuschließen und es bei Bedarf in das Widget zu laden.

  • Erstellen Sie einen Ordner und Assets im Projektordner und platzieren Sie die erforderlichen Bilder.

  • Geben Sie die Assets in der Datei pubspec.yaml wie unten gezeigt an -

flutter: 
   assets: 
      - assets/smiley.png
  • Laden Sie nun das Bild und zeigen Sie es in der Anwendung an.

Image.asset('assets/smiley.png')
  • Der vollständige Quellcode des MyHomePage- Widgets der Hello World-Anwendung und das Ergebnis sind wie folgt :.

class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key); 
   final String title; 

   @override 
   Widget build(BuildContext context) {
      return Scaffold( 
         appBar: AppBar( title: Text(this.title), ), 
         body: Center( child: Image.asset("assets/smiley.png")),
      ); 
   }
}

Das geladene Bild ist wie unten gezeigt -

Die wichtigsten Eigenschaften des Bild- Widgets sind:

  • image, ImageProvider - Tatsächlich zu ladendes Bild

  • width, double - Breite des Bildes

  • height, double - Höhe des Bildes

  • alignment, AlignmentGeometry - So richten Sie das Bild innerhalb seiner Grenzen aus

Icon

Das Symbol- Widget wird verwendet, um eine Glyphe aus einer in der IconData- Klasse beschriebenen Schriftart anzuzeigen . Der Code zum Laden eines einfachen E-Mail-Symbols lautet wie folgt:

Icon(Icons.email)

Der vollständige Quellcode zum Anwenden in der Hallo-Welt-Anwendung lautet wie folgt:

class MyHomePage extends StatelessWidget { 
   MyHomePage({Key key, this.title}) : super(key: key); 
   final String title; 

   @override 
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(title: Text(this.title),),
         body: Center( child: Icon(Icons.email)),
      );
   }
}

Das geladene Symbol ist wie unten gezeigt -