Во флаттере есть возможность нарисовать вертикальную линию между компонентами, как на картинке.
Флатер - вертикальный разделитель
Ответ 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 простых способа для них обоих.
Вертикальные разделители:
VerticalDivider()
Container( width: 1, height: double.maxFinite, color: Colors.grey, )
Горизонтальные разделители:
Divider()
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.