flutter 力重新格式化输入

Question

通过设置 _mytexteditingcontroller.value ，我们可以更新 TextField 的值，但是 inputFormatters 没有运行

如何强制 inputFormatters 重新格式化值？

这是一个最小的例子，我使用 LengthLimitingTextInputFormatter(3) 来限制输入的长度，通过运行 _controller.text = '12345678' 我想告诉 flutter 到再次重新格式化输入

考虑这是一个最小的例子，不要告诉我使用子字符串来修复它

/// Flutter code sample for TextField

// This sample shows how to get a value from a TextField via the [onSubmitted]
// callback.

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

void main() => runApp(MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  TextEditingController _controller;

  void initState() {
    super.initState();
    _controller = TextEditingController();
  }

  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            RaisedButton(
                child: Text('Set Text'),
                onPressed: () {
                  _controller.text = '12345678';
                }),
            TextField(
              controller: _controller,
              inputFormatters: [
                LengthLimitingTextInputFormatter(3),
              ],
              onSubmitted: (String value) async {
                await showDialog<void>(
                  context: context,
                  builder: (BuildContext context) {
                    return AlertDialog(
                      title: const Text('Thanks!'),
                      content: Text('You typed "$value".'),
                      actions: <Widget>[
                        FlatButton(
                          onPressed: () {
                            Navigator.pop(context);
                          },
                          child: const Text('OK'),
                        ),
                      ],
                    );
                  },
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

如上所述，这是一个当前 Unresolved 已知问题 https://github.com/flutter/flutter/issues/30369。但是，您可以尝试在 TextInputFormatter 上使用扩展来获得类似的结果。

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

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);


void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  TextEditingController _controller;

  void initState() {
    super.initState();
    _controller = TextEditingController();
  }

  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            RaisedButton(
                child: Text('3 Length Limit'),
                onPressed: () {
                  _controller.text = LengthLimitingTextInputFormatter(3).format('12345678');
                }),
            RaisedButton(
                child: Text('Upper case'),
                onPressed: () {
                  _controller.text = UpperCaseTextFormatter().format('upper');
                }),
           RaisedButton(
                child: Text('Length Limit & Upper chained'),
                onPressed: () {
                  _controller.text = LengthLimitingTextInputFormatter(3).format(UpperCaseTextFormatter().format('upper'));
                }),
                        
            TextField(
              controller: _controller,
              inputFormatters: [
                LengthLimitingTextInputFormatter(3),
                UpperCaseTextFormatter(),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

extension on TextInputFormatter {
    String format(String text) {
        return formatEditUpdate(
            const TextEditingValue(),
            TextEditingValue(
                text: text,
                selection: TextSelection(
          extentOffset: text.length,
                    baseOffset: text.length,
                ),
            ),
        ).text;
    }
}

class UpperCaseTextFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
    return TextEditingValue(
      text: newValue.text?.toUpperCase(),
      selection: newValue.selection,
    );
  }
}