flutter 通过设置父窗口小部件功能的状态来在屏幕上前进

8fsztsew 于 2023-05-23 发布在 Flutter

关注(0)|答案(1)|浏览(103)

我有一个名为AuthenticationState的父小部件和下面的四个子小部件。
1.电话号码

OneTimeCode
1.显示名称
1.公司简介
我想控制从PhoneNumber小部件到ProfilePicture小部件从父小部件AuthenticationState的移动。
下面是我的带有切换屏幕功能的父小部件，单击该功能时应导航到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'),
        )
      ],
    );
  }
}

flutter

来源：https://stackoverflow.com/questions/76303628/progress-through-screens-by-setting-the-state-on-parent-widget-function

1条答案

按热度按时间

q0qdq0h21#

更新答案：

import 'package:flutter/material.dart';

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) {
          //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('done!'));
          }
        }),
      ),
    );
  }
}

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('Next on PhoneNumber'),
        )
      ],
    );
  }
}

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('Next on OneTimeCode'),
        )
      ],
    );
  }
}

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('Next on DisplayName'),
        )
      ],
    );
  }
}

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('Next on ProfilePicture'),
        )
      ],
    );
  }
}

老答案：
有一个名为flutter_sliding_tutorial的pub软件包可以实现你想要做的事情。您还可以查看内置的Stepper类。

赞(0）回复(0）举报 2023-05-23

我来回答

flutter 通过设置父窗口小部件功能的状态来在屏幕上前进

1条答案

相关问题

热门标签

最新问答