Flattern Vertikalen Teiler

In flattern, ist es eine option, zeichnen Sie eine vertikale Linie zwischen den Komponenten wie im Bild.

InformationsquelleAutor Praveen Kumar | 2018-03-20

17

Nicht soweit ich weiß. Es ist jedoch relativ einfach zu schaffen, wenn man sich die Quelle für Flattern ist Teiler du wirst sehen, dass es einfach ist eine große box mit einer einzelnen (unteren) Grenze. Sie könnte das gleiche tun, aber mit den Abmessungen geschaltet.

Update: ein VerticalDivider Umsetzung wurde zusammengefasst durch das flattern team. Überprüfen Sie heraus die docs aber es ist sehr einfach zu verwenden - schließen Sie ihn einfach zwischen zwei andere Elemente in einer Zeile.
- Sorry habe nicht die chance bekommen zu schreiben, ein Beispiel, aber ich nehme an, Sie haben es mittlerweile herausgefunden. Ich habe ein feature-request für diese hier.
- Ich habe versucht, zu verwenden VerticalDivider als Trennzeichen für Zeilen-widget und... ich sehe es nicht! 🙁
- das könnte sein, lohnt sich eine neue Frage, aber stellen Sie sicher, dass etwas in der Zeile hat tatsächlich etwas an Höhe, und legen Sie die Zeile crossAxisAlignment zu Strecken.
InformationsquelleAutor rmtmckenzie
19

Als 10 Tage her, flattern zusammengeführt hat eine VerticalDivider Umsetzung. Es werden in der Standard-Kanal sehr bald, aber für jetzt haben Sie, um zu wechseln, um den dev-channel zu verwenden: flutter channel dev.

Hier ist ein Beispiel, wie es zu benutzen:
```
IntrinsicHeight(
    child: new Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    Text('Foo'),
    VerticalDivider(),
    Text('Bar'),
    VerticalDivider(),
    Text('Baz'),
  ],
))
```
InformationsquelleAutor jgillich

import 'package:flutter/material.dart';
class VerticalDivider extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      height: 30.0,
      width: 1.0,
      color: Colors.white30,
      margin: const EdgeInsets.only(left: 10.0, right: 10.0),
    );
  }
}

Sieht aus wie dieser Ansatz funktioniert nur, wenn der Teiler zwischen anderen Elementen. Sie besetzen alle zur Verfügung stehenden Bereich in der Zeile, wenn es das einzige element in Ihr.

InformationsquelleAutor Victor Tong

Gibt es 2 einfache Möglichkeiten, für beide von Ihnen.

Vertikale Teiler:

```
VerticalDivider()
```

Container(
  width: 1,
  height: double.maxFinite,
  color: Colors.grey,
)

Horizontale Teiler:

```
Divider()
```

Container(
  height: 1,
  width: double.maxFinite,
  color: Colors.grey,
)

InformationsquelleAutor CopsOnRoad

2

Versucht mit VerticalDivider() aber nicht bekommen Teiler. Ich Löste es mit
```
 Container(color: Colors.black45, height: 50, width: 2,),
```
- Die gleiche Sache. Ich fügte hinzu, VerticalDivider als Kind für Zeile widget und ich habe es nicht gesehen.
InformationsquelleAutor yubaraj poudel

Als @rwynnchristian vorgeschlagen, dies scheint die einfachste Lösung IMO. Nur aus dem code hier:

import 'package:flutter/material.dart';
class VerticalDivider extends StatelessWidget {
  @override
  Widget build(BuildContext context) => RotatedBox(
    quarterTurns: 1,
    child: Divider(),
  );
}

InformationsquelleAutor Dork

fügen Sie diese Methode überall.

  _verticalDivider() => BoxDecoration(
      border: Border(
        right: BorderSide(
          color: Theme.of(context).dividerColor,
          width: 0.5,
        ),
      ),
    );

nun wickeln Sie Ihre Inhalte in container

Container(
  decoration: _verticalDivider(),
  child: //your widget code
);

InformationsquelleAutor Nomi

0

Versuchen RotatedBox in Kombination mit einem Teiler, um es vertikal, RotatedBox ist ein widget flattern, die automatisch dreht, es ist Kind auf der Grundlage der quarterTurn Eigenschaft, die Sie angeben müssen. Kopf über, um hier für eine detaillierte Erklärung https://docs.flutter.io/flutter/widgets/RotatedBox-class.html

InformationsquelleAutor rwynn christian

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.