Question

我正在尝试进行聊天提及，并且我需要在发送消息之前需要一些方法来更改TextField中提及的全名的颜色。

我该怎么做？

Answer 1

希望我还不算太晚:) 我遇到了同样的问题，在主flutter程序包或任何第三方程序包中都找不到任何实现，因此我砍了一些小包装并上传了它。它是文本编辑控制器的扩展，可以为它提供Regex模式图和相应的Text样式。

https://pub.dev/packages/rich_text_controller

https://github.com/micwaziz/rich_text_controller

Answer 2

如果有人偶然发现了这个问题（就像我做的那样）但需要文本字段来呈现可点击的链接，那么这里有一种方法来做到这一点（为了更清晰，从我们的最终实现中简化）。它的灵感来自 RichTextController，但其最终焦点是允许点击链接。

关于正则表达式：我们尝试使用 linkify，但尽管尝试了所有选项，它还是倾向于修改链接 - 这会扰乱用户输入。

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:url_launcher/url_launcher.dart';

class LinkedTextEditingController extends TextEditingController {
  final RegExp linkRegexp;
  final TextStyle linkStyle;
  final Function(String match) onTap;

  static RegExp _defaultRegExp =
      RegExp(r'((?:(https?:\/\/)?)(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,5}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*))', caseSensitive: false, dotAll: true);

  static void _defaultOnLaunch(String url) async {
    final re = RegExp('^https?://');
    final fullUrl = re.hasMatch(url) ? url : 'http://$url';
    if (await canLaunch(fullUrl)) {
      await launch(fullUrl);
    }
  }

  LinkedTextEditingController({
    String text,
    RegExp regexp,
    this.linkStyle,
    this.onTap = _defaultOnLaunch,
  })  : linkRegexp = regexp ?? _defaultRegExp,
        super(text: text);

  LinkedTextEditingController.fromValue(
    TextEditingValue value, {
    RegExp regexp,
    this.linkStyle,
    this.onTap = _defaultOnLaunch,
  })  : linkRegexp = regexp ?? _defaultRegExp,
        assert(
          value == null || !value.composing.isValid ||     value.isComposingRangeValid,
          'New TextEditingValue $value has an invalid non-empty composing range '
          '${value.composing}. It is recommended to use a valid composing range, '
          'even for readonly text fields',
        ),
        super.fromValue(value ?? TextEditingValue.empty);

  @override
  TextSpan buildTextSpan({TextStyle style, bool withComposing}) {
    List<TextSpan> children = [];

    text.splitMapJoin(
      linkRegexp,
      onMatch: (Match match) {
        children.add(
          TextSpan(
            text: match[0],
            style: linkStyle,
            recognizer: onTap == null ? null : TapGestureRecognizer()
              ..onTap = () => onTap(match[0]),
          ),
        );
        return null;
      },
      onNonMatch: (String span) {
        children.add(TextSpan(text: span, style: style));
        return span;
      },
    );

    return TextSpan(style: style, children: children);
  }
}

Answer 3

如果您只想更改文本字段中文本的颜色或字体：

| employee | calc |
|----------|------|
|     Alex |    2 |
|      Bob |    2 |
|     Jack |    1 |
|     Kate |    1 |
|   Oliver |    2 |

如果要使用多种样式，应检查，然后应选中RichText。

RichText小部件显示使用多种不同样式的文本。

Text("Hello", 
     style: TextStyle(color: Colors.black, fontWeight: FontWeight.w900))

Answer 4

正如Durdu建议的那样，您可以使用RichText来实现不同颜色的文本。只需使用TextStyle放置多个具有不同颜色的TextSpan。示例如下

Container(
            margin: const EdgeInsets.only(left: 20.0, right: 20.0, top: 10.0, bottom: 10.0),
            child: RichText(
              textAlign: TextAlign.center,
              text: TextSpan(
                children: [
                  TextSpan(
                    text: 'By clicking sign up, you have read and agreed to our ',
                    style: TextStyle(color: Colors.black54),
                  ),
                  TextSpan(
                    text: 'Terms & Conditions',
                    style: TextStyle(color: Colors.blue),
                    recognizer: TapGestureRecognizer()
                      ..onTap = () {
                        print('Tapped on hyperlink');
                      },
                  ),
                  TextSpan(
                    text: '.',
                    style: TextStyle(color: Colors.black54),
                  ),
                ],
              ),
            ),
          ),

希望这可以清除并解决您的问题。

如何更改TextField小部件中几个单词的颜色？

4 个答案: