Flutter隐藏溢出的小部件

ssm49v7z  于 2023-03-24  发布在  Flutter
关注(0)|答案(1)|浏览(294)

我有一个行窗口小部件,它的子窗口宽度可变,可以有条件地显示,我按优先级对行项目进行排序。如果没有足够的宽度来查看所有项目(小屏幕尺寸),我想隐藏会溢出的项目(因为它们的设计优先级较低)。
例如:

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。我如何为其他小部件做同样的事情?
使用裁剪器将裁剪溢出的部分,但我想隐藏整个溢出的小部件。
你能告诉我正确的方向吗?谢谢。

bqf10yzr

bqf10yzr1#

您可以使用媒体查询将每个子部件 Package 为大小框和给定的动态宽度,然后检查这些部件的总和是否与容器的宽度相对应。
如果没有,那么相应地隐藏最后一个小部件。您可以将这些小部件添加到List中,以便更好地以编程方式管理插入/删除,或者使用标志来相应地隐藏/显示小部件,并通过动态更改行对齐方式来管理相应的空间。

List<Widgets> = [
SizedBox(
          width: widthA,
          child: WidgetA(),
        ),
         SizedBox(
          width: widthB,
          child: WidgetB(),
        ),
         SizedBox(
          width: widthC,
          child: WidgetC(),
         ),
];
on initstate

for loop ---> 
if(widthA+widthB+widthC > deviceWidth){
    listWidgets.remove(2);
}
.... other conditions such as widthA + width B and so on..

Container(
   width: deviceWidth,
   child: Row(
     children: listWidgets,
   ),
),

这不是一个适当的代码,但粗糙的一个,以获得一个清晰的我们如何可以隐藏的小部件取决于屏幕大小。

相关问题