Återanvändbara komponenter är de vitala aspekterna av programmeringsspråket Dart som Flutter bygger på. Dart och Flutter är båda starkt påverkade av de objektorienterade programmeringsprinciperna.
Med de återanvändbara komponenterna kan vi helt enkelt definiera en widget och bädda in en annan widget i den som en förälder-barn-relation. Genom att göra det kan vi enkelt dela de gemensamma egenskaperna mellan en grupp widgets och bibehålla läsbarheten för UI-kodbasen.
Låt oss ta ett enkelt exempel för att förstå detta koncept bättre. Anta att du vill skapa en anpassad knappkomponent som kan återanvändas i vilken del av din Flutter-applikation som helst.
För detta ändamål definierar vi en ny klass som utökar klassen `StatefulWidget`. Nedan är kodavsnittet för "CustomButton"-widgeten.
``` pil
importera 'package:flutter/material.dart';
class CustomButton utökar StatefulWidget {
slutlig strängtext;
slutlig färg färg;
sista VoidCallback onPressed;
const CustomButton(
{required this.text, required this.color, required this.onPressed});
@åsidosätta
State createState() => _CustomButtonState();
}
klass _CustomButtonState utökar State {
@åsidosätta
Widgetbyggd(BuildContext-kontext) {
return ElevatedButton(
onPressed:widget.onPressed,
stil:ElevatedButton.styleFrom(
primär:widget.color,
),
barn:Text(widget.text),
);
}
}
```
Låt oss nu se hur du använder denna "CustomButton". Anta att vi har en `MyApp`-klass som utökar klassen `StatelessWidget`. Vi behöver helt enkelt skapa en instans av `CustomButton`-widgeten och skicka de nödvändiga parametrarna.
``` pil
importera 'package:flutter/material.dart';
importera 'package:flutter_training_app/CustomButton.dart';
class MyApp utökar StatelessWidget {
const MyApp({Key? key}):super(key:key);
@åsidosätta
Widgetbyggd(BuildContext-kontext) {
returnera materialapp(
hem:Ställning(
appBar:AppBar(
title:Text('Min app'),
),
body:Center(
barn:CustomButton(
text:'Klicka på mig',
färg:Colors.blue,
onPressed:() {
// Gör något här.
},
),
),
),
);
}
}
```
Det är det! Vi har framgångsrikt skapat och använt en återanvändbar komponent med hjälp av widgetens sammansättning. Med den här tekniken kan vi förbättra kodåteranvändbarheten och underhållbarheten för vårt Flutter-gränssnitt.
