flutter踩坑日记（二）TextField的onChange

近日在项目中碰见一个非常恶心的问题，TextField的取值问题

android 原生中，实时获取EditText的值很简单，即如下

editText.addTextChangedListener(new TextWatcher() {

@Override

    public void beforeTextChanged(CharSequence s, int start, int count, int after) {

}

@Override

    public void onTextChanged(CharSequence s, int start, int before, int count) {

        //do something

    }

@Override

    public void afterTextChanged(Editable s) {

}

});

onTextChanged 中的 第一个参数，即为输入框内容，当输入框的限制最大输入5位的时候，s最大也就5位。

同样的原理放flutter中居然有个坑……

代码如下

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class TestPage extends StatefulWidget {
  @override
  _TestPageState createState() => _TestPageState();
}


TextEditingController _controller = TextEditingController();
String content = '';

class _TestPageState extends State {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: Text('测试'),
        ),
        body: Container(
          child: Column(
            children: [
            TextField(
            controller: _controller,
            maxLength: 5,
            onChanged: (value) {
              setState(() {
                content = value;
              });
            },
          ),
          Text(content)
          ],
        ),
      ),
    ),);
  }
}

实际的运行效果，当我输入超过5位的时候

截图1.png

所以当项目中取值的时候，虽然显示的是12345，但实际的值 是123456，会比显示效果多一位（能发现这个问题纯属侥幸，因为用的fish_redux，要更新整个state，才发现多了一位，不然就生产事故了，万幸万幸）

另外只要加了maxlength属性限制最大位数，输入框右下就有一个统计数字的东西