flutter 在文本字段中更改部分文本选定 colored颜色

发布于02月18日

我希望当用户在文本字段中 Select 文本的一部分并单击 colored颜色按钮时，只会对所选文本的那部分进行着色. 谢谢

我搜索了所有的文章，但没有找到任何结果.

推荐答案

尼玛·扬·萨拉姆，您需要使用如下代码所示的rich_text_controller包:

首先，在您的pubspec.yaml(或任何兼容版本)中添加rich_text_controller: ^1.4.0.

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: RichTextControllerDemo(),
    );
  }
}

class RichTextControllerDemo extends StatefulWidget {
  const RichTextControllerDemo({super.key});

  @override
  State<RichTextControllerDemo> createState() => _RichTextControllerDemoState();
}

class _RichTextControllerDemoState extends State<RichTextControllerDemo> {

  RichTextController? _controller;

  @override
  void initState() {

    _controller = RichTextController(


      stringMatchMap: {
        "test": const TextStyle(color: Colors.red),
      },

      onMatch: (List<String> matches){

      }

    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextField(
                controller: _controller,
                
                onChanged: (value){
                },
              ),
              Padding(
                padding: const EdgeInsets.only(top : 20.0),
                child: InkWell(
                  child: const Text('click'),
                  onTap: (){

                  var start = _controller!.selection.start;
                  var end  = _controller!.selection.end;
                  var text = _controller!.text.substring(start,end);
                    setState(() {
                      _controller!.stringMatchMap!.addAll(
                        {
                          text : const TextStyle(color: Colors.cyan),
                        }
                      );
                    });
                  },
                ),
              )
            ],
          )),
    );
  }
}