codestory

Die Anleitung zu Flutter Positioned

View more Tutorials:

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

1- Positioned

Widget Positioned wird benutzt um einen Unterwidget eines Stack zu positionieren.
Positioned wird nur wie eine direkt Untergeordnete Widget (oder Nachfrage) eines Stack verwendet. Auf dem Pfad vom Positioned zum Stack besteht es aus die Typen von StatelessWidget oder StatefulWidget. Die anderen Widget wird nicht erlaubt werden (Z.B RenderObjectWidget).
Positioned constructor

const Positioned(
    {Key key,
    double left,
    double top,
    double right,
    double bottom,
    double width,
    double height,
    @required Widget child}
)
Zum Beispiel:
(ex1)

SizedBox (
    width: double.infinity,
    height: double.infinity,
    child: Stack(
      alignment: Alignment.centerLeft,
      children: <Widget>[
        Positioned (
           left: 100,
          top: 70,
          child: Container(
            width: 200,
            height: 100,
            color: Colors.green,
          ),
        )
      ],
    )
)
Die Größe von Positioned und seiner Kinder sind immer gleich.
Sehen Sie sich an ein Beispiel an: Ein Positioned mit top und bottom änders als null zwingt, dass die Höhe des untergeordneten Widgets sich ändert, um dieser Einschränkungen zu entsprechen.
(ex2)

SizedBox (
    width: double.infinity,
    height: double.infinity,
    child: Stack(
      alignment: Alignment.centerLeft,
      children: <Widget>[
        Positioned (
          top: 100,
          bottom: 70,
          child: Container (
            width: 200,
            height: 30, // !!
            color: Colors.green,
          ),
        )
      ],
    )
)
Wenn alle drei Paramter left, right, width null sind, wird das Property Stack.alignment verwendet um die untergeordneten Widget horizontal zu positionieren. Wenn alle drei Paramter top, bottom, height  null sind, wird das Property Stack.alignment verwendet um das untergeordneten Widget vertikal zu positionieren.

2- Positioned.directional constructor

Positioned.directional wird benutzt um ein Positioned basierend auf die Richtung der Text zu erstellen.
Positioned.directional constructor

Positioned.directional(
  {Key key,
  @required TextDirection textDirection,
  double start,
  double top,
  double end,
  double bottom,
  double width,
  double height,
  @required Widget child}
)
Der Parameter textDirection ist zwinghaft und anders als null. Es akzeptiert den Wert TextDirection.ltr (Left to Right) oder TextDirection.rtl (Right to Left).
Wenn textDirection TextDirection.ltr ist, entsprechen die Parameter (start, end) (left, right). Umgekehrt entspricht (start, end) (right, left).

3- Positioned.fill constructor

Positioned.fill ist ein Konstruktor mit den Parameter left, right, top, bottom, deren Defaultwert 0 sind
Positioned.fill constructor

const Positioned.fill(
  {Key key,
  double left: 0.0,
  double top: 0.0,
  double right: 0.0,
  double bottom: 0.0,
  @required Widget child}
)

4- Positioned.fromRect constructor

Positioned.fromRect erstellt ein Objekt Positioned mit den durch Objekt Rect angegebenen Werten.
Positioned.fromRect constructor

Positioned.fromRect(
  {Key key,
  Rect rect,
  @required Widget child}
)
  • TODO Link?

5- Positioned.fromRelativeRect constructor

Positioned.fromRelativeRect erstellt ein Objekt Positioned mit den durch das Objekt RelativeRect angegebenen Werten.
Positioned.fromRelativeRect constructor

Positioned.fromRelativeRect(
  {Key key,
  RelativeRect rect,
  @required Widget child}
)

View more Tutorials: