Flutter - 垂直分频器和水平分频器
Posted
技术标签:
【中文标题】Flutter - 垂直分频器和水平分频器【英文标题】：Flutter - Vertical Divider and Horizontal Divider 【发布时间】：2018-08-29 12:10:41 【问题描述】：在 Flutter 中，是否可以像在图像中一样在组件之间绘制垂直线。
【问题讨论】：
3 Vertical Divider Example 【参考方案1】：据我所知没有。但是，创建一个非常简单——如果您查看Flutter's Divider 的源代码，您会发现它只是一个带有单个（底部）边框的SizedBox。你可以做同样的事情，但要切换尺寸。
更新（2018 年 10 月 4 日）：VerticalDivider 已由 Flutter 团队实现为 merged in。查看docs，但它使用起来非常简单——只需将它放在连续的两个其他项目之间。
注意：如果您在Row 小部件中使用VerticalDivider 作为分隔符，则将Row 与IntrinsicHeight 、Container 或SizedBox 包装在一起，否则VerticalDivider 将不会显示向上。对于Container 和SizedBox 小部件，您需要定义height。
【讨论】：
我尝试使用 VerticalDivider 作为 in Row 小部件的分隔符......我没有看到它！ :( @AleksTi 这可能值得提出一个新问题，但请确保该行中的某些内容实际上具有一定高度并将该行的 crossAxisAlignment 设置为拉伸。Divider 和VerticalDivider 是如此令人失望的小部件......为什么不为两者都提供一个小部件，只是切换方向？它甚至可以包含对角线或任意方向分隔线...
文档说“垂直分隔线可用于水平滚动列表，例如 ListView”。我试过连续使用它，但它没有出现。没用的小部件：/
@kashlo 你能检查一下你的crossAxisAlignment 的设置吗？如果它设置为CrossAxisAlignment.center（这是默认设置），那么您的分隔线的高度将为零，因此不会显示。这有点不直观，但从布局的角度来看是有道理的。尝试设置crossAxisAlignment = CrossAxisAlignment.stretch，但请注意您可能必须将其余元素包装在中心中。【参考方案2】：
截至 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'),
],
))
【讨论】：
【参考方案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'),
],
),
)
【讨论】：
【参考方案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),
);
【讨论】：
看起来这种方法只有在分隔线放在其他元素之间时才有效。如果它是其中唯一的元素，它将占据该行中的所有可用区域。【参考方案5】：尝试将其包裹在Container 中，高度为
Container(height: 80, child: VerticalDivider(color: Colors.red)),
【讨论】：
【参考方案6】：尝试使用VerticalDivider()，但无法获得任何分隔符。我解决了它
Container(color: Colors.black45, height: 50, width: 2,),
【讨论】：
同样的事情。我将 VerticalDivider 添加为 Row 小部件的子项，但我没有看到它。【参考方案7】：您可以使用厚度为 1 的垂直分隔线。
VerticalDivider(
thickness: 1,
color: Color(0xFFF6F4F4),
),
如果您看不到垂直分隔线，请使用 IntrinsicHeight 小部件包裹该行。
【讨论】：
【参考方案8】：正如@rwynnchristian 所建议的，这似乎是 IMO 最简单的解决方案。把代码留在这里：
import 'package:flutter/material.dart';
class VerticalDivider extends StatelessWidget
@override
Widget build(BuildContext context) => RotatedBox(
quarterTurns: 1,
child: Divider(),
);
【讨论】：
【参考方案9】：将此方法添加到任何地方。
_verticalDivider() => BoxDecoration(
border: Border(
right: BorderSide(
color: Theme.of(context).dividerColor,
width: 0.5,
),
),
);
现在将您的内容包装在容器中
Container(
decoration: _verticalDivider(),
child: //your widget code
);
【讨论】：
【参考方案10】：使用 Container 做分隔线很简单，用 IntrinsicHeight() 包裹你的行
IntrinsicHeight(
child: Row(
children: [
Text(
'Admissions',
style: TextStyle(fontSize: 34),
),
Container(width: 1, color: Colors.black), // This is divider
Text('another text'),
],
),
【讨论】：
【参考方案11】：尝试将 RotatedBox 与分隔线结合使用以使其垂直，RotatedBox 是一个颤振小部件，它会根据您必须指定的 QuarterTurn 属性自动旋转它的子元素。到这里详细解释https://docs.flutter.io/flutter/widgets/RotatedBox-class.html
【讨论】：
【参考方案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,),
),
),
],
),
)
【讨论】：
【参考方案13】：只需将您的 Row 包装在 IntrinsicHeight 小部件中，您应该会得到所需的结果：
IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text('Name'),
VerticalDivider(),
Text('Contact'),
],
))
【讨论】：
以上是关于Flutter - 垂直分频器和水平分频器的主要内容，如果未能解决你的问题，请参考以下文章