Πώς να κεντράρετε τα παιδιά οριζόντια στη στήλη Flutter

0
Πώς να κεντράρετε τα παιδιά οριζόντια στη στήλη Flutter

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

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

Προσέγγιση 1: Χρησιμοποιήστε το SizedBox και το MediaQuery

Ο κώδικας

SizedBox(
  width: MediaQuery.of(context).size.width,
  child: const Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Text('First Child'),
      Text('Second Child'),
    ],
  )
)

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

  • SizedBox: Ο SizedBox Το widget σάς βοηθά να δώσετε ένα συγκεκριμένο μέγεθος στο παιδί του. Σε αυτήν την περίπτωση, το χρησιμοποιούμε για να ορίσουμε το πλάτος.
  • MediaQuery: Ο MediaQuery Το widget μας βοηθά να προσδιορίσουμε το πλάτος της οθόνης. Ρυθμίσαμε το SizedBox πλάτος για να καταλαμβάνει ολόκληρο το πλάτος της οθόνης.
  • Στήλη και CrossAxis Alignment: Μεσα στην SizedBoxπροσθέτουμε α Column και ρυθμίστε το CrossAxisAlignment προς την center να κεντράρουν τα παιδιά οριζόντια.
κυματίστε το κέντρο της στήλης οριζόντια

Προσέγγιση 2: Χρησιμοποιήστε το δοχείο με ευθυγράμμιση

Ο κώδικας

Container(
  alignment: Alignment.center,
  child: const Column(
    children: [
      Text('First Child'),
      Text('Second Child'),
    ],
  )
)

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

  • Δοχείο: Χρησιμοποιούμε α Container να τυλίξει το Column. ο Container Το widget επιτρέπει μεγαλύτερη ελευθερία όσον αφορά την ευθυγράμμιση και το μέγεθος.
  • Ευθυγραμμία: Ρυθμίσαμε το alignment ιδιοκτησία του Container προς την Alignment.center. Αυτό ευθυγραμμίζει το παιδί Column και τα παιδιά του στο κέντρο.
  • Στήλη και παιδιά: Τοποθετούμε α Column μεσα στην Container και προσθέστε τα παιδιά του. Αυτά τα παιδιά θα κληρονομήσουν την ευθυγράμμιση από το Container.

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

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(
            alignment: Alignment.center,
            child: const Column(
              children: [
                Text('First Child'),
                Text('Second Child'),
              ],
            )));
  }
}

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

Bir cevap yazın