单击按钮时加载小部件（Flutter）

Question

我对 Flutter 非常陌生。

是否可以通过单击按钮在同一屏幕上构建小部件？

屏幕截图

在这里，我要实现的是：单击其中一个按钮 - 说“使用电子邮件”代替“选择选项”，应该会出现一个完整的登录表单。但是在选择另一个选项时，该表单应该被另一个选项替换。

类似于在android中加载片段。

代码：[这正是我尝试过的可能是极其错误的。它只是点击按钮什么都不做]

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          padding: const EdgeInsets.all(10.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              MaterialButton(
                  child: Text("Using Email"),
                  onPressed: () {
                    _count = 1;
                    createwidget();
                    print(_count);
                  }),
              MaterialButton(
                onPressed: () {
                   _usingPhone();
                },
                child: Text("Using Phone"),
              ),
              MaterialButton(child: Text("Go back to home"), onPressed: () {}),
              createwidget(),//this is where i want the forms

            ],
          ),
        ),
      ),
    );
  } 

 Widget createwidget() {
print("inside create");
    if(_count==0) {
      print(_count);
      return new Text("Select an option");
    }

    else if (_count == 1) {
      setState(() {
      return new Padding(
        padding: const EdgeInsets.all(30.0),
        child:
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  padding: EdgeInsets.only(
                    bottom: 30.0,
                  ),
                  child: Text(
                    "LOGIN",
                    textAlign: TextAlign.center,
                  ),
                ),
                TextField(
                  decoration: InputDecoration(
                    hintText: "Enter Email",
                    labelText: "Email",
                  ),
                  onChanged: (value) {
                    _email = value;
                  },
                ),
                TextField(
                  decoration: InputDecoration(
                      hintText: "Enter Password", labelText: "Password"),
                  onChanged: (value) {
                    _password = value;
                  },
                ),


            Row (
              children: [
                TextButton(
                  onPressed: _createuser,
                    child: Text("Create account")),
                TextButton(
                  onPressed: _login,
                    child: Text("Login")),
              ],
            ),
       ],
      ),
      );
      });
    }
    if (_count == 2) {

    }
    if (_count == 3) {

    }

  }

Answer 1

您可以使用 StatefulWidget 更新视图：

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  int _count = -1;
  String _email = '';
  String _password = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          padding: const EdgeInsets.all(10.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              MaterialButton(
                  child: Text("Using Email"),
                  onPressed: () {
                    setState(() {
                      _count = 1;
                    });
                    print(_count);
                  }),
              MaterialButton(
                onPressed: () {},
                child: Text("Using Phone"),
              ),
              MaterialButton(child: Text("Go back to home"), onPressed: () {}),
              createWidget(_count),
            ],
          ),
        ),
      ),
    );
  }

  Widget createWidget(int count) {
    print("inside create");
    if (count == 0) {
      print(count);
      return new Text("Select an option");
    } else if (count == 1) {
      return new Padding(
        padding: const EdgeInsets.all(30.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              padding: EdgeInsets.only(
                bottom: 30.0,
              ),
              child: Text(
                "LOGIN",
                textAlign: TextAlign.center,
              ),
            ),
            TextField(
              decoration: InputDecoration(
                hintText: "Enter Email",
                labelText: "Email",
              ),
              onChanged: (value) {
                _email = value;
              },
            ),
            TextField(
              decoration: InputDecoration(
                  hintText: "Enter Password", labelText: "Password"),
              onChanged: (value) {
                _password = value;
              },
            ),
            Row(
              children: [
                TextButton(onPressed: () {}, child: Text("Create account")),
                TextButton(onPressed: () {}, child: Text("Login")),
              ],
            ),
          ],
        ),
      );
    }
    if (count == 2) {
      return Container();
    }
    if (count == 3) {
      return Container();
    }
    return Container();
  }
}