如何更改 textformfield 上主题标签的颜色？

Question

我想在包含主题标签（#）时更改输入文本颜色，而不更改不包含主题标签的其他文本颜色

    TextFormField(
                                        minLines: 1,
                                        maxLines:
                                            5, // allow user to enter 5 line in textfield
                                        keyboardType: TextInputType
                                            .multiline, // user keyboard will have a button to move cursor to next line

                                        controller:
                                            postController.captionController,

                                        decoration: const InputDecoration.collapsed(
                                          hintText: 'caption',
                                          hintStyle: TextStyle(    
                                                                                    fontSize: 15,
)
                                          
                                        ),
                                        style: const TextStyle(
                                            color: Colors.black,
                                            fontSize: 18,
                                            fontWeight: FontWeight.bold),
                                        validator: (value) {
                                          return postController
                                              .validateCaption(value!);
                                        },
                                      ),

Answer 1

我能够通过使用rich_text_controller 包来实现此功能。

这是我的例子：

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

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

class _AppContentState extends State<AppContent> {
  // Add a controller
  late RichTextController _controller;

  @override
  void initState() {
    _controller = RichTextController(
      patternMatchMap: {
        RegExp(r"\B#[a-zA-Z0-9]+\b"): TextStyle(color: Colors.cyan),
      },
      onMatch: (List<String> matches) {
        // Do something with matches.
      },
      deleteOnBack: true,
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          controller: _controller,
        )
      ],
    );
  }
}

Answer 2

您可以像这样使用 .contains() 方法：

String myString = "#Text";
bool hasHash = myString.contains('#'); // yields true

然后在您的 TextStyle() 中使用三元表达式：

TextStyle(color:hasHash ? Colors.green : Colors.red;)

现在将它应用到您的输入控制器。请参阅 Flutter Cookbock 中的 link。这是简短的表格，但我建议逐步按照文档中的步骤进行操作：

1. 创建控制器：final myController = TextEditingController();
2. 将其添加到表单中的字段：TextField(controller: myController);
3. 检索当前值：myController.text
4. 使用上面的逻辑：bool hasHash = myController.text.contains('#')
5. 动态输出颜色：TextStyle( color:hasHash ? Colors.green : Colors.red;