当所有信息都在同一页面上时,如何在 Flutter 中创建动态、变化的小部件?

问题描述 投票:0回答:1

预先感谢您提供的任何帮助!

我目前正在使用 VS Code 在 Flutter 3.0 中进行开发。诚然,我在 Flutter 方面并不是最擅长的,并且现在只是在工作中的其他项目任务之间断断续续地使用了它几个月。

我遇到的问题是我不太明白如何让有状态小部件在同一页面上相互协作和通信。在我的具体示例中,我正在制作一个“仪表板”。对于应用程序的此页面/屏幕,“仪表板”小部件充当此页面上其他小部件的基础。有两个部分:左手面板是菜单小部件;以及默认为“选项 1”小部件的右手面板。在菜单中,我使用了手势检测器来正确获取触摸/单击事件,并可以触发打印到控制台(更不用说更改每个选项后面的背景突出显示颜色)。我想做的是,每当我从菜单中单击选项小部件时,右侧面板就会显示一个不同的相关小部件,其中包含自己的一组小部件和数据。尽管我绝对有点击事件注册和工作,但无论我做什么,我似乎都无法让“菜单”小部件来更改其他面板中显示的内容。我并不是在寻找有人为我编码(尽管一些神奇的精确解决方案可能会缓解我此时的头痛)。我要求的是当我单击菜单小部件中的不同选项时如何在右侧面板上显示/加载小部件的示例或方法。我提供了一个非常基本的开发艺术图形来描述这种情况,而不是代码。如果任何希望提供帮助的人需要代码,请回复您可能希望看到的部分,我将分享我能分享的内容。谢谢enter image description here

我已经尝试在谷歌上搜索答案,但没有找到任何帮助,包括使用 Riverpod 传递信息,以及创建我需要填充到屏幕上的小部件的实例,并与包含的仪表板小部件共享它们和状态信息。

flutter dart user-interface
1个回答
0
投票

如果我正确理解你的问题,那么你正在努力解决右手仪表板面板的状态。你想要做的是,在左侧的菜单面板中定义一个名为“state”的字符串,然后在GestureDetector的onTap属性中,你想要将这个“state”设置为例如“Option1”或“Option2”。那么如果这些小部件采用相同的构建方法,您可以使用此状态返回不同样式的页面。如果它们是不同的类,您需要将此状态变量传递给另一个类并像这样使用它:“widget.state”,然后您可以使用它来返回不同样式的页面。就像下面的代码:

String state = 'Describing';

class _TestState extends State<Test> {
  @override
  Widget build(BuildContext context) {
    if (state == 'Describing') {
      return Scaffold(
        backgroundColor: light2,
        body: Center(
          child: Container(...
else if (state == 'AppTalking') {
      return Scaffold(
        backgroundColor: light2,
        body: Center(
          child: Container(
            width: 312,
            height: 264,
© www.soinside.com 2019 - 2024. All rights reserved.