Πώς να δημιουργήσετε στήλη πλήρους πλάτους στο Flutter

1
Πώς να δημιουργήσετε στήλη πλήρους πλάτους στο Flutter

Σε αυτήν την ανάρτηση ιστολογίου, εξετάζουμε ένα ουσιαστικό θέμα: πώς να δημιουργήσετε μια στήλη πλήρους πλάτους στο Flutter. Κάνοντας το δικό σας Column Το widget καταλαμβάνει ολόκληρο το πλάτος της οθόνης μπορεί να είναι ζωτικής σημασίας για τη δημιουργία διεπαφής χρήστη με απόκριση.

Χρησιμοποιήστε το CrossAxisAlignment.stretch

Τι είναι το CrossAxisAlignment.stretch;

CrossAxisAlignment.stretch είναι μια ιδιότητα που μπορεί να οριστεί στο Column widget. Εξασφαλίζει ότι τα παιδιά τεντώνονται οριζόντια για να γεμίσουν τη στήλη.

Παράδειγμα κώδικα

Δείτε πώς μπορείτε να το εφαρμόσετε:

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Text('First Child'),
    Text('Second Child'),
  ],
)

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

  • Γραφικό στοιχείο στήλης: Ξεκινάμε με α Column widget.
  • CrossAxisAlignment.stretch: Ο CrossAxisAlignment Έχει οριστεί stretch.
  • Παιδιά: Στη συνέχεια, προσθέτουμε τα παιδικά γραφικά στοιχεία μας. Ορίστε, δύο Text widgets.
  • Αποτέλεσμα: Κάθε παιδί θα καταλαμβάνει πλέον όλο το πλάτος της στήλης.

Χρησιμοποιήστε το Container ως γονέα με το MediaQuery

Παράδειγμα κώδικα

Μια εναλλακτική μέθοδος περιλαμβάνει το τύλιγμα του Column widget μέσα σε α Container και ρυθμίζοντας το πλάτος του χρησιμοποιώντας MediaQuery.

Container(
  width: MediaQuery.of(context).size.width,
  child: Column(
    children: [
      Text('First Child'),
      Text('Second Child'),
    ],
  ),
)

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

  • Δοχείο: Σε αυτή τη μέθοδο, ξεκινάμε τυλίγοντας το Column μέσα α Container.
  • MediaQuery: Ρυθμίσαμε το width απο Container χρησιμοποιώντας MediaQuery για να πάρετε όλο το πλάτος της οθόνης.
  • Στήλη και παιδιά: Μέσα σε αυτό Containerτοποθετούμε το δικό μας Column με τα παιδιά της.

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

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: Container(
          width: MediaQuery.of(context).size.width,
          child: const Column(
            children: [
              Text('First Child'),
              Text('Second Child'),
            ],
          ),
        ));
  }
}

Δημιουργία πλήρους πλάτους Column στο Flutter είναι απλό όταν γνωρίζετε τις μεθόδους. Μπορείτε να επιλέξετε CrossAxisAlignment.stretch για μια απλούστερη προσέγγιση ή χρήση α Container με MediaQuery για περισσότερο έλεγχο. Επιλέξτε αυτό που ταιριάζει καλύτερα στο έργο σας!

Bir cevap yazın