Flutter ist ein neues von Google eingeführtes Framework für die Entwicklung mobiler Anwendungen, mit dem Entwickler eine Reihe von Codebasen verwenden können, um sowohl Android- als auch iOS-Anwendungen zu entwickeln. Sein Designkonzept, die Framework-Struktur und die Verwendung von Widgets ermöglichen es Entwicklern, qualitativ hochwertige Anwendungen effizienter zu erstellen.
1. Flutter-Designkonzept
Die Designphilosophie von Flutter lautet „Alles ist ein Widget“. Das heißt, egal, ob es sich um Schaltflächen, Schriftarten, Farben, Layouts oder sogar Ihre gesamte Anwendung handelt, sie besteht aus einzelnen Widgets. In Flutter können Widgets verschachtelt, verpackt oder zu komplexen UI-Komponenten kombiniert werden, was Entwicklern große Flexibilität und Kreativität bietet.
Zweitens: Flutter-Framework-Struktur
Das Flutter-Framework besteht aus einer Reihe von Hierarchien. Von unten nach oben umfasst es hauptsächlich:
-
Dart-Plattform: Flutter ist in der Dart-Sprache geschrieben. Die Dart-Plattform umfasst einen Dart-JIT- und AOT-Compiler, der nativen ARM-Code für Flutter generieren kann.
-
Flutter Engine: Hauptsächlich in C++ geschrieben, bietet sie Low-Level-Rendering-Unterstützung. Es kümmert sich auch um das Plugin-System, Textlayout und -typeinstellung, Netzwerk- und Datei-I/O, Thread-Management usw.
-
Foundation-Bibliothek: Bietet die gleichen Grundtypen und Dienstprogramme wie Dart, sodass andere übergeordnete Bibliotheken das gleiche Design und die gleiche Implementierung nutzen können.
-
Widgets: Module, die die Benutzeroberfläche und Interaktionen der Anwendung beschreiben. Zu den Schlüsselkonzepten gehören Widget, StatelessWidget, StatefulWidget, State usw.
3. Widget in Flutter
Das Widget in Flutter ist nicht nur die Ansicht, die die Benutzeroberfläche deklariert, sondern auch die Brücke zwischen der Ansicht und der Schnittstellenänderung. Ein Widget kann Folgendes definieren:
Ein Strukturelement (z. B. eine Schaltfläche oder ein Menü),
ein Stilelement (z. B. eine Schriftart oder ein Farbschema)
oder sogar ein Layoutelement (z. B. Abstand oder Ausrichtung).
In Flutter besteht die Hauptaufgabe eines Widgets darin, ein bereitzustellen build()-Methode zum Beschreiben, was in der Benutzeroberfläche angezeigt wird.
Viertens: StatelessWidget und StatefulWidget
StatelessWidgets sind unveränderlich. Sie beschreiben, wie die Benutzeroberfläche für eine bestimmte Konfiguration erstellt werden sollte. Das StatefulWidget kann den Zustand während des Lebenszyklus ändern. Für die Implementierung eines StatefulWidget sind mindestens zwei Klassen erforderlich: 1) eine StatefulWidget-Klasse; 2) eine State-Klasse.
5. Grundlegende Layout-Widgets
Es gibt viele Layout-Widgets in Flutter, z. B. Zeile, Spalte und Stapel. Zeile und Spalte sind die grundlegenden Layout-Widgets. Beide akzeptieren eine Spalte mit Unter-Widgets und ordnen diese horizontal oder vertikal an. Stack kann Widgets stapeln, um verschiedene komplexe Layouts zu erstellen.
6. Struktur des Flutter-Programms
Ein grundlegendes Flutter-Programm umfasst normalerweise die folgenden Teile:
- Hauptfunktion: Der Einstiegspunkt der Anwendung.
- MyApp-Klasse: StatelessWidget, gibt ein MaterialApp-Widget zurück, das das Anwendungsthema, das Routing und die Homepage enthält.
- Homepage-Klasse: Dies kann StatelessWidget oder StatefulWidget sein, einschließlich des Hauptteils der Anwendung.
- Andere Widget-Klassen: Ihre benutzerdefinierten Widgets, die von der Homepage-Klasse oder anderen Widget-Klassen verwendet werden können.
Nachdem Sie diese Grundlagen beherrschen, können Sie das Flutter-Framework besser für die Anwendungsentwicklung nutzen und schöne Anwendungen mit einer guten Benutzererfahrung erstellen.
Sieben, Flutters Widget
7.1. Grundlegende Widgets
In Flutter werden alle Schnittstellenelemente aus Widgets erstellt. Jedes Widget beschreibt, was auf der Benutzeroberfläche angezeigt werden soll. Sie können sich ein Widget als Baustein einer Anwendungsschnittstelle vorstellen. Sie umfassen Elemente zur Anzeige von Text, Bildern, Symbolen, Eingabefeldern, Aktionen und mehr.
7.1.1 Text: Dieses Widget dient zur Anzeige von einfach gestaltetem Text und enthält einige Eigenschaften zur Steuerung des Stils der Textanzeige. ####
Text(
'Hello, World!',
textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.bold),
)
7.1.2 Bild: Das Widget zum Anzeigen von Bildern unterstützt mehrere Möglichkeiten zum Laden von Bildern, z. B. Netzwerk, Ressource, Dateisystem usw.
Image.network('https://example.com/images/sample.jpg')
7.1.3 Symbol: Das Symbol-Widget von Material Design.
Icon(Icons.star, color: Colors.red[500])
7.2. Widget-Typen: StatelessWidget und StatefulWidget.
7.2.1. StatelessWidget
StatelessWidgets sind unveränderlich und beschreiben, wie die Benutzeroberfläche angesichts der Konfiguration erstellt werden soll. Der folgende Code zeigt beispielsweise, wie ein benutzerdefiniertes StatelessWidget erstellt wird, das ein rotes Sternsymbol zurückgibt:
class MyIcon extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Icon(Icons.star, color: Colors.red[500]);
}
}
7.2.2. StatefulWidget
StatefulWidgets sind dynamisch. Sie können im Laufe ihrer Lebensdauer ihren Zustand ändern, beispielsweise als Reaktion auf Benutzerinteraktionen. Ein StatefulWidget benötigt mindestens zwei Klassen: die StatefulWidget-Klasse und die State-Klasse. Hier ist ein Beispiel:
class Counter extends StatefulWidget {
Counter({Key key, this.title}) : super(key: key);
final String title;
@override
_CounterState createState() => _CounterState();
}
class _CounterState extends State<Counter> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Text('You have pushed the button $_counter times.'),
RaisedButton(
onPressed: _incrementCounter,
child: Text('Increment'),
),
],
);
}
}
In diesem Beispiel wird ein neues StatefulWidget mit dem Namen Counter erstellt. Immer wenn der Benutzer die Schaltfläche „Inkrementieren“ drückt, wird der Wert von _counter erhöht und die Benutzeroberfläche wird automatisch aktualisiert.
Acht, Flutters grundlegende Layout-Widgets
In Flutter haben wir viele vordefinierte Layout-Widgets wie Zeile, Spalte und Stapel.
8.1. Zeile und Spalte
Zeile und Spalte sind die beiden am häufigsten verwendeten Layout-Widgets. Sie alle akzeptieren eine Liste untergeordneter Widgets und ordnen diese horizontal oder vertikal an. Hier ist ein Beispiel für die Verwendung von Row, das drei rote Sternsymbole enthält:
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(Icons.star, color: Colors.red[500]),
Icon(Icons.star, color: Colors.red[500]),
Icon(Icons.star, color: Colors.red[500]),
],
)
8.2. Stapel
Stack ist ein Layout-Widget, das untergeordnete Widgets stapeln kann. Sie können positionierte Widgets verwenden, um untergeordnete Widgets im Stapel zu positionieren. Hier ist ein einfaches Stack-Beispiel:
Stack(
alignment: const Alignment(0.6, 0.6),
children: [
CircleAvatar(
backgroundImage: AssetImage('images/pic.jpg'),
radius: 100.0,
),
Container(
decoration: BoxDecoration(
color: Colors.black45,
),
child: Text(
'Hello World',
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
],
)
9. Im Folgenden erstellen wir eine Beispielanwendung von Flutter, einschließlich einiger der zuvor erwähnten Schlüsselkonzepte, einschließlich Widget, StatelessWidget, StatefulWidget sowie Zeilen-, Spalten- und Stapellayouts.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
MyHomePage({required this.title, key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
void _decrementCounter() {
setState(() {
_counter--;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
FloatingActionButton(
onPressed: _decrementCounter,
tooltip: 'Decrement',
child: Icon(Icons.remove),
),
],
),
],
),
),
);
}
}
Durch diesen Artikel sollten Sie über ein grundlegendes Verständnis von Flutter verfügen, einschließlich der Designphilosophie, der Framework-Struktur, des Widget-Systems von Flutter und der Verwendung verschiedener Widget-Typen zum Erstellen von Schnittstellen und Layouts. Als Nächstes befassen wir uns mit fortgeschritteneren Themen, darunter dem Umgang mit Benutzerinteraktionen, dem Erstellen von Animationen, dem Zugriff auf Netzwerkdaten und mehr.