Čo sú opakovane použiteľné komponenty vo Flutter [Vysvetlené na príklade]

Opätovne použiteľné komponenty sú životne dôležité aspekty programovacieho jazyka Dart, na ktorom je založený Flutter. Dart a Flutter sú silne ovplyvnené princípmi objektovo orientovaného programovania.

Pomocou opakovane použiteľných komponentov môžeme jednoducho definovať miniaplikáciu a vložiť do nej ďalšiu miniaplikáciu ako vzťah medzi rodičmi a deťmi. Týmto spôsobom môžeme jednoducho zdieľať spoločné vlastnosti medzi skupinou miniaplikácií a zachovať čitateľnosť kódovej základne používateľského rozhrania.

Uveďme si jednoduchý príklad, aby sme tento koncept lepšie pochopili. Predpokladajme, že chcete vytvoriť komponent Custom Button Component, ktorý možno opätovne použiť v ktorejkoľvek časti vašej aplikácie Flutter.

Na tento účel definujeme novú triedu, ktorá rozširuje triedu `StatefulWidget`. Nižšie je uvedený útržok kódu miniaplikácie `CustomButton`.

``` šípka

import 'package:flutter/material.dart';

class CustomButton rozširuje StatefulWidget {

konečný text reťazca;

konečná farba farby;

konečné VoidCallback onPressed;

const CustomButton(

{vyžaduje tento.text, vyžaduje túto.farbu, vyžaduje toto.onPressed});

@override

State createState() => _CustomButtonState();

}

class _CustomButtonState extends State {

@override

Zostavenie miniaplikácie (kontext zostavy) {

return ElevatedButton(

onPressed:widget.onPressed,

štýl:ElevatedButton.styleFrom(

primárne:widget.color,

),

dieťa:Text(widget.text),

);

}

}

```

Teraz sa pozrime, ako používať toto „Vlastné tlačidlo“. Predpokladajme, že máme triedu `MyApp`, ktorá rozširuje triedu `StatelessWidget`. Potrebujeme jednoducho vytvoriť inštanciu miniaplikácie `CustomButton` a odovzdať požadované parametre.

``` šípka

import 'package:flutter/material.dart';

import 'package:flutter_training_app/CustomButton.dart';

class MyApp rozširuje StatelessWidget {

const MyApp({kľúč? kľúč}) :super(kľúč:kľúč);

@override

Zostavenie miniaplikácie (Kontext zostavy) {

vrátiť MaterialApp(

domov:Lešenie(

appBar:AppBar(

title:Text('Moja aplikácia'),

),

telo:Stred(

dieťa:CustomButton(

text:'Klikni na mňa',

farba:Colors.modrá,

on Pressed:() {

// Urobte tu niečo.

},

),

),

),

);

}

}

```

To je všetko! Úspešne sme vytvorili a použili opakovane použiteľný komponent pomocou zloženia widgetu. Pomocou tejto techniky môžeme zlepšiť znovupoužiteľnosť kódu a udržiavateľnosť nášho používateľského rozhrania Flutter.

• Predchádzajúca strana: Ako nainštalovať príkaz route v systéme Linux (RedHat/CentOS 7/8) pomocou 5 jednoduchých krokov 
• Ďalšia strana: Ako nainštalovať Googler na RHEL/CentOS 7/8{Easy Steps}