我已经创建了一个应用程序,其中包含大量更新字符串值的按钮.

中间有一个容器,需要为所选的每个按钮显示不同的小部件.当按下新按钮时,中间的容器将需要弹出旧的显示小部件,并在其所在的位置构建一个新的小部件. 我考虑将中间容器与所有显示小部件分层,并使用连接到字符串值的可见性小部件,使用If语句来显示/隐藏它们,但我认为这不是最好的方法.

我已经将下面的示例代码组合在一起

class TestPage extends StatefulWidget {
  const TestPage({Key? key}) : super(key: key);

  @override
  State<TestPage> createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  String displayText = 'Choose option';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          Expanded(
            child: Column(
              children: [
                SizedBox(
                  height: 50,
                ),
                Button(
                  text: 'option A',
                  onTap: () {
                    displayText = 'Option A';
                  },
                ),
                //what would I put in the onTap property to get the app to build the OneOfTheWidgetsToBuild widget in the Display Container below based off the updated string value?
                SizedBox(
                  height: 5,
                ),
                Button(text: 'option B', onTap: null),
              ],
            ),
          ),
          Expanded(
            child: Column(
              children: [
                SizedBox(
                  height: 50,
                ),
                Center(
                  child: Container(
                    //DISPLAY CONTAINER
                    height: 40,
                    width: 100,
                    color: Colors.yellow,
                    child: Center(
                      child: Text(
                        '$displayText',
                        style: TextStyle(color: Colors.black),
                      ),
                    ),
                  ),
                )
              ],
            ),
          ),
          Expanded(
            child: Column(
              children: [
                SizedBox(
                  height: 50,
                ),
                Button(text: 'option C', onTap: null),
                SizedBox(
                  height: 5,
                ),
                Button(text: 'option D', onTap: null),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

下面是要在中间框中显示的小部件:

class OneOfTheWidgetsToBuild extends StatelessWidget {
  const OneOfTheWidgetsToBuild({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 40,
      width: 100,
      color: Colors.green,
    );
  }
}

非常感谢你的帮助

推荐答案

If I understand you correctly: You want to show a bunch of different widgets based on the string's value.

要做到这一点,一种方法不是使用一堆if/else语句,而是使用switch case 和一个函数来正确呈现正确的小部件.

例如:

创建到小工具:

var _displayWidget = Container();

然后,创建一个函数来更新该小部件

void updateWidget(String option) {
    switch (option) {
      case 'Option A':
        _displayWidget = widgetOne();
        break;
      case 'Option B':
        _displayWidget = widgetTwo();
        break;

      default:
        _displayWidget = Container();
        break;
    }
  }

然后,在你的Build方法中:

 Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Test'),
      ),
      body: Column(
        children: [
          DropdownButton<String>(
            items: const [
              DropdownMenuItem(
                child: Text('Option A'),
                value: 'Option A',
              ),
              DropdownMenuItem(
                child: Text('Option B'),
                value: 'Option B',
              ),
            ],
            onChanged: (value) {
             setState(() {
               updateWidget(value!);
             });
            },
          ),
          _displayWidget,
        ],
      ),
    );
  }

Flutter相关问答推荐

Flutter -如何从布局填充(对称水平)中排除小部件?

Android元数据为1.9.0,预期版本为1.7.1,如何解决flutter应用程序构建失败问题?

无效字符(位于字符68处)flutter—update—... europe-west1.firebasedatabase.app/

创建后检索FiRestore文档ID

将目标平台设置为Flutter 构建

SupabaseFlutter 集成问题:无法更新行

带有图标抖动的自定义下拉按钮

在使用FutureProvider时,我想显示用于加载的指示器,但无法自定义大小

Flutter:我的应用程序是否需要包含退款购买?

尽管海拔设置为 0,如何删除 appBar 下的下划线

在提供程序包更改通知程序中构建倒计时时钟

容器在发布模式下显示灰色框(抖动)

Flutter中如何连续获取TextField的文本是否为空?

如何在 Flutter 中使用简写 IF 禁用单选按钮?

更改文本字段Flutter 中最大字母的 colored颜色

配置项目:firebase_core时出现问题

扫描flutter生成的二维码后如何弹出文本字段值

为什么这个参数类型不能分配给参数类型?

如何从用户 Flutter 导航抽屉中隐藏管理菜单

Flutter 广告导致延迟