Flutter TextFormField 装饰

Question

如何在TextFormfield中将数字“123456789”显示为“123 456 789”？

TextFormField(
    controller: _numberId,
    keyboardType: TextInputType.number,
),

Answer 1

我在 String 上写下面的扩展：

extension StringSeprate on String {
  String stringSeparate(
      {int count = 3, String separator = ",", bool fromRightToLeft = true}) {
    if (this.isEmpty) {
      return "";
    }

    if (count < 1) {
      return this;
    }

    if (count >= this.length) {
      return this;
    }

    var str = this.replaceAll(separator, "");

    if (fromRightToLeft) {
      str = String.fromCharCodes(str.runes.toList().reversed);
    }

    var chars = str.runes.toList();
    var namOfSeparation =
        (chars.length.toDouble() / count.toDouble()).ceil() - 1;
    var separatedChars = List(chars.length + namOfSeparation.round());
    var j = 0;
    for (var i = 0; i < chars.length; i++) {
      separatedChars[j] = String.fromCharCode(chars[i]);
      if (i > 0 && (i + 1) < chars.length && (i + 1) % count == 0) {
        j += 1;
        separatedChars[j] = separator;
      }

      j += 1;
    }

    return fromRightToLeft
        ? String.fromCharCodes(separatedChars.join().runes.toList().reversed)
        : separatedChars.join();
  }
}

最终代码（将以下代码复制到您的文件中并从 main 调用它进行测试）：

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

class TestWidget extends StatelessWidget {
  TextEditingController _textEditingController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[200],
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            TextField(
              controller: _textEditingController,
              inputFormatters: [
                TextInputFormatter.withFunction((oldValue, newValue) =>
                    TextEditingValue(
                        text: newValue.text.stringSeparate(
                            separator: ' ', fromRightToLeft: false)))
              ],
              onChanged: (String value) {
                if (value == null) return;
                _textEditingController.selection = TextSelection.fromPosition(
                    TextPosition(
                        offset: value.length, affinity: TextAffinity.upstream));
              },
            ),
          ],
        ),
      ),
    );
  }
}

extension StringSeprate on String {
  String stringSeparate(
      {int count = 3, String separator = ",", bool fromRightToLeft = true}) {
    if (this.isEmpty) {
      return "";
    }

    if (count < 1) {
      return this;
    }

    if (count >= this.length) {
      return this;
    }

    var str = this.replaceAll(separator, "");

    var chars = str.runes.toList();
    var namOfSeparation =
        (chars.length.toDouble() / count.toDouble()).ceil() - 1;
    var separatedChars = List(chars.length + namOfSeparation.round());
    var j = 0;
    for (var i = 0; i < chars.length; i++) {
      separatedChars[j] = String.fromCharCode(chars[i]);
      if (i > 0 && (i + 1) < chars.length && (i + 1) % count == 0) {
        j += 1;
        separatedChars[j] = separator;
      }

      j += 1;
    }

    return fromRightToLeft
        ? String.fromCharCodes(separatedChars.join().runes.toList().reversed)
        : separatedChars.join();
  }
}

结果是这样的：