有没有一种方法可以通过一个按钮一次控制在不同时间在同一路线中以不同方式显示两个小部件？

Question

我正在实现一个登录界面，用户不必在 page/route 之间切换注册或登录，但保持不变 page/route 但登录和注册的内容发生变化，因此如何控制单击登录时登录的内容和单击注册时注册的内容。

Image to understand: https://i.stack.imgur.com/Fhwdt.png

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          // primarySwatch: Colors.white,
          ),
      home: Scaffold(
        body: Stack(
          fit: StackFit.expand,
          children: <Widget>[
            Container(
              //  height: MediaQuery.of(context).size.height,
              //  width: MediaQuery.of(context).size.width,
              height: 500.0,
              width: 400.0,
              child: Column(
                children: <Widget>[
                  SizedBox(
                    height: 80.0,
                  ),
                  Column(
                    children: <Widget>[
                      CircleAvatar(
                        child: Text("Logo"),
                        backgroundColor: Colors.blue,
                      ),
                      Text("Slogan")
                    ],
                  ),
                  SizedBox(
                    height: 40.0,
                  ),
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      RaisedButton(
                        onPressed: () {
                          setState(() {
                            login = true;
                          });
                        },
                        child: Text("SignUp"),
                      ),
                      SizedBox(
                        width: 20.0,
                      ),
                      RaisedButton(
                        onPressed: () {
                          setState(() {
                            login = false;
                          });
                        },
                        child: Text("Login"),
                      )
                    ],
                  ),
                  SizedBox(
                    height: 20.0,
                  ),
                  login ? Signup() : new Login(),
                  // new FragmentB()
                ],
              ),
            )
          ],
        ),
      ),
    );
  }


class Login extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.purple,
    );
  }
}

class Signup extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
    );
  }
}

Answer 1

void main() => runApp(MaterialApp(home: Scaffold(appBar: AppBar(title: Text("Title")), body: HomePage())));

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool _isLogin = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Expanded(child: _isLogin ? SignupPage() : LoginPage()),
        Center(
          child: RaisedButton(
            child: Text("Switch to ${_isLogin ? "Login" : "Sign up"}"),
            onPressed: () => setState(() => _isLogin = !_isLogin),
          ),
        ),
        Spacer(),
      ],
    );
  }
}

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.blue, child: Center(child: Text("Login page")));
  }
}

class SignupPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.teal, child: Center(child: Text("Sign up page")));
  }
}

输出：

有没有一种方法可以通过一个按钮一次控制在不同时间在同一路线中以不同方式显示两个小部件？

Is there a way for display two widget differently in same routeat different time controlled by one button at a time?

dart

dart-pub

flutter

flutter-dependencies

flutter-layout