在 Flutter 中点击后，ElevatedButton 没有反应答案

【问题标题】：ElevatedButton doesn't react after clicking in Flutter在 Flutter 中点击后，ElevatedButton 没有反应
【发布时间】：2022-08-19 07:05:53
【问题描述】：

我有两个 TextFormFields（姓名和年龄）。在输入中输入内容并单击“发送”后，没有任何反应。这是我的代码：

我的编辑页面

class UserForm extends StatefulWidget {
  const UserForm({Key? key}) : super(key: key);

  @override
  State<UserForm> createState() => _UserFormState();
}

class _UserFormState extends State<UserForm> {
  final formKey = GlobalKey<FormState>();
  final nameController = TextEditingController();
  final ageController = TextEditingController();

  @override
  void dispose() {
    super.dispose();
    nameController.dispose();
    ageController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: formKey,
      child: Padding(
        padding: const EdgeInsets.all(10.0),
        child: Column(
          children: [
            TextFormField(
              decoration: const InputDecoration(),
              controller: nameController,
            ),
            TextFormField(
              decoration: const InputDecoration(),
              controller: ageController,
            ),
            ElevatedButton(
              child: const Text(\'Send\'),
              onPressed: () {
                context.read<UserProvider>().updateUserInfo(
                      name: nameController.text,
                      age: ageController.text,
                    );
              },
            )
          ],
        ),
      ),
    );
  }
}

个人资料页面（这是应该显示来自该文本字段的数据的代码：

Consumer<UserProvider>(builder: (context, user, _) {
            return Text(\'Name: ${user.data.name}, Age: ${user.data.age}\');
          })

我创建用户的类：

class UserProvider extends ChangeNotifier {
  final _user = User();

  User get data => _user;

  void updateUserInfo({String? name, String? age}) {
    _user
      ..name = name ?? \'\'
      ..age = age ?? \'\';

    notifyListeners();
  }
}

class User {
  String name = \'\';
  String age = \'\';
}

我在无状态小部件的 main.dart 文件中也有这些行：

 @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => UserProvider(),

看起来我忘记了什么，但我真的不知道在哪里。

将 print 放入您的 onPressed 并确认它可以打印。
@Denzel 是的，它正在调试控制台中正确打印 \'nameController.text\' 和 \'ageController.text\'
问题出在你的消费者身上。
你知道应该是什么问题吗？我遵循文档，但我不知道。

标签： flutter dart controller flutter-onpressed

【解决方案1】：

您需要定义按钮样式。代码应与此类似：

 ElevatedButton(
                  style: ButtonStyle(
                      overlayColor: myColor(tabicon, containerback)),
                  onPressed: () {
                    authController.signOut();
                  },
                  child: Text('Logout'),
                ),

这是我的“myColor”方法：

  myColor(Color color, Color colorPressed) {
    final myColor = (Set<MaterialState> states) {
      if (states.contains(MaterialState.pressed)) {
        return colorPressed;
      } else {
        return color;
      }
    };
    return MaterialStateProperty.resolveWith(myColor);
  }

但是，如果您只需要一个快速通用的答案，这里是另一种解决方案：

  ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    primary: Colors.deepPurpleAccent, // background
                    onPrimary: Colors.amber,
                    // foreground
                  ),
                  onPressed: () {
                    authController.signOut();
                  },
                  child: Text('Logout'),
                ),

【讨论】：

【解决方案2】：

我复制这段代码真的很奇怪，它对我有用。也许尝试flutter clean - > flutter pub get，或者你的一些进口......

我的消费者：

 class UserPage extends StatelessWidget {
      const UserPage({Key? key}) : super(key: key);
    
     @override
          Widget build(BuildContext context) {
            return Column(
              children: [
                Consumer<UserProvider>(builder: (context, user, _) {
                  return Text('Name: ${user.data.name}, Age: ${user.data.age}');
                })
              ],
            );
          }
        }

我的 FormSubmit ElevatedButton：

 ElevatedButton(
                    child: const Text('Send'),
                    onPressed: () {
                      context.read<UserProvider>().updateUserInfo(
                            name: nameController.text,
                            age: ageController.text,
                          );
                      Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => const UserPage()));
                    },
                  )

我的 main.dart：

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => UserProvider(),
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const UserForm(),
      ),
    );
  }
}

也尝试在同一页面中的表单下使用消费者，它也有效....

【讨论】：