通过在父部件函数上设置状态来在屏幕之间进行进度切换。

huangapple go评论75阅读模式
英文:

progress through screens by setting the state on parent widget function

问题

我有一个名为AuthenticationState的父部件,下面有四个子部件。

  1. PhoneNumber
  2. OneTimeCode
  3. DisplayName
  4. ProfilePicture

我想要从父部件AuthenticationState控制从PhoneNumber部件到ProfilePicture部件的切换。

以下是我的父部件,其中有一个名为switchscreen的函数,当点击时应该导航到OneTimeCode部件。

class _AuthenticationStateState extends State<AuthenticationState> {
  Widget? setActiveAuthenticationScreen;

  @override
  void initState() {
    super.initState();
    setActiveAuthenticationScreen = PhoneNumber(switchScreen);
  }

  switchScreen() {
    setState(() {
      setActiveAuthenticationScreen = OneTimeCode(switchScreen);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: setActiveAuthenticationScreen,
      ),
    );
  }
}

以下是PhoneNumber部件的代码 -

class PhoneNumber extends StatelessWidget {
  PhoneNumber(this.nextScreen, {Key? key}) : super(key: key);

  final void Function() nextScreen;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        OutlinedButton.icon(
          icon: const Icon(Icons.arrow_right_alt),
          onPressed: nextScreen,
          style: OutlinedButton.styleFrom(foregroundColor: Colors.black),
          label: const Text('Next on PhoneNumber'),
        )
      ],
    );
  }
}

以下是OneTimeCode部件的代码 -

class OneTimeCode extends StatelessWidget {
  const OneTimeCode(this.nextScreen, {Key? key}) : super(key: key);

  final void Function() nextScreen;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        OutlinedButton.icon(
          icon: const Icon(Icons.arrow_right_alt),
          onPressed: nextScreen,
          style: OutlinedButton.styleFrom(foregroundColor: Colors.black),
          label: const Text('Next on OneTimeCode'),
        )
      ],
    );
  }
}
英文:

I have a parent widget called AuthenticationState and the below four child widgets.

  1. PhoneNumber
  2. OneTimeCode
  3. DisplayName
  4. ProfilePicture

I want to control the movement from the PhoneNumber widget till the ProfilePicture widget from the parent widget AuthenticationState.

Below is my parent widget with the switchscreen function which when clicked should navigate to the OneTimeCode widget.

class _AuthenticationStateState extends State&lt;AuthenticationState&gt; {
  Widget? setActiveAuthenticationScreen;

  @override
  void initState() {
    super.initState();
    setActiveAuthenticationScreen = PhoneNumber(switchScreen);
  }

  switchScreen() {
    setState(() {
      setActiveAuthenticationScreen = OneTimeCode(switchScreen);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: setActiveAuthenticationScreen,
      ),
    );
  }
}

And here is the code for the PhoneNumber widget -

class PhoneNumber extends StatelessWidget {
  PhoneNumber(this.nextScreen, {Key? key}) : super(key: key);

  final void Function() nextScreen;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        OutlinedButton.icon(
          icon: const Icon(Icons.arrow_right_alt),
          onPressed: nextScreen,
          style: OutlinedButton.styleFrom(foregroundColor: Colors.black),
          label: const Text(&#39;Next on PhoneNumber&#39;),
        )
      ],
    );
  }
}

And here is the code for the OneTimeCode widget -

class OneTimeCode extends StatelessWidget {
  const OneTimeCode(this.nextScreen, {Key? key}) : super(key: key);

  final void Function() nextScreen;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        OutlinedButton.icon(
          icon: const Icon(Icons.arrow_right_alt),
          onPressed: nextScreen,
          style: OutlinedButton.styleFrom(foregroundColor: Colors.black),
          label: const Text(&#39;Next on OneTimeCode&#39;),
        )
      ],
    );
  }
}

答案1

得分: 1

class AuthenticationState extends StatefulWidget {
  const AuthenticationState({super.key});

  @override
  State<AuthenticationState> createState() => _AuthenticationStateState();
}

class _AuthenticationStateState extends State<AuthenticationState> {
  int currentScreen = 1;

  switchScreen(int newScreen) {
    setState(() {
      currentScreen = newScreen;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Builder(builder: (context) {
          // 在这里我们想要根据当前屏幕选择显示哪个屏幕;
          switch (currentScreen) {
            case 1:
              return PhoneNumber(switchScreen);
            case 2:
              return OneTimeCode(switchScreen);
            case 3:
              return DisplayName(switchScreen);
            case 4:
              return ProfilePicture(switchScreen);
            default:
              return const Center(child: Text('完成!'));
          }
        }),
      ),
    );
  }
}

class PhoneNumber extends StatelessWidget {
  const PhoneNumber(this.nextScreen, {Key? key}) : super(key: key);
  final Function nextScreen;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        OutlinedButton.icon(
          icon: const Icon(Icons.arrow_right_alt),
          onPressed: () => nextScreen(2),
          style: OutlinedButton.styleFrom(foregroundColor: Colors.black),
          label: const Text('下一步:手机号码'),
        )
      ],
    );
  }
}

class OneTimeCode extends StatelessWidget {
  const OneTimeCode(this.nextScreen, {Key? key}) : super(key: key);
  final Function nextScreen;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        OutlinedButton.icon(
          icon: const Icon(Icons.arrow_right_alt),
          onPressed: () => nextScreen(3),
          style: OutlinedButton.styleFrom(foregroundColor: Colors.black),
          label: const Text('下一步:一次性验证码'),
        )
      ],
    );
  }
}

class DisplayName extends StatelessWidget {
  const DisplayName(this.nextScreen, {Key? key}) : super(key: key);

  final Function nextScreen;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        OutlinedButton.icon(
          icon: const Icon(Icons.arrow_right_alt),
          onPressed: () => nextScreen(4),
          style: OutlinedButton.styleFrom(foregroundColor: Colors.black),
          label: const Text('下一步:显示名称'),
        )
      ],
    );
  }
}

class ProfilePicture extends StatelessWidget {
  const ProfilePicture(this.nextScreen, {Key? key}) : super(key: key);

  final Function nextScreen;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        OutlinedButton.icon(
          icon: const Icon(Icons.arrow_right_alt),
          onPressed: () => nextScreen(0),
          style: OutlinedButton.styleFrom(foregroundColor: Colors.black),
          label: const Text('下一步:个人资料图片'),
        )
      ],
    );
  }
}
英文:

UPDATED ANSWER:

import &#39;package:flutter/material.dart&#39;;

class AuthenticationState extends StatefulWidget {
  const AuthenticationState({super.key});

  @override
  State&lt;AuthenticationState&gt; createState() =&gt; _AuthenticationStateState();
}

class _AuthenticationStateState extends State&lt;AuthenticationState&gt; {
  int currentScreen = 1;

  switchScreen(int newScreen) {
    setState(() {
      currentScreen = newScreen;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Builder(builder: (context) {
          //here we want to select what screen to show depending on the current screen;
          switch (currentScreen) {
            case 1:
              return PhoneNumber(switchScreen);
            case 2:
              return OneTimeCode(switchScreen);
            case 3:
              return DisplayName(switchScreen);
            case 4:
              return ProfilePicture(switchScreen);
            default:
              return const Center(child: Text(&#39;done!&#39;));
          }
        }),
      ),
    );
  }
}

class PhoneNumber extends StatelessWidget {
  const PhoneNumber(this.nextScreen, {Key? key}) : super(key: key);
  final Function nextScreen;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        OutlinedButton.icon(
          icon: const Icon(Icons.arrow_right_alt),
          onPressed: () =&gt; nextScreen(2),
          style: OutlinedButton.styleFrom(foregroundColor: Colors.black),
          label: const Text(&#39;Next on PhoneNumber&#39;),
        )
      ],
    );
  }
}

class OneTimeCode extends StatelessWidget {
  const OneTimeCode(this.nextScreen, {Key? key}) : super(key: key);
  final Function nextScreen;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        OutlinedButton.icon(
          icon: const Icon(Icons.arrow_right_alt),
          onPressed: () =&gt; nextScreen(3),
          style: OutlinedButton.styleFrom(foregroundColor: Colors.black),
          label: const Text(&#39;Next on OneTimeCode&#39;),
        )
      ],
    );
  }
}

class DisplayName extends StatelessWidget {
  const DisplayName(this.nextScreen, {Key? key}) : super(key: key);

  final Function nextScreen;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        OutlinedButton.icon(
          icon: const Icon(Icons.arrow_right_alt),
          onPressed: () =&gt; nextScreen(4),
          style: OutlinedButton.styleFrom(foregroundColor: Colors.black),
          label: const Text(&#39;Next on DisplayName&#39;),
        )
      ],
    );
  }
}

class ProfilePicture extends StatelessWidget {
  const ProfilePicture(this.nextScreen, {Key? key}) : super(key: key);

  final Function nextScreen;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        OutlinedButton.icon(
          icon: const Icon(Icons.arrow_right_alt),
          onPressed: () =&gt; nextScreen(0),
          style: OutlinedButton.styleFrom(foregroundColor: Colors.black),
          label: const Text(&#39;Next on ProfilePicture&#39;),
        )
      ],
    );
  }
}

OLD ANSWER:

There is a pub package available called flutter_sliding_tutorial that achieves what you're trying to do. You can also have a look at the built-in Stepper class.

huangapple
  • 本文由 发表于 2023年5月22日 14:49:26
  • 转载请务必保留本文链接:https://go.coder-hub.com/76303628.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定