Flutter - wprowadzenie do widżetów

Jak dowiedzieliśmy się z poprzedniego rozdziału, widżety są wszystkim we frameworku Flutter. Dowiedzieliśmy się już, jak tworzyć nowe widżety w poprzednich rozdziałach.

W tym rozdziale zrozumiemy rzeczywistą koncepcję tworzenia widżetów i różnych typów widżetów dostępnych we frameworku Flutter .

Sprawdźmy widżet MyHomePage aplikacji Hello World . Kod do tego celu jest podany poniżej -

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',)),
      );
   }
}

Tutaj stworzyliśmy nowy widżet, rozszerzając StatelessWidget .

Należy zauważyć, że StatelessWidget wymaga tylko jednej kompilacji metody do zaimplementowania w swojej klasie pochodnej. Metoda kompilacji pobiera środowisko kontekstowe niezbędne do budowania widgetów za pomocą parametru BuildContext i zwraca widget, który tworzy.

W kodzie użyliśmy title jako jednego z argumentów konstruktora, a także użyliśmy klucza jako innego argumentu. Tytuł jest używany do wyświetlania tytułu i Klucz służy do identyfikacji widżet w środowisku kompilacji.

Tutaj build metoda nazywa gromadzeniu metodę rusztowań , co z kolei wywołuje gromadzenie metodę AppBar i Centrum do budowania jego interfejs użytkownika.

Na koniec metoda kompilacji Center wywołuje metodę budowania tekstu .

Aby lepiej zrozumieć, wizualną reprezentację tego samego podano poniżej -

Wizualizacja tworzenia widżetów

We Flutterze widżety można pogrupować w wiele kategorii na podstawie ich funkcji, jak podano poniżej -

Widżety specyficzne dla platformy
Układ widżetów
Widżety konserwacji stanu
Niezależne od platformy / podstawowe widżety

Omówmy teraz szczegółowo każdy z nich.

Widżety specyficzne dla platformy

Flutter posiada widżety specyficzne dla konkretnej platformy - Android lub iOS.

Widżety dla systemu Android są projektowane zgodnie z wytycznymi dotyczącymi projektowania materiałów opracowanymi przez system operacyjny Android. Widżety dla systemu Android są nazywane widżetami Material .

Specyficzne widżety iOS są zaprojektowane zgodnie z wytycznymi dotyczącymi interfejsu użytkownika przez Apple i nazywane są widżetami Cupertino .

Oto niektóre z najczęściej używanych widżetów materiałów -

Scaffold
AppBar
BottomNavigationBar
TabBar
TabBarView
ListTile
RaisedButton
FloatingActionButton
FlatButton
IconButton
DropdownButton
PopupMenuButton
ButtonBar
TextField
Checkbox
Radio
Switch
Slider
Selektory daty i godziny
SimpleDialog
AlertDialog

Oto niektóre z najczęściej używanych widżetów Cupertino -

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

Układ widżetów

We Flutterze widżet można utworzyć, komponując jeden lub więcej widgetów. Aby połączyć wiele widżetów w jeden widżet, Flutter zapewnia dużą liczbę widżetów z funkcją układu. Na przykład widget podrzędny można wyśrodkować za pomocą widgetu Centrum .

Oto niektóre z popularnych widżetów układu -

Container- Prostokątne pudełko ozdobione widżetami BoxDecoration z tłem, obramowaniem i cieniem.
Center - Wyśrodkuj widżet podrzędny.
Row - Ułóż swoje dzieci w kierunku poziomym.
Column - Ułóż swoje dzieci w kierunku pionowym.
Stack - Ułóż jeden nad drugim.

Szczegółowo sprawdzimy widżety układu w nadchodzącym rozdziale Wprowadzenie do widgetów układu .

Widżety konserwacji stanu

We Flutterze wszystkie widżety są pochodnymi StatelessWidget lub StatefulWidget .

Widget pochodzący z StatelessWidget nie ma żadnych informacji o stanie, ale może zawierać widget pochodzący z StatefulWidget . Dynamiczny charakter aplikacji wynika z interaktywnego zachowania widżetów i zmian stanu podczas interakcji. Na przykład dotknięcie przycisku licznika zwiększy / zmniejszy stan wewnętrzny licznika o jeden, a reaktywny charakter widżetu Flutter spowoduje automatyczne ponowne renderowanie widżetu przy użyciu nowych informacji o stanie.

Szczegółowo poznamy koncepcję widżetów StatefulWidget w nadchodzącym rozdziale dotyczącym zarządzania stanem .

Niezależne od platformy / podstawowe widżety

Flutter zapewnia dużą liczbę podstawowych widżetów do tworzenia zarówno prostego, jak i złożonego interfejsu użytkownika w sposób niezależny od platformy. Zobaczmy kilka podstawowych widżetów w tym rozdziale.

Text

Widget tekstowy służy do wyświetlania fragmentu łańcucha. Styl ciągu można ustawić za pomocą właściwości style i klasy TextStyle . Przykładowy kod do tego celu jest następujący -

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

Widżet tekstowy ma specjalny konstruktor Text.rich , który akceptuje element potomny typu TextSpan w celu określenia ciągu o innym stylu. Widżet TextSpan ma charakter rekurencyjny i przyjmuje TextSpan jako swoje elementy podrzędne . Przykładowy kod do tego celu jest następujący -

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

Najważniejsze właściwości widżetu Tekst są następujące -

maxLines, int - Maksymalna liczba wyświetlanych wierszy
overflow, TextOverFlow- Określ sposób obsługi przepełnienia wizualnego za pomocą klasy TextOverFlow
style, TextStyle- Określ styl łańcucha za pomocą klasy TextStyle
textAlign, TextAlign- Wyrównanie tekstu, takie jak do prawej, do lewej, justowanie itp. Przy użyciu klasy TextAlign
textDirection, TextDirection - Kierunek przepływu tekstu, od lewej do prawej lub od prawej do lewej

Image

Widżet obrazu służy do wyświetlania obrazu w aplikacji. Widżet obrazu zapewnia różne konstruktory do ładowania obrazów z wielu źródeł i są one następujące -

Image- Generyczny moduł ładujący obraz za pomocą ImageProvider
Image.asset - Załaduj obraz z zasobów projektu flutter
Image.file - Załaduj obraz z folderu systemowego
Image.memory - Załaduj obraz z pamięci
Image.Network - Załaduj obraz z sieci

Najłatwiejszą opcją załadowania i wyświetlenia obrazu we Flutterze jest dołączenie obrazu jako zasobów aplikacji i załadowanie go do widżetu na żądanie.

Utwórz folder, zasoby w folderze projektu i umieść niezbędne obrazy.
Określ zasoby w pubspec.yaml, jak pokazano poniżej -

flutter: 
   assets: 
      - assets/smiley.png

Teraz załaduj i wyświetl obraz w aplikacji.

Image.asset('assets/smiley.png')

Pełny kod źródłowy widżetu MyHomePage aplikacji hello world, a wynik jest pokazany poniżej -.

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")),
      ); 
   }
}

Załadowany obraz jest taki, jak pokazano poniżej -

Najważniejsze właściwości widżetu Obraz są następujące -

image, ImageProvider - Rzeczywisty obraz do załadowania
width, double - Szerokość obrazu
height, double - Wysokość obrazu
alignment, AlignmentGeometry - Jak wyrównać obraz w jego granicach

Icon

Widżet Ikona służy do wyświetlania glifu z czcionki opisanej w klasie IconData . Kod do załadowania prostej ikony wiadomości e-mail jest następujący -

Icon(Icons.email)

Kompletny kod źródłowy do zastosowania go w aplikacji Hello world jest następujący -

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)),
      );
   }
}

Wczytana ikona jest taka, jak pokazano poniżej -