Флатер - вертикальный разделитель

Ответ 1

Не так далеко, как я знаю. Однако создать его довольно просто - если вы посмотрите на источник Flutter Divider, вы увидите, что это просто размерный блок с одной (нижней) рамкой. Вы можете сделать то же самое, но с измененными размерами.

Обновление: реализация VerticalDivider была объединена с командой флаттера. Посмотрите документы, но им очень просто пользоваться - просто поместите его между двумя другими элементами подряд.

Ответ 2

По состоянию на 10 дней назад, flutter объединил реализацию VerticalDivider. Очень скоро он будет доступен в канале по умолчанию, но сейчас вам нужно переключиться на канал dev, чтобы использовать его: flutter channel dev.

Вот пример того, как его использовать:

IntrinsicHeight(
    child: new Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    Text('Foo'),
    VerticalDivider(),
    Text('Bar'),
    VerticalDivider(),
    Text('Baz'),
  ],
))

Ответ 3

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),
    );
  }
}

Ответ 4

Пробовал с VerticalDivider() но не может получить разделитель. Я решил это с

 Container(color: Colors.black45, height: 50, width: 2,),

Ответ 5

Есть 2 простых способа для них обоих.

Вертикальные разделители:

1. VerticalDivider()
   

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

Горизонтальные разделители:

1. Divider()
   

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

Ответ 6

Как предположил @rwynnchristian, это, кажется, самое простое решение IMO. Просто оставив код здесь:

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

Ответ 7

добавьте этот метод в любом месте.

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

теперь оберните содержимое в контейнер

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

Ответ 8

Попробуйте RotatedBox в сочетании с делителем, чтобы он был вертикальным, RotatedBox - это виджет флаттера, который автоматически поворачивает его на основе свойства quarterTurn, которое вы должны указать. Перейдите сюда, чтобы получить подробное объяснение. Https://docs.flutter.io/flutter/widgets/RotatedBox-class.html.