颤振 - 垂直分频器

Question

在颤动中,是否可以选择在组件之间绘制垂直线,如图中所示.

Answer 1

他们都有两种简单的方法。

垂直分隔线：

1. VerticalDivider()
   

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

水平分隔线：

1. Divider()
   

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

Answer 2

据我所知。但是，创建一个很简单-如果查看Flutter的Divider的来源，您会发现它只是一个SizedBox带有单个（底部）边框的。您可以执行相同的操作，但尺寸要切换。

更新（2018年10月4日）：Flutter团队VerticalDivider已合并一个实现。查看文档，但使用起来非常简单-只需将其连续放在其他两个项目之间即可。

Answer 3

截至10天前,flutter 合并了一个VerticalDivider实现.它很快就会在默认频道中出现,但是现在你必须切换到开发频道才能使用它:flutter channel dev.

以下是如何使用它的示例:

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

Answer 4

尝试将其包裹在Container具有一定高度的内部

Container(height: 80, child: VerticalDivider(color: Colors.red)),

Answer 5

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

Answer 6

只需将您的 Row 包装在 IntrinsicHeight 小部件中，您就应该得到所需的结果：

IntrinsicHeight(
    child: Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    Text('Name'),
    VerticalDivider(),
    Text('Contact'),
  ],
))

Answer 7

尝试过VerticalDivider()但无法获得任何分隔符。我解决了

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

Answer 8

您可以使用厚度为 1 的垂直分隔线。

          VerticalDivider(
            thickness: 1,
            color: Color(0xFFF6F4F4),
          ),

如果您看不到垂直分隔线，请使用IntrinsicHeight小部件包裹该行。