codestory

Die Anleitung zu Flutter EdgeInsetsGeometry

View more Tutorials:

Folge uns auf unserer fanpage, um jedes Mal benachrichtigt zu werden, wenn es neue Artikel gibt. Facebook

1- Flutter EdgeInsetsGeometry

EdgeInsetsGeometry wird verwendet, um einen inner padding oder outer padding für ein Widget zu erstellen.
In der Informatik wird der Begriff "margin" anstelle der  "outer padding", und der Begriff "padding" anstelle der "inner padding" verwendet.
Schauebn wir uns diese einfache Abbildung an, ein Widget Container vor und nach dem Hinzufügen von "outer padding" und "inner padding":
Die Klasse EdgeInsetsGeometry ist eine abstrakte Klasse und kann daher nicht direkt verwendet werden. Das hängt von der Situation ab, in der Sie die Unterklasse EdgeInsets oder EdgeInsetsDirectional verwenden können.
  • TODO Link?

2- EdgeInsets

Mit EdgeInsets können Sie die outer padding (oder inner padding) basierend auf den visuellen Parametern left, top, right, bottom erstellen. Es hängt von der Textrichtung nicht.
Beispielsweise verwenden Sie EdgeInsets, um eine "Outer padding" (margin) mit den Parameter (left, top, right, bottom) = (90, 70, 50, 30) zu erstellen:

Container(
    margin: EdgeInsets.fromLTRB(90, 70, 50, 30),
    decoration: BoxDecoration(
      color: Colors.greenAccent,
      border: Border.all(color: Colors.blueGrey),
    ),
    child: Text(
        "Hi There!",
        style: TextStyle(fontSize: 45)
    )
)

3- EdgeInsetsDirectional

EdgeInsetsDirectional hilft beim Erstellen vom outer padding (oder inner padding) basierend auf den Parameter start, top, end, bottom. Die beiden Parameter start und end hängen von der Textrichtung ab.
Speziell:
  • Wenn die Textrichtung "von links nach rechts" ist, entspricht "start" "left" und "end" "right".
  • Umgekehrt wenn die Textrichtung "von rechts nach links" ist, entspricht "start" "right" und "end" "left".
Beispielweise verwenden Sie EdgeInsetsDirectional ein "Outer padding" (margin) mit den Parametern (start, top, end, bottom) = (150, 70, 50, 30) zu erstellen. Abhängig von der Textrichtung erhalten Sie zwei verschiedenen Ergebnisse:

textDirection = TextDirection.rtl (Right to Left):

main.dart (ex4)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'o7planning.org',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: MyHomePage()
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("Flutter EdgeInsetsGeometry Example")
        ),
        body: Directionality (
            textDirection: TextDirection.rtl,
            child:  Row (
              children: [
                Container (
                    margin: EdgeInsetsDirectional.fromSTEB(150, 70, 50, 30),
                    child:Text(
                        "الانتخابات الأمريكية في 2020",
                        style: TextStyle(fontSize: 18)
                    )
                )
              ],
            )
        )
    );
  }
}
  • TODO Link?

View more Tutorials:

Vielleicht bist du interessiert

Das sind die Online-Courses außer der Website o7planning, die wir empfehlen. Sie können umsonst sein oder Discount haben.