为什么 navigator.push 在我的 flutter 网络应用程序中不起作用？

Question

我正在构建一个 flutter 网络应用程序。我有一个用 cubit 控制的小部件，具体取决于用户是否登录。如果用户已登录，我会将他的个人资料图片显示为下拉按钮，如果他选择选项 A，我想将他推送到另一个页面。出于某种原因，Navigator 没有做任何事情。这是我的下拉按钮的代码：

                  MouseRegion(
                cursor: SystemMouseCursors.click,
                child: DropdownButton(
                  underline: SizedBox.shrink(),
                  icon: SizedBox.shrink(),
                  hint: CircleAvatar(
                    backgroundImage: NetworkImage(user.photoURL.toString()),
                  ),
                  onChanged: (value) {
                    setState(() {});
                  },
                  items: [
                    DropdownMenuItem(
                        onTap: () {
                          print('tap');
                          Navigator.pushReplacement(
                              context,
                              MaterialPageRoute(
                                  builder: (context) => UserPage(user)));
                        },
                        value: dropdownValue,
                        child: Row(
                          children: [Text('a'), Icon(Icons.ac_unit)],
                        )),
                    DropdownMenuItem(
                        value: menuItem,
                        child: Row(
                          children: [Text('b'), Icon(Icons.access_alarms)],
                        ))
                  ],
                ),
              )

这是我要推送到的页面的代码：

import 'package:ez_user_side/cubit/cubit/sign_in_cubit.dart';
import 'package:ez_user_side/pages/page_components/Menu.dart';
import 'package:ez_user_side/pages/page_components/colors.dart';
import 'package:ez_user_side/pages/page_components/right_side.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:ez_user_side/pages/page_components/user_middle.dart';

class UserPage extends StatefulWidget {
  final User user;
  UserPage(this.user);
  @override
  _UserPageState createState() => _UserPageState();
}

class _UserPageState extends State<UserPage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: SizedBox(
          width: MediaQuery.of(context).size.width / 100 * 13.46,
          child: Row(
            children: [
              Menu(),
              Container(
                color: Colors.red,
              ),
              AccountTab()
            ],
          )),
    );
  }
}

感谢您的帮助！

Answer 1

您需要跟踪 DropdownButton 的选定值。您可以使用 StatefulWidget 中的一个简单变量来做到这一点。这里变量 value 用于确定选择了哪个项目。 Whenever some DropdownMenuItem is selected you update the variable with the selected DropdownMenuItem's value.

之后，您只需响应 DropdownButton 的 onChanged:(value) 回调中的更改，以重定向到其他页面或执行其他操作。

代码如下：


import 'package:flutter/material.dart';

class Solution extends StatefulWidget {
  @override
  _SolutionState createState() => _SolutionState();
}

class _SolutionState extends State<Solution> {

  String value = "home";


  @override
  Widget build(BuildContext context) {
    return Scaffold(

      body: SafeArea(
        child: Container(
          child: DropdownButton<String>(
            value: value,
            underline: SizedBox.shrink(),
            icon: SizedBox.shrink(),
            hint: CircleAvatar(
              backgroundImage: NetworkImage(user.photoURL.toString()),
            ),
            onChanged: (value) async{
              setState(() {
                if(value == 'home') {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => UserPage())
                  );
                }
                else {
                  //DO SOMETHING
                }
              });
            },
            items: [
              DropdownMenuItem(
                  onTap: ()  {
                    setState(() {
                      value = 'home';
                    });
                    print('tapped home');
                  },
                  value: 'home',
                  child: Row(
                    children: [Text('a'), Icon(Icons.ac_unit)],
                  )
              ),
              DropdownMenuItem(
                  onTap: () {
                    setState(() {
                      value = 'alarm';
                    });
                    print('tapped alarm');
                  },
                  value: 'alarm',
                  child: Row(
                    children: [Text('b'), Icon(Icons.access_alarms)],
                  )
              )
            ],
          ),
        ),
      ),
    );
  }
}

为什么 navigator.push 在我的 flutter 网络应用程序中不起作用？

Why is navigator.push not working in my flutter web app?

dart

flutter

statefulwidget

bloc

flutter-web