setState Flutter 未获取 onChanged 值

Posted

技术标签:

【中文标题】setState Flutter 未获取 onChanged 值【英文标题】:onChanged value not picking up by setState Flutter 【发布时间】:2021-11-13 03:11:33 【问题描述】:

我正在创建一个具有多种帐户类型选项的注册页面。该应用程序很简单,因此它没有任何状态我只使用简单的旧 setState,但我将更改的值传递给我的有状态小部件中的 setState,但它第一次发生在我身上的颤动并没有获取 setState 中的值。我已经挠头了太多小时,但仍然是同样的问题。我的颤振版本是2.5。 GFRadio Button setState 是一个创建问题。此外,如果我使用简单的 dart 单选按钮或 RadioListTile,它们也会产生相同的问题

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:getwidget/colors/gf_color.dart';
import 'package:getwidget/components/radio/gf_radio.dart';
import 'package:getwidget/size/gf_size.dart';

class SignUpPage extends StatefulWidget 
  const SignUpPage(Key? key) : super(key: key);

  @override
  State<SignUpPage> createState() => _SignUpPageState();


class _SignUpPageState extends State<SignUpPage> 
  bool _obscureText = true;
  int groupValue = 0;
  void _togglePasswordStatus() 
    setState(() 
      _obscureText = !_obscureText;
    );
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      backgroundColor: Colors.white,
      body: Container(
        child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              Stack(
                children: <Widget>[
                  Image.asset(
                    "assets/loginpage.png",
                    fit: BoxFit.cover,
                  ),
                  Padding(
                    padding: EdgeInsets.only(
                      top: 250,
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Padding(
                          padding: EdgeInsets.only(left: 40),
                          child: Text("New\nAccount",
                              style: TextStyle(
                                  fontSize: 34, fontWeight: FontWeight.bold)),
                        ),
                        Stack(
                          children: <Widget>[
                            Padding(
                                padding: EdgeInsets.only(
                                  right: 40,
                                ),
                                child: Image.asset("assets/camera.png")),
                            Padding(
                                padding: EdgeInsets.only(right: 40, top: 70),
                                child: Text("Add Image")),
                          ],
                        )
                      ],
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.only(
                      top: 350,
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Padding(
                          padding: EdgeInsets.only(left: 40),
                          child: GFRadio(
                            size: GFSize.SMALL,
                            value: 2,
                            groupValue: groupValue,
                            onChanged: (value) 
                              setState(() 
                                groupValue = value;
                              );
                            ,
                            inactiveIcon: null,
                            activeBorderColor: GFColors.SUCCESS,
                            radioColor: GFColors.SUCCESS,
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.only(
                            right: 40,
                          ),
                        ),
                      ],
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.only(
                      top: 400,
                    ),
                    child: Padding(
                      padding: EdgeInsets.only(left: 20, right: 20),
                      child: TextField(
                        decoration: InputDecoration(
                          hintText: "Username",
                          prefixIcon: Icon(
                            Icons.person,
                            color: Color(0xFFCF776B),
                          ),
                          enabledBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Color(0xFFCF776B)),
                          ),
                          focusedBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Color(0xFFCF776B)),
                          ),
                        ),
                      ),
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.only(
                      top: 470,
                    ),
                    child: Padding(
                      padding: EdgeInsets.only(left: 20, right: 20),
                      child: TextField(
                        decoration: InputDecoration(
                          hintText: "Mobile Number",
                          prefixIcon: Icon(
                            Icons.phone,
                            color: Color(0xFFCF776B),
                          ),
                          enabledBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Color(0xFFCF776B)),
                          ),
                          focusedBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Color(0xFFCF776B)),
                          ),
                        ),
                      ),
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.only(
                      top: 540,
                    ),
                    child: Padding(
                      padding: EdgeInsets.only(left: 20, right: 20),
                      child: TextField(
                        obscureText: _obscureText,
                        decoration: InputDecoration(
                          hintText: "Password",
                          prefixIcon: Icon(
                            Icons.lock,
                            color: Color(0xFFCF776B),
                          ),
                          suffixIcon: IconButton(
                              icon: Icon(
                                _obscureText
                                    ? Icons.visibility
                                    : Icons.visibility_off,
                              ),
                              onPressed: _togglePasswordStatus,
                              color: Color(0xFFCF776B)),
                          enabledBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Color(0xFFCF776B)),
                          ),
                          focusedBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Color(0xFFCF776B)),
                          ),
                        ),
                      ),
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.only(
                      top: 620,
                    ),
                    child: Center(
                      child: GestureDetector(
                        onTap: () 
                          // Navigator.push(
                          //     context,
                          //     MaterialPageRoute(
                          //         builder: (context) => SignUpPage()));
                        ,
                        child: Container(
                          width: 180,
                          height: 60,
                          decoration: BoxDecoration(
                              color: Color(0xFFCF776B),
                              border: Border.all(
                                color: Color(0xFFCF776B),
                              ),
                              borderRadius:
                                  BorderRadius.all(Radius.circular(40))),
                          child: Center(
                            child: Text("Sign Up",
                                style: TextStyle(
                                    fontSize: 20,
                                    fontWeight: FontWeight.bold,
                                    color: Colors.white)),
                          ),
                        ),
                      ),
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.only(
                      top: 700,
                    ),
                    child: Center(
                      child: Text(
                        "Change Password",
                        style: TextStyle(
                            decoration: TextDecoration.underline,
                            color: Color(0xFFCF776B),
                            fontWeight: FontWeight.bold,
                            fontSize: 20),
                      ),
                    ),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  

【问题讨论】:

你可以使用 TextEditingController 如果你有任何困惑,你能举个例子吗 【参考方案1】:

我认为您在这里误解了GFRadio 小部件:

GFRadio(
                            size: GFSize.SMALL,
                            value: 2,
                            groupValue: groupValue,
                            onChanged: (value) 
                              setState(() 
                                groupValue = value;
                              );
                            ,
                            inactiveIcon: null,
                            activeBorderColor: GFColors.SUCCESS,
                            radioColor: GFColors.SUCCESS,
                          ),

groupValue 用于确定该组中有哪些单选按钮,该组中的每个单选按钮都将具有相同的groupValuevalue 与同一组中的其他单选按钮不同。假设您有 3 个单选按钮供用户选择性别(男、女、男同性恋;)),代码可能如下所示:

int _value = 0;
Row(
                  children: [
                    GFRadio(
                      value: 0,
                      groupValue: 1,
                      onChanged: (value) 
                        setState(() 
                          _value = value;
                        );
                      ,
                    ),
                    GFRadio(
                      value: 1,
                      groupValue: 1,
                      onChanged: (value) 
                        setState(() 
                          _value = value;
                        );
                      ,
                    ),
                    GFRadio(
                      value: 2,
                      groupValue: 1,
                      onChanged: (value) 
                        setState(() 
                          _value = value;
                        );
                      ,
                    ),
                  ],
                ),

如您所见,setState 方法中需要更改的是_value,而不是groupValue。您的代码应更改为:

//int groupValue = 0;
//replace the above line with the below line:
int _value = 0;

在 GFRadio 的 setState 方法中:

    setState(() 
 //groupValue = value; replace this line with below line
_value = value;
                                  );

我的解释很糟糕,所以如果你不明白,请评论!

【讨论】:

没用。如果我删除 groupValue GFRadio 说它必须添加并且值的东西它仍然是相同的 能否提供问题中的错误日志?

以上是关于setState Flutter 未获取 onChanged 值的主要内容,如果未能解决你的问题,请参考以下文章

Flutter:在构造函数中调用 setState():_SharesListState#6c96a(生命周期状态:已创建,无小部件,未安装)

Flutter Hooks 使用 useEffect 获取数据 - 在构建期间调用 setState() 或 markNeedsBuild()

Flutter ListView 未更新

Flutter :setState() 或 markNeedsBuild() 在构建期间调用

Flutter - setState 不更新内部有状态小部件

ReactJs:获取无法读取未定义错误的属性“setState”[重复]