Πώς να γεμίσετε τον υπολειπόμενο χώρο στη στήλη Flutter

Γεια, προγραμματιστές Flutter! Μερικές φορές, ενώ εργάζεστε με στήλες, μπορεί να έχετε γραφικά στοιχεία ορισμένων διαστάσεων και ίσως θέλετε να γεμίσετε τον υπόλοιπο χώρο με κάτι άλλο.

Σε αυτήν την ανάρτηση ιστολογίου, θα εξερευνήσουμε πώς να κάνετε ένα παιδί α Column widget συμπληρώστε τον υπόλοιπο διαθέσιμο χώρο.

Μέθοδος 1: Χρησιμοποιήστε το διευρυμένο γραφικό στοιχείο

Ο κώδικας

Column(
  children: [
    const Text('First Child'),
    Expanded(
      child: Container(
        color: Colors.green,
      ),
    ),
    const Text('Third Child'),
  ],
)

Εξήγηση

• Στήλη: Όπως πάντα, ξεκινάμε με α Column widget για να κρατάμε τα παιδιά μας.
• Γραφικά στοιχεία κειμένου: Αυτά λειτουργούν ως παιδιά σταθερού μεγέθους.
• Αναπτυγμένος: Τυλίγουμε το δικό μας Container με ένα Expanded widget.
• Δοχείο: Αυτό είναι το widget που θα γεμίσει τον υπόλοιπο χώρο.

Σε αυτό το παράδειγμα, το Container τυλιγμένο στο Expanded Το widget θα γεμίσει όλο τον διαθέσιμο χώρο μεταξύ των δύο Text widgets.

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

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: [
            const Text('First Child'),
            Expanded(
              child: Container(
                color: Colors.green,
              ),
            ),
            const Text('Third Child'),
          ],
        ));
  }
}

Μέθοδος 2: Χρησιμοποιήστε το γραφικό στοιχείο Spacer

Ο κώδικας

const Column(
  children: [
    Text('First Child'),
    Spacer(
      flex: 1,
    ),
    Text('Third Child'),
  ],
)

Εξήγηση

• Γραφικά στοιχεία στήλης και κειμένου: Ξεκινάμε με παρόμοιο τρόπο με α Column και δύο Text widgets ως παιδιά.
• Αραιώνων: Αυτό το γραφικό στοιχείο γεμίζει τον διαθέσιμο χώρο μέσα σε ένα Column ή Row.
• Καλώδιο: Ο flex Η ιδιότητα μπορεί να ρυθμιστεί για να ελέγχεται ο χώρος Spacer θα πρέπει να απασχολεί σε σχέση με άλλα Spacer widgets.

Σε αυτό το παράδειγμα, το Spacer θα καταλάβει όλο το χώρο μεταξύ των δύο Text widgets.

Σύγκριση

• Ελεγχος: Expanded σας δίνει περισσότερο έλεγχο στο widget που γεμίζει τον χώρο, επιτρέποντας περισσότερη προσαρμογή.
• Απλότητα: Spacer είναι ένας πιο απλός τρόπος για να γεμίσετε απλά τον υπόλοιπο χώρο χωρίς να τοποθετήσετε ένα widget εκεί.

Ορίστε το! Συμπλήρωση του υπόλοιπου χώρου σε Flutter Column μπορεί να γίνει με δύο βασικούς τρόπους: χρησιμοποιώντας το Expanded widget για να γεμίσετε χώρο με ένα συγκεκριμένο widget ή χρησιμοποιώντας το Spacer widget για να καταλάβει τον υπόλοιπο χώρο.

Και οι δύο μέθοδοι έχουν τα πλεονεκτήματά τους, οπότε μη διστάσετε να επιλέξετε αυτή που ταιριάζει καλύτερα στις ανάγκες σας!