颤振 - 垂直分频器

Question

在颤动中，是否可以选择在组件之间绘制垂直线，就像在图像中一样。

Answer 1

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 2

截至10天前，has merged陷入了VerticalDivider的实现。它将很快在默认通道中可用，但是现在您必须切换到dev通道才能使用它：flutter channel dev。

以下是使用方法的示例：

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

Answer 3

尝试将其包裹在Container内，高度为

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

Answer 4

据我所知。但是，创建一个非常简单 - 如果你查看Flutter's Divider的来源，你会发现它只是一个带有单个（底部）边框的大小的盒子。你可以做同样的事情但是换了尺寸。

更新：颤动团队VerticalDivider实施merged in。查看docs，但它非常简单易用 - 只需将其放在连续的其他两个项目之间。

Answer 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,
   )
   

Answer 6

正如@rwynnchristian所建议的那样，这似乎是IMO最简单的解决方案。只需将代码留在这里：

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

Answer 7

将此方法添加到任何地方。

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

现在将您的内容包装在容器中

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

Answer 8

将RotatedBox与分隔符结合使用以使其垂直，RotatedBox是一个颤动的小部件，它根据您必须指定的quarterTurn属性自动旋转它的子级。前往此处获取详细解释https://docs.flutter.io/flutter/widgets/RotatedBox-class.html

Answer 9

尝试过VerticalDivider()，但无法获得任何分隔符。我用

解决了

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

Answer 10

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

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

如果您不能设置垂直分隔线，请使用 IntrinsicHeight 小部件将行换行。