1

TL;DR:我可以让流在颤动中打开吗?

我有一个特定的 UI 需要不同风格的应用程序抽屉,不像普通的侧抽屉从左滑到主屏幕的顶部。设计更像是整个主屏幕向右移动,底部有一层作为侧边栏。

为了清楚起见,把它想象成不是抽屉在屏幕顶部并移动,相反的是我想要的。我希望主屏幕位于顶部,抽屉位于底部(就 z-index 而言)并且主屏幕移动。

我所做的是我创建了两个小部件,一个用于应用程序抽屉,另一个用于主屏幕,并使用堆栈小部件和一些动画,使其工作。为了注册用户关于他/她想要打开哪个屏幕的反馈,我使用流将数据从侧边栏小部件传递到主屏幕小部件,并将其存储在主屏幕的本地状态中,并显示需要显示的任何内容那。

我在下面附上代码:

这是我使用堆栈和动画使 UI 工作的主文件:

主文件

这就是我使用流注册用户反馈并将其发送到主屏幕的方式:

在此处输入图像描述

这就是我接收反馈并显示必须显示的页面的方式:

在此处输入图像描述

这就是我的流/块类的样子:

在此处输入图像描述

我的主要问题是关于方法,有没有更好的方法呢?我问这个是因为我知道流不应该保持打开状态,这会影响应用程序的性能。但是使用这种方法,我必须让它一直保持打开状态,因为用户应该能够在任何给定时间选择所需的页面。

在这种情况下保持流打开是正常的做法吗,你能告诉我一些情况,如果存在这种情况,流必须保持打开状态吗?(例如,我认为 autosuggest/search-as-you-type 可能一直在使用流,是这样吗?)。

4

2 回答 2

2

是的,您可以让流保持打开状态。但这会影响您的应用程序性能,并且在我看来,对于简单的回调操作来说,这是一种复杂的方法。这是我要做的:

** 在 Drawer 的页面中:// 添加回调参数

final Function(Widget w) onItemTap;

// 将回调添加到抽屉的构造函数

Drawer(this.onItemTap);

** 在抽屉的手势检测器中://在点击项目时,将此回调发送到您已实例化抽屉页面的页面。

onTap(){ widget.onItemTap( WidgetToShow() ) },

现在,当您在主屏幕的任何位置实例化抽屉类时,您有一个回调参数,您可以像这样使用:

Drawer( onItemTap:(Widget w){ 
// now you have your widget in the mainScreen, do as you want with it 
}  )

所以这是你最后的抽屉/菜单代码:

class Drawer extends StatefulWidget {
final Function(Widget w) onItemTap;
Drawer(this.onItemTap);
}
// ....
GestureDetector(
onTap: (){ return widget.onItemTap( WidgetToShow() ); },
),
// ...

这是您的主屏幕代码:

// ...
stack(
children:[
Drawer( onItemTap:(Widget w){ 
// now you have your widget in the mainScreen, do as you want with it 
}  ),
]
),
//...

希望有帮助:)

于 2020-05-15T14:00:02.553 回答
-1

简短的回答?是的,您可以让流保持打开状态。但这会影响您的应用程序性能,并且在我看来,对于简单的回调操作来说,这是一种复杂的方法。这是我要做的:

** 在 Drawer 的页面中:// 添加回调参数

final Function(Widget w) onItemTap;

// 将回调添加到抽屉的构造函数

Drawer(this.onItemTap);

** 在抽屉的手势检测器中://在点击项目时,将此回调发送到您已实例化抽屉页面的页面。

onTap(){ widget.onItemTap( WidgetToShow() ) },

现在,当您在主屏幕的任何位置实例化抽屉类时,您有一个回调参数,您可以像这样使用:

Drawer( onItemTap:(Widget w){ 
// now you have your widget in the mainScreen, do as you want with it 
}  )

所以这是你最后的抽屉/菜单代码:

class Drawer extends StatefulWidget {
final Function(Widget w) onItemTap;
Drawer(this.onItemTap);
}
// ....
GestureDetector(
onTap: (){ return widget.onItemTap( WidgetToShow() ); },
),
// ...

这是您的主屏幕代码:

// ...
stack(
children:[
Drawer( onItemTap:(Widget w){ 
// now you have your widget in the mainScreen, do as you want with it 
}  ),
]
),
//...

希望有帮助:)

于 2020-05-10T12:05:09.763 回答