Как добавить вертикальный разделитель между виджетом в столбце во Flutter?
Добрый день.
Я просматривал этот веб-сайт о том, как добавить вертикальный разделитель между виджетами в столбце во Flutter? но я ничего не получил.
Я уже делаю горизонтальный разделитель. но когда я пытаюсь сделать вертикальный разделитель между двумя объектами (текст | изображение), я ничего не получаю.
вот код:
Row(children: <Widget>[
Expanded(
child: new Container(
margin: const EdgeInsets.only(left: 10.0, right: 20.0),
child: Divider(
color: Colors.black,
height: 36,
)),
),
Text("OR"),
Expanded(
child: new Container(
margin: const EdgeInsets.only(left: 20.0, right: 10.0),
child: Divider(
color: Colors.black,
height: 36,
)),
),
]),
код выше для горизонтального
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Row(
children: <Widget>[
Image.asset('images/makanan.png', width: 30,),
Text('Diskon 20%', style: TextStyle(fontSize: 5, color: Colors.green),)
],
),
VerticalDivider(
color: Colors.red,
width: 20,
),
Row(
children: <Widget>[
Image.asset('images/makanan.png', width: 30,),
Text('Diskon 20%', style: TextStyle(fontSize: 5, color: Colors.green),)
],
),
],
),
код выше я делаю для вертикального делителя. но не удалось.
Нужна ваша помощь, Спасибо.
хорошо, спасибо @AndroidTeam за предложение. Я свяжу это.
works nicely. arigatou gozaimasu :)
Ответы 6
Попробуйте заменить
VerticalDivider(color: Colors.red, width: 20)
с участием
Container(height: 80, child: VerticalDivider(color: Colors.red))
Ок вот ответ.
меня устраивает. Спасибо, мистер @Android Team и мистер @sunxs за помощь :)
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Row(
children: <Widget>[
Image.asset('images/makanan.png', width: 30,),
Text('Diskon 20%', style: TextStyle(fontSize: 5, color: Colors.green),)
],
),
Container(height: 80, child: VerticalDivider(color: Colors.red)),
Row(
children: <Widget>[
Image.asset('images/makanan.png', width: 30,),
Text('Diskon 20%', style: TextStyle(fontSize: 5, color: Colors.green),)
],
),
Container(height: 80, child: VerticalDivider(color: Colors.red)),
Row(
children: <Widget>[
Image.asset('images/makanan.png', width: 30,),
Text('Diskon 20%', style: TextStyle(fontSize: 5, color: Colors.green),)
],
),
],
),
Попробуй это:
IntrinsicHeight(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text('Foo'),
VerticalDivider(),
Text('Bar'),
VerticalDivider(),
Text('Baz'),
],
))
Это работает, но может быть очень дорогостоящим, этот виджет может привести к макету, который составляет O (N²) в глубине дерева.
Это единственный способ, при котором не нужно указывать высоту вручную, поэтому я думаю, стоит попробовать, если нет другого решения.
можешь попробовать:
Container(
color: Colors.grey,
height: 30,
width: 1,
),
Это сработало для меня! :))
Используйте сэмплер кода {} и поместите этот контейнер (цвет: Colors.grey, высота: 30, ширина: 1,) внутри него, чтобы ваш ответ был более удобочитаемым для других. Спасибо.
вы можете либо использовать
VerticalDivider(
thickness: 1,
color:Colors.black
),
или
Container(
height: 30,
width: 1,
color: Colors.black
)
Самый оптимальный способ — поместить вертикальный разделитель внутрь SizedBox.
SizedBox(
height: 80,
child: VerticalDivider(color: primaryColor),
)
Используйте контейнер вместо виджета VerticalDivider