代码之家 › 专栏 › 技术社区 › A.A

颤振力重新格式化输入

flutter

A.A · 技术社区 · 4 年前

通过设置 _mytexteditingcontroller.value ,我们可以更新的值 TextField 但是 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'),
                        ),
                      ],
                    );
                  },
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

0 回复 | 直到 4 年前

bluenile 4 年前

如上所述,这是一个目前尚未解决的已知问题 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,
    );
  }
}