在颤动中使用微调器的值来使用不同的小部件

我希望用户在“注册和登录”屏幕上首先从一个下拉按钮中选择他们的角色,并根据其值,我想在同一页面上显示其他小部件...。 为此,我应该创建一个包含所有各个小部件或有状态小部件的普通类吗? 以及从下拉列表中选择角色后如何调用该小部件?

评论
  • 声声念Oo
    声声念Oo 回复

    您可以根据不同角色的要求创建不同的有状态或无状态窗口小部件,并且可以基于下拉值更改屏幕。

    以下代码将为您提供更多帮助。

    class Delet2 extends StatefulWidget {
      @override
      _Delet2State createState() => _Delet2State();
    }
    
    class _Delet2State extends State<Delet2> {
      Widget _currentScreen;
      int role;
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Container(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                _currentScreen ?? Container(),
                DropdownButton(
                  value: role,
                  items: [1, 2]
                      .map(
                        (item) => DropdownMenuItem(
                          value: item,
                          child: Text(
                            item.toString(),
                          ),
                        ),
                      )
                      .toList(),
                  onChanged: (value) {
                    setState(() {
                      role = value;
                      if (role == 1) {
                        _currentScreen = Screen1();
                      } else {
                        _currentScreen = Screen2();
                      }
                    });
                  },
                ),
              ],
            ),
          ),
        );
      }
    }
    
    class Screen1 extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          child: Text("screen1"),
        );
      }
    }
    
    class Screen2 extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          child: Text("screen2"),
        );
      }
    }
    
  • 24K天然
    24K天然 回复

    您必须创建有状态的小部件,然后根据微调器中选择的值来绘制小部件,请按照以下代码片段进行操作:

    class MySpinnerWidget extends StatefulWidget {
      @override
      _MySpinnerWidgetWidgetState createState() => _MySpinnerWidgetWidgetState();
    }
    
    class _MySpinnerWidgetWidgetState extends State<MySpinnerWidget> {
      String dropdownValue = 'One';
    
      List<String> spinnerItems = ['One', 'Two', 'Three'];
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Center(
            child: Column(children: <Widget>[
              DropdownButton<String>(
                value: dropdownValue,
                icon: Icon(Icons.arrow_drop_down),
                onChanged: (String data) {
                  setState(() {
                    dropdownValue = data;
                  });
                },
                items: spinnerItems.map<DropdownMenuItem<String>>((String value) {
                  return DropdownMenuItem<String>(
                    value: value,
                    child: Text(value),
                  );
                }).toList(),
              ),
              if(dropdownValue == 'One')
                Text('Value One selected from spinner'),
              if(dropdownValue == 'Two')
                Text('Value Two selected from spinner'),
              if(dropdownValue == 'Three')
                Text('Value Three selected from spinner'),
            ]),
          ),
        );
      }
    }