Τι είναι τα επαναχρησιμοποιήσιμα εξαρτήματα στο Flutter [Επεξήγηση με παράδειγμα]

Επαναχρησιμοποιήσιμα εξαρτήματα είναι οι ζωτικές πτυχές της γλώσσας προγραμματισμού Dart στην οποία βασίζεται το Flutter. Το Dart και το Flutter επηρεάζονται και τα δύο σε μεγάλο βαθμό από τις αντικειμενοστρεφείς αρχές προγραμματισμού.

Με τα Reusable Components, μπορούμε απλά να ορίσουμε ένα Widget και να ενσωματώσουμε ένα άλλο Widget μέσα σε αυτό, όπως μια σχέση γονέα-παιδιού. Με αυτόν τον τρόπο, μπορούμε εύκολα να μοιραστούμε τις κοινές ιδιότητες μεταξύ μιας ομάδας γραφικών στοιχείων και να διατηρήσουμε την αναγνωσιμότητα της βάσης κωδικών διεπαφής χρήστη.

Ας έχουμε ένα απλό παράδειγμα για να κατανοήσουμε καλύτερα αυτήν την έννοια. Ας υποθέσουμε ότι θέλετε να δημιουργήσετε ένα στοιχείο προσαρμοσμένου κουμπιού που μπορεί να επαναχρησιμοποιηθεί σε οποιοδήποτε μέρος της εφαρμογής Flutter σας.

Για το σκοπό αυτό, ορίζουμε μια νέα κλάση που επεκτείνει την κλάση «StatefulWidget». Παρακάτω είναι το απόσπασμα κώδικα του γραφικού στοιχείου "CustomButton".

``, βέλος

εισαγωγή 'package:flutter/material.dart';

κλάση CustomButton επεκτείνει StatefulWidget {

τελικό κείμενο συμβολοσειράς?

τελικό χρώμα χρώματος?

τελικό VoidCallback onPressed.

const CustomButton(

{required this.text, απαιτείται this.color, απαιτείται this.onPressed});

@καταπατώ

Κατάσταση createState() => _CustomButtonState();

}

class _CustomButtonState επεκτείνει την κατάσταση {

@καταπατώ

Δημιουργία γραφικού στοιχείου (Πλαίσιο BuildContext) {

Επιστροφή Ανυψωμένο Κουμπί(

onPressed:widget.onPressed,

στυλ:ElevatedButton.styleFrom(

κύριο:widget.color,

),

παιδί:Κείμενο(widget.text),

)

}

}

```

Τώρα ας δούμε πώς να χρησιμοποιήσετε αυτό το «Προσαρμοσμένο Κουμπί». Ας υποθέσουμε ότι έχουμε μια κλάση «MyApp» που επεκτείνει την κατηγορία «StatelessWidget». Απλώς πρέπει να δημιουργήσουμε ένα στιγμιότυπο του γραφικού στοιχείου `CustomButton` και να περάσουμε τις απαιτούμενες παραμέτρους.

``, βέλος

εισαγωγή 'package:flutter/material.dart';

εισαγωγή 'package:flutter_training_app/CustomButton.dart';

class MyApp επεκτείνει StatelessWidget {

const MyApp({Key? key}) :super(key:key);

@καταπατώ

Δημιουργία γραφικού στοιχείου (Πλαίσιο BuildContext) {

επιστροφή MaterialApp(

σπίτι:ικρίωμα(

appBar:AppBar(

τίτλος:Κείμενο ('Η εφαρμογή μου'),

),

σώμα:κέντρο(

παιδί:CustomButton(

text:'Κλικ μου',

χρώμα:Χρώματα.μπλε,

onPressed:() {

// Κάνε κάτι εδώ.

},

),

),

),

)

}

}

```

Αυτό είναι! Δημιουργήσαμε και χρησιμοποιήσαμε με επιτυχία ένα επαναχρησιμοποιήσιμο στοιχείο χρησιμοποιώντας τη σύνθεση του Widget. Χρησιμοποιώντας αυτήν την τεχνική, μπορούμε να βελτιώσουμε την επαναχρησιμοποίηση του κώδικα και τη δυνατότητα συντήρησης του Flutter UI μας.