Flutter

Question

在 Flutter 中，是否可以选择在组件之间绘制垂直线，如图所示。

Answer 1

据我所知没有。但是，创建一个非常简单 — 如果您查看 Flutter's Divider 的源代码，您会发现它只是一个带有单个（底部）边框的 SizedBox。您可以做同样的事情，但要切换维度。

Update（2018 年 10 月 4 日）：VerticalDivider 实施已经 merged in by the Flutter team. Check out the docs 但它使用起来非常简单——只需将它放在其他两个之间连续项目。

注意：如果您在 Row 小部件中使用 VerticalDivider 作为分隔符，则将 Row 换成 IntrinsicHeight ，Container 或 SizedBox 否则 VerticalDivider 不会出现。对于 Container 和 SizedBox 小部件，您需要定义 height.

Answer 2

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 3

尝试将 RotatedBox 与分隔线结合使用以使其垂直，RotatedBox 是一个 flutter 小部件，可根据您必须指定的 quarterTurn 属性自动旋转其子项。前往此处查看详细说明 https://docs.flutter.io/flutter/widgets/RotatedBox-class.html

Answer 4

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

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

Answer 5

在任何地方添加这个方法。

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

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

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

Answer 6

截至 10 天前，flutter has merged 实现了 VerticalDivider。它很快就会在默认频道中可用，但现在你必须切换到开发频道才能使用它：flutter channel dev.

这是一个如何使用它的例子：

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

Answer 7

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

解决了它

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

Answer 8

垂直分隔线：

作为直系子女：

VerticalDivider(
  color: Colors.black,
  thickness: 2,
)

在Row:

IntrinsicHeight(
  child: Row(
    children: [
      Text('Hello'),
      VerticalDivider(
        color: Colors.black,
        thickness: 2,
      ),
      Text('World'),
    ],
  ),
)

水平分隔线：

作为直系子女：

Divider(
  color: Colors.black,
  thickness: 2,
)

在Column:

IntrinsicWidth(
  child: Column(
    children: [
      Text('Hello'),
      Divider(
        color: Colors.black,
        thickness: 2,
      ),
      Text('World'),
    ],
  ),
)

Answer 9

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

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

Answer 10

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

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

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

Answer 11

使用 Container 作为分隔线很容易，用 IntrinsicHeight() 包裹你的行

          IntrinsicHeight(
                child: Row(
                  children: [
                    Text(
                      'Admissions',
                      style: TextStyle(fontSize: 34),
                    ),
                    Container(width: 1, color: Colors.black), // This is divider
                    Text('another text'),
                  ],
                ),

Answer 12

您需要用 IntrinsicHeight 小部件包装 VerticalDivider() 小部件。否则，垂直分隔线将不会显示。要在顶部和底部增加一些填充，您可以添加缩进。

IntrinsicHeight(
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Flexible(
                      child: VerticalDivider(
                        thickness: 0.8,
                        color: Colors.grey,
                      ),
                    ),
                    Flexible(
                      child: Text(
                        "Random Text",
                        style: TextStyle(
                            fontSize: 12,
                            color: AppColor.darkHintTextColor,),
                      ),
                    ),
                  ],
                ),
              )

Answer 13

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

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

Flutter - 垂直分隔线和水平分隔线

Flutter - Vertical Divider and Horizontal Divider

dart

flutter-layout

垂直分隔线：

水平分隔线：