flutter - Flutter - 垂直分频器和水平分频器

Question

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

Answer 1

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

---

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

注意：如果您VerticalDivider在小部件中用作分隔符，则Row用 包裹Row，否则不会显示。对于和小部件，您需要定义.IntrinsicHeight ContainerSizedBoxVerticalDividerContainerSizedBoxheight

Answer 2

截至 10 天前，flutter已经合并了一个VerticalDivider实现。它将很快在默认频道中可用，但现在您必须切换到开发频道才能使用它：flutter channel dev.

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

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

Answer 3

垂直分隔线：

• 作为直子：

  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 4

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 5

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

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

Answer 6

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

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

Answer 7

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

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

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

Answer 8

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

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

Answer 9

在任何地方添加此方法。

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

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

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

Answer 10

使用容器作为分隔符很容易，将行包装在 IntrinsicHeight()

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

Answer 11

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

Answer 12

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

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