我有一个行窗口小部件,它的子窗口宽度可变,可以有条件地显示,我按优先级对行项目进行排序。如果没有足够的宽度来查看所有项目(小屏幕尺寸),我想隐藏会溢出的项目(因为它们的设计优先级较低)。
例如:
Container(
width: 200, // screen size
child: Row(
children: [
if (userCan1) Text("test"),
if (userCan2) Icon(Icons.circle),
if (userCan3) Container(width: 300),
if (userCan4) Placeholder(),
],
),
);
例如,如果Container width为200,则只有足够的空间来查看Text("test")
和Icon(Icons.circle)
,其余的子项应该被隐藏。
我尝试使用layoutBuilder来获取行的可用宽度,但我如何才能知道所有子元素的宽度,以便计算它们是否可见?
当没有足够的空间来呈现整个文本时,Like文本小部件将使用TextOverflow。我如何为其他小部件做同样的事情?
使用裁剪器将裁剪溢出的部分,但我想隐藏整个溢出的小部件。
你能告诉我正确的方向吗?谢谢。
1条答案
按热度按时间bqf10yzr1#
您可以使用媒体查询将每个子部件 Package 为大小框和给定的动态宽度,然后检查这些部件的总和是否与容器的宽度相对应。
如果没有,那么相应地隐藏最后一个小部件。您可以将这些小部件添加到List中,以便更好地以编程方式管理插入/删除,或者使用标志来相应地隐藏/显示小部件,并通过动态更改行对齐方式来管理相应的空间。
这不是一个适当的代码,但粗糙的一个,以获得一个清晰的我们如何可以隐藏的小部件取决于屏幕大小。