Флаттер: как вводить цифры в середине TextEditingValue - PullRequest
0 голосов
/ 24 октября 2018

У меня есть следующие требования:

  1. Три TextFormFields в Column.
  2. Первые два - двойные с двумя десятичными знаками.
  3. Третье - просто поле String без особых ограничений.
  4. Два двойных поля должны автоматически выбирать последние 3 цифры, когда поле получает фокус, чтобы пользователь мог просто начать вводить новые цифры для этого поля,(Обычно в этом сценарии изменяются только последние 3 цифры.)
  5. Пользователь не нажимает десятичную точку, но полученное число всегда имеет два десятичных знака.
  6. Заполнение поля должно выполняться автоматическиперейти к следующему полю.
  7. Пользователь должен иметь возможность поместить курсор между любыми двумя цифрами и начать ввод новых цифр в середине.Например, начиная с 458,90, пользователь может поместить курсор после 5 и ввести 67, чтобы получить 45678,90
  8. Первое поле автоматически фокусируется при первом появлении экрана.(Это, в свою очередь, означает, что последние три цифры уже выбраны.)

Большинство требований удовлетворены, но я борюсь с требованием № 7.Как я могу определить текущее местоположение курсора, чтобы по мере того, как пользователь печатал, он перемещался на одно место (в отличие от прыжка до конца)?

Ниже в минималистском коде, демонстрирующем эту проблему:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static final _controller1 = TextEditingController();
  static final _controller2 = TextEditingController();
  final _focusNode1 = FocusNode();
  final _focusNode2 = FocusNode();
  final _focusNode3 = FocusNode();
  final _decimalFormatter = DecimalNumberTextInputFormatter(2);
  final _keyboardType = TextInputType.numberWithOptions(decimal: true);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: Column(children: [
        myTextFormField1(),
        myTextFormField2(),
        TextFormField(
          focusNode: _focusNode3,
        ),
      ]),
    );
  }

  initState() {
    super.initState();

    _focusNode1.addListener(() {
      int _baseOffset = _controller1.text.length > 4 ? _controller1.text.length - 4 : 0;
      if (_focusNode1.hasFocus) {
        _controller1.selection = TextSelection(
          baseOffset: _baseOffset,
          extentOffset: _controller1.text.length,
        );
      }
    });

    _focusNode2.addListener(() {
      int _baseOffset = _controller2.text.length > 4 ? _controller2.text.length - 4 : 0;
      if (_focusNode2.hasFocus) {
        _controller2.selection = TextSelection(
          baseOffset: _baseOffset,
          extentOffset: _controller2.text.length,
        );
      }
    });
  }

  Widget myTextFormField1() {
    _controller1.text = '458.90';
    return TextFormField(
      autofocus: true,
      focusNode: _focusNode1,
      controller: _controller1,
      onFieldSubmitted: (String value) {
        FocusScope.of(context).requestFocus(_focusNode2);
      },
      keyboardType: _keyboardType,
      inputFormatters: [_decimalFormatter],
      textInputAction: TextInputAction.next,
    );
  }

  Widget myTextFormField2() {
    _controller2.text = '123.45';
    return TextFormField(
      autofocus: false,
      focusNode: _focusNode2,
      controller: _controller2,
      onFieldSubmitted: (String value) {
        FocusScope.of(context).requestFocus(_focusNode3);
      },
      keyboardType: _keyboardType,
      inputFormatters: [_decimalFormatter],
      textInputAction: TextInputAction.next,
    );
  }

  @override
  void dispose() {
    _controller1.dispose();
    _controller2.dispose();
    super.dispose();
  }
}

class DecimalNumberTextInputFormatter extends TextInputFormatter {
  final int _decimalPlaces;

  DecimalNumberTextInputFormatter(this._decimalPlaces);

  @override
  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
    final String stripped = newValue.text.replaceAll(',', '').replaceAll('.', '');
    final int intNum = int.tryParse(stripped);
    if (intNum == null) {
      return oldValue;
    }
    final dblNum = intNum / pow(10, _decimalPlaces);
    final String newString = dblNum.toStringAsFixed(_decimalPlaces);
    if (newValue.text.compareTo(oldValue.text) == 0) {
      return newValue;
    } else if (double.parse(newValue.text) == 0.0) {
      return TextEditingValue(text: '');
    }
    return TextEditingValue(
      text: newString,
      selection: TextSelection(
        baseOffset: newString.length,   //TODO: Need the old cursor location + 1 here
        extentOffset: newString.length, //TODO: Need the old cursor location + 1 here
      ),
    );
  }
}

Кстати, я открыт для предложений по упрощению этого кода.Кажется, что это может быть СУХОЙ:)

Спасибо за любые предложения ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...