首页 > 解决方案 > Flutter:将字符串解析为 TextField/TextFormField

问题描述

我正在创建 PinCode,基本上当我按下按钮时,我想将值解析为 TextField/TextFormField。

例如,当我按下按钮“1”返回值 1,然后如果我按下按钮“2”返回值 2。

我成功地将值返回到 Text Widget,但我无法将值解析为 TextField/TextFormField。谢谢。密码图像

这是我的代码:

class PinCodeScreen extends StatefulWidget {
  static const routeNamed = "/pin-code";
  @override
  _PinCodeScreenState createState() => _PinCodeScreenState();
}

class _PinCodeScreenState extends State<PinCodeScreen> {
  TextEditingController _pinCodeController;
  String pinCodeText = "";
  @override
  void initState() {
    super.initState();
     _pinCodeController = TextEditingController(text: pinCodeText);
  }

   @override
   void dispose() {
     _pinCodeController.dispose();
     super.dispose();

  }

  @override
  Widget build(BuildContext context) {
    double mqHeight = MediaQuery.of(context).size.height;
    double mqWidth = MediaQuery.of(context).size.width;
    final textTheme = Theme.of(context).textTheme;
    return Scaffold(
      backgroundColor: Theme.of(context).primaryColor,
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Flexible(
              flex: 2,
              child: HeaderPinCode(
                alignment: Alignment.center,
                title: pinCodeText,
                textStyle: textTheme.title.copyWith(
                  letterSpacing: 4,
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            Flexible(
              flex: 4,
              child: TextFormField(
                controller: _pinCodeController,
                maxLength: 4,
                onChanged: (resultPin) {
                  setState(() {
                    pinCodeText = resultPin;
                  });
                },
              ),
            ),
            Flexible(
              flex: 14,
              child: Container(
                height: double.infinity,
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.grey, width: .5),
                  borderRadius: BorderRadius.circular(30),
                ),
                child: Wrap(
                  alignment: WrapAlignment.spaceEvenly,
                  spacing: 4,
                  children: <Widget>[
                    ButtonPinCode(
                      numberText: "1",
                      mediaQueryHeight: mqHeight,
                      mediaQueryWidth: mqWidth,
                      textStyle:
                          textTheme.display2.copyWith(color: Colors.black),
                      onPressed: () {
                        setState(() {
                          pinCodeText += 1.toString();
                        });
                      },
                    ),
                    ButtonPinCode(
                      numberText: "2",
                      mediaQueryHeight: mqHeight,
                      mediaQueryWidth: mqWidth,
                      textStyle:
                          textTheme.display2.copyWith(color: Colors.black),
                      onPressed: () {
                        setState(() {
                          pinCodeText += 2.toString();
                        });
                      },
                    ),
                    ButtonPinCode(
                      numberText: "3",
                      mediaQueryHeight: mqHeight,
                      mediaQueryWidth: mqWidth,
                      textStyle:
                          textTheme.display2.copyWith(color: Colors.black),
                      onPressed: () {
                        setState(() {
                          pinCodeText += 3.toString();
                        });
                      },
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

标签: flutterdart

解决方案


答案很简单

TextEditingController _pinCodeController = new  TextEditingController();
_pinCodeController.text=pinCodeText;
setState((){});

而最佳实践是用户 TextEditingController 直接喜欢

_pinCodeController.text += 1.toString();
 setState((){});

推荐阅读