Πώς να χρησιμοποιήσετε το Flex στη στήλη Flutter

2
Πώς να χρησιμοποιήσετε το Flex στη στήλη Flutter

Σε αυτήν την ανάρτηση ιστολογίου, εστιάζουμε στην ιδιότητα flex στις Στήλες Flutter. Η χρήση του flex μπορεί να σας δώσει λεπτομερή έλεγχο του τρόπου με τον οποίο συμπεριφέρονται τα γραφικά στοιχεία σε ένα Column. Λοιπόν, ας μην χάνουμε χρόνο και ας βουτήξουμε αμέσως!

Τι είναι το Flex;

Πριν βουτήξουμε στα παραδείγματα, ας διευκρινίσουμε τι είναι το flex. Το Flex in Flutter είναι ένας τρόπος για να καθορίσετε πόσο χώρο θα καταλάβει ένα widget σε μια ευέλικτη διάταξη όπως Column. Βοηθά στη διαίρεση του διαθέσιμου χώρου μεταξύ των γραφικών στοιχείων με βάση τον παράγοντα ευκαμψίας τους.

Flex σε μια στήλη

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

Βασική χρήση

Για αρχή, ας δούμε ένα απλό παράδειγμα:

Column(
  children: [
    Flexible(
      flex: 2,
      child: Container(
        color: Colors.red,
      ),
    ),
    Flexible(
      flex: 1,
      child: Container(
        color: Colors.green,
      ),
    ),
  ],
)

Επεξήγηση κώδικα

  • Γραφικό στοιχείο στήλης: Ο Column είναι ο γονιός που κρατά τα παιδιά κάθετα.
  • Ευέλικτο Widget: Τυλίγουμε τα παιδιά μέσα Flexible widgets. Αυτό επιτρέπει στα παιδιά να λυγίσουν τα μεγέθη τους σε σχέση με τους γονείς τους.
  • Flex Factor: Η ιδιότητα flex βοηθά στην κατανομή του διαθέσιμου χώρου. Σε αυτό το παράδειγμα, το κόκκινο δοχείο καταλαμβάνει διπλάσιο κατακόρυφο χώρο από το πράσινο.
φτερούγισμα στήλης flex

Ακολουθεί ο πλήρης κωδικός για αναφορά.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: const Text(
            'Flutter Example',
          ),
        ),
        body: Column(
          children: [
            Flexible(
              flex: 2,
              child: Container(
                color: Colors.red,
              ),
            ),
            Flexible(
              flex: 1,
              child: Container(
                color: Colors.green,
              ),
            ),
          ],
        ));
  }
}

Πότε να χρησιμοποιήσετε το Basic Flex

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

Παράδειγμα προηγμένου Flex

Για πιο σύνθετες διατάξεις όπου μπορεί να θέλετε να εισαγάγετε χώρο μεταξύ γραφικών στοιχείων ή να έχετε περισσότερο έλεγχο στα μεγέθη γραφικών στοιχείων, χρησιμοποιώντας Spacer και Expanded τα widgets μπορεί να είναι πολύ χρήσιμα.

Ο κώδικας

Column(
  children: [
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.blue,
      ),
    ),
    const Spacer(flex: 1),
    Expanded(
      flex: 2,
      child: Container(
        color: Colors.orange,
      ),
    ),
  ],
)

Επεξήγηση κώδικα

  • Διευρυμένο γραφικό στοιχείο: Αυτό το γραφικό στοιχείο κάνει το παιδί να καταλαμβάνει όλο τον διαθέσιμο χώρο. Εάν δεν παρέχεται συντελεστής ευκαμψίας, ορίζεται από προεπιλογή 1.
  • Γραφικό στοιχείο Spacer: Είναι σαν ένα αόρατο Container που μπορεί να πιάσει συγκεκριμένο χώρο. Εδώ, το Spacer καταλαμβάνει τόσο κατακόρυφο χώρο όσο το μπλε δοχείο.
  • Συνδυασμός Widgets: Αυτό το παράδειγμα δείχνει πώς γίνεται ο συνδυασμός Spacer και Expanded γραφικά στοιχεία για τη δημιουργία πιο σύνθετων διατάξεων. Το πορτοκαλί δοχείο καταλαμβάνει διπλάσιο κατακόρυφο χώρο σε σύγκριση με το μπλε δοχείο ή το διαχωριστικό.
χρησιμοποιώντας flex στη στήλη flutter

Πότε να χρησιμοποιήσετε το Advanced Flex

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

Η ιδιότητα flex σε α Column επιτρέπει τον ισχυρό έλεγχο της διάταξής σας στο Flutter. Είτε πρόκειται για ένα απλό σχέδιο χρησιμοποιώντας Flexibleή χρειάζεστε προηγμένο έλεγχο χρησιμοποιώντας Expanded και Spacerη κατανόηση του flex μπορεί να είναι ο καλύτερος φίλος σας στη σχεδίαση διεπαφής χρήστη.

Bir cevap yazın