flutter 未显示垂直分隔线

hof1towb  于 2022-12-14  发布在  Flutter
关注(0)|答案(5)|浏览(274)

我尝试使用VerticalDivider小部件来分隔Row中的项目。Here是整个主体。

数据列:

Row(
  children: <Widget>[
    Text('420 Posts', style: TextStyle(color: Color(0xff666666)),),
    VerticalDivider(
      thickness: 2,
      width: 20,
      color: Colors.black,
    ),
    Text('420 Posts', style: TextStyle(color: Color(0xff666666)),)
  ],
),
zphenhs4

zphenhs41#

IntrinsicHeight Package 您的Row

IntrinsicHeight(
  child: Row(
    children: <Widget>[
      Text('420 Posts', style: TextStyle(color: Color(0xff666666)),),
      VerticalDivider(
        thickness: 2,
        width: 20,
        color: Colors.black,
      ),
      Text('420 Posts', style: TextStyle(color: Color(0xff666666)),)
    ],
  ),
)
vwkv1x7d

vwkv1x7d2#

VerticalDivider需要高度才能正确工作,请将其与定义了高度参数的SizedBox或等效项一起使用。
示例:

SizedBox(
   height: 40
   child: VerticalDivider(
      thickness: 2,
      width: 20,
      color: Colors.black,
   ),
)
93ze6v8z

93ze6v8z3#

您还可以将行换行到指定高度容器中

bn31dyow

bn31dyow4#

IntrinsicHeight Package 您的row,或指定row小工具的高度
使用固有高度的示例:

IntrinsicHeight(
  child: Row(
    children: const [
      YourWidget1(),
      VerticalDivider(
        color: Colors.red,
      ),
      YourWidget2()
    ],
  ),
),

具有固定高度的示例:

SizedBox(
  height: 40,
  child: Row(
    children: const [
      YourWidget1(),
      VerticalDivider(
        color: Colors.red,
      ),
      YourWidget2()
    ],
  ),
),
wyyhbhjk

wyyhbhjk5#

当您在“行,换行”小部件中添加“垂直分隔线”时,它可能由于高度变化而无法显示。主要原因是“行/换行”小部件的父小部件高度不受限制。因此,请使用固定高度,如Container或IntrinsicHeight

相关问题