我试图实现一个自定义的导航抽屉使用Flutter。我想附加退出选项到抽屉的底部。问题是注销选项上方的元素数量未知(从3到17)。
因此,如果这些小部件占用了抽屉的一半空间,那么注销选项将位于底部,如果它们太多,您必须滚动才能看到它们,那么注销选项将是最后一个。
我也尝试给予前两个选项一个绿色的背景颜色。你会向我推荐哪种widget树?我有一个关于ListView小部件的想法,它把小部件列表作为构造函数中的参数。
因此,我可以解决前两个项目的不同背景颜色。但我仍然不知道如何将注销选项附加到底部。在这种情况下,它在抽屉的底部,但它可能发生,其他选项将大于屏幕大小,在这种情况下,它应该放在整个列表的底部。
编辑:我在问题中添加了一个设计。注销选项称为Odhlášení。在这种情况下,它在抽屉的底部,但它可能发生,其他选项将大于屏幕大小,在这种情况下,它应该放在整个列表的底部。
设计:
2条答案
按热度按时间xe55xuns1#
您可以简单地使用ListView来管理“17”导航选项。将此
ListView
Package 在Column中。ListView
将是Column
的第一个子节点(第二个子节点),因此,在底部放置的将是您的注销操作。如果您在
ListView
中使用透明的小部件(如ListTile)来显示导航选项,您可以简单地将其 Package 在Container中。Container
,除了许多其他小部件之外,还允许您使用color
属性设置新的背景色。使用这种方法,小部件树将如下所示:
LogOutButton
坚持到ListView
的末尾,你需要做两件事:1.将Expanded替换为Flexible
1.在
ListView
中设置shrinkWrap: true
ListView
是否超出屏幕并可滚动。为了做到这一点,我写了这个简短的片段:
如果
ListView
超出其限制,则返回true。现在,我们可以根据isListViewLarge
的结果刷新视图的状态。下面是一个完整的代码示例。独立代码示例(更新2:间隔注销按钮直到大列表):
独立代码示例(更新1:粘滞注销按钮):
独立代码示例(旧:粘在底部):
oxcyiej72#
我知道我的回答可能有点晚了,但这是为其他人寻找另一个简单的意见在同一问题上与一个简单的小部件意味着。
简短回答:
您可以使用Spacer小部件自动填充剩余空间,而无需将小部件放在不同的层上。
长答案:
你仍然可以使用一个高度为double.maxFinite的SizedBox(这是我想到的第一件事),但它会将你的小部件抛出视口,并产生renderflex错误,所以在我们的场景中它不是那么好,我们不希望有任何错误。
或者您可以使用Stack小部件并在bottomCenter中对齐注销按钮,但我们需要添加更多的代码来维护。
因此,这些解决方案总是有一个陷阱。
结果
这是我抽屉的完整代码,请随意使用:
注意:有些人可能会觉得在单独的Map中分离名称,小部件和图标有点过分,但这是我的方式,因为当你有更多页面时,维护代码库变得非常痛苦,或者如果你想快速更改名称,图标或小部件,因为样式会碍事,你每次都必须滚动才能找到ListTile。
因此,如果您发现该结构对于您的场景来说有点多余,请随意编辑代码。
希望这有帮助:)
我在做这个简单的例子时使用了一些有用的软件包(如果你还没有机会在你的某个应用中使用它们):
下面是一个快速截图,向你展示我得到的结果。