Πώς να προσθέσετε περιθώριο στη στήλη στο Flutter

2
Πώς να προσθέσετε περιθώριο στη στήλη στο Flutter

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

Σε αυτήν την ανάρτηση ιστολογίου, θα βουτήξουμε βαθιά στην προσθήκη περιθωρίων σε ένα Column στο Flutter.

Γιατί Περιθώριο;

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

Προσθήκη περιθωρίου με χρήση του γραφικού στοιχείου κοντέινερ

Ένας από τους απλούστερους τρόπους για να προσθέσετε ένα περιθώριο στη στήλη σας είναι να το τυλίξετε σε ένα Container widget.

Container(
  margin: const EdgeInsets.all(20),
  child: const Column(
    children: [
      Text("Hello"),
      Text("World"),
    ],
  ),
)

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

περιθώριο στήλης πτερυγισμού

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

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(
          margin: const EdgeInsets.all(20),
          child: const Column(
            children: [
              Text("Hello"),
              Text("World"),
            ],
          ),
        ));
  }
}

Προσαρμογή με το EdgeInsets

Μπορεί να θέλετε διαφορετικά περιθώρια σε διαφορετικές πλευρές σας Column. EdgeInsets παρέχει μεθόδους όπως only για να το προσαρμόσετε στις ανάγκες σας.

Container(
  margin: const EdgeInsets.only(top: 20, left: 15),
  child: const Column(
    // Your widgets here
  ),
)

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

Παράδειγμα πραγματικού κόσμου

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

Container(
  margin: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
  child: Column(
    children: [
      CircleAvatar(
        // Profile picture here
      ),
      SizedBox(height: 10),
      Text("Username"),
      Text("Bio"),
    ],
  ),
)

Σε αυτό το παράδειγμα, χρησιμοποιήσαμε EdgeInsets.symmetric για να προσθέσετε εύκολα οριζόντια και κάθετα περιθώρια.

Προσθήκη περιθωρίου στο α Column στο Flutter είναι αρκετά απλό. Μπορείτε να χρησιμοποιήσετε α Containerεπιλέξτε ένα Padding widget ή πηγαίνετε all-in με EdgeInsets για προσαρμοσμένη απόσταση. Κάθε μέθοδος έχει τα προνόμιά της και η επιλογή εξαρτάται σε μεγάλο βαθμό από τις συγκεκριμένες ανάγκες σας.

Bir cevap yazın