Flutter Textfield 将每个单词大写

Question

class InputMdnWidget extends StatefulWidget {
  const InputMdnWidget({Key key}) : super(key: key);
  @override
  _InputMdnWidgetState createState() => _InputMdnWidgetState();
}

class _InputMdnWidgetState extends State<InputMdnWidget> {
  TextEditingController _controller;
  
  @override
  void initState() {

    super.initState();
    _controller = TextEditingController();
  }
  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _controller,
      textCapitalization: TextCapitalization.words       
    );
  }
}

我是 flutter 的新手，我有一个文本字段并使用了一个控制器，我想将用户输入的文本变成驼峰式大小写，例如，用户键入“lala lala”，文本字段中的文本将更改为“Lala Lala”，这可能吗？如何实现？

我使用 textCapitalization：TextCapitalization.words 不起作用

Answer 1

这样你也可以在 web 上处理。您也可以查看 .

的答案

把它放在某个地方

extension CapExtension on String {
  String get inCaps =>
      this.length > 0 ? '${this[0].toUpperCase()}${this.substring(1)}' : '';

  String get capitalizeFirstofEach => this
      .replaceAll(RegExp(' +'), ' ')
      .split(" ")
      .map((str) => str.inCaps)
      .join(" ");
}

并像 text.capitalizeFirstofEach 一样使用它。

import 'package:flutter/material.dart';

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

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


class _ExpandedddState extends State<Expandeddd> {
  final controller = TextEditingController();

  @override
  void initState() {
    super.initState();
    controller.addListener(() {
      final text = controller.text;

      /// dont set Text here
      controller.selection =
          TextSelection.fromPosition(TextPosition(offset: text.length));
    });
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        constraints: BoxConstraints(
          maxHeight: 812,
          minHeight: 300,
        ),
        child: Column(
          children: [
            TextField(
              controller: controller,
              textCapitalization: TextCapitalization.words,
              keyboardType: TextInputType.text,
              autocorrect: false,
              onChanged: (value) {
                controller.text = value.capitalizeFirstofEach;
              },
              style: TextStyle(
                fontSize: 30.0,
                color: Colors.black,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 2

您可以尝试使用 TextInputFormatters。这些使输入符合特定的模式，并且可以像这样提供给 TextFields：

TextField(
  controller: _controller,
  inputFormatters: [MyInputFormatter()],       
);

如果您想要自定义格式，并且我认为您想要“标题大小写”，您可以通过扩展 class 来创建自己的 TextInputFormatter，如下所示：

import 'package:flutter/services.dart';

class TitleCaseInputFormatter extends TextInputFormatter {
  String textToTitleCase(String text) {
    if (text.length > 1) {
      return text[0].toUpperCase() + text.substring(1);
      /*or text[0].toUpperCase() + text.substring(1).toLowerCase(), if you want absolute title case*/
    } else if (text.length == 1) {
      return text[0].toUpperCase();
    }

    return '';
  }

  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    String formattedText = newValue.text
        .split(' ')
        .map((element) => textToTitleCase(element))
        .toList()
        .join(' ');
    return TextEditingValue(
      text: formattedText,
      selection: newValue.selection,
    );
  }
}

再一次，像这样使用它：

TextField(
  controller: _controller,
  inputFormatters: [TitleCaseInputFormatter()],       
);

Flutter Textfield 将每个单词大写

Flutter Textfield Capitalize Each Word

textfield

flutter

inputformatter