如何向 flutter 中的文本字段添加小部件，如芯片或容器

Question

赏金将在 7 天后到期。 此问题的答案有资格获得+50声望赏金。 user3808307想提请更多人注意这个问题。

我有一个将由用户填写的文本字段小部件。 问题是除了填写文本之外，用户还应该能够从可以添加到文本之间（或结尾）的标签列表中进行选择，示例如图所示（图中我有使用了两个文本小部件和一个芯片，在实际情况下它将是一个文本字段而不是文本小部件）。

这里的解决方案不满足要求，因为它只添加了筹码而不是文本。 我还检查了扩展文本字段package 它也没有解决。 知道如何解决这个问题吗？

Answer 1

使用 package extended_text_field package。

结果：

只要有@符号，它就会在Chip中：

您需要扩展SpecialTextSpanBuilder并覆盖build ：

class MySpecialTextSpanBuilder extends SpecialTextSpanBuilder {
  @override
  TextSpan build(String data,
      {TextStyle? textStyle, SpecialTextGestureTapCallback? onTap}) {
    final lookingFor = "@";
    final splitData = data.split(" ");
    final spans = splitData.map((e) {
      if (e == lookingFor) {
        return WidgetSpan(
          child: Chip(
            label: Text(e),
          ),
        );
      } else {
        return TextSpan(
          text: e,
          style: TextStyle(color: Colors.red),
        );
      }
    }).toList();
    return TextSpan(children: spans, style: textStyle);
  }

  @override
  SpecialText? createSpecialText(String flag,
      {TextStyle? textStyle,
      SpecialTextGestureTapCallback? onTap,
      required int index}) {
    // TODO: implement createSpecialText
    throw UnimplementedError();
  }
}

在此代码中，如果文本包含@符号，那么我们将使用该数据创建一个Chip ，否则，我们将添加实际文本。

要使用创建的MySpecialTextSpanBuilder class：

Scaffold(
          backgroundColor: Colors.blue,
          body: ExtendedTextField(
            style: TextStyle(color: Colors.red),
            decoration: InputDecoration(
              border: OutlineInputBorder(),
            ),
            specialTextSpanBuilder: MySpecialTextSpanBuilder(),
          ),
        )

---

完整的可运行片段：

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

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        dividerColor: Colors.green,
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: SafeArea(
        child: Scaffold(
          backgroundColor: Colors.blue,
          body: ExtendedTextField(
            cursorColor: Colors.black,
            style: TextStyle(color: Colors.red),
            decoration: InputDecoration(
              border: OutlineInputBorder(),
            ),
            specialTextSpanBuilder: MySpecialTextSpanBuilder(),
          ),
        ),
      ),
    );
  }
}

class MySpecialTextSpanBuilder extends SpecialTextSpanBuilder {
  @override
  TextSpan build(String data,
      {TextStyle? textStyle, SpecialTextGestureTapCallback? onTap}) {
    final lookingFor = "@";
    final splitData = data.split(" ");
    final spans = splitData.map((e) {
      if (e == lookingFor) {
        return WidgetSpan(
          child: Chip(
            label: Text(e),
          ),
        );
      } else {
        return TextSpan(
          text: e,
          style: TextStyle(color: Colors.red),
        );
      }
    }).toList();
    return TextSpan(children: spans, style: textStyle);
  }

  @override
  SpecialText? createSpecialText(String flag,
      {TextStyle? textStyle,
      SpecialTextGestureTapCallback? onTap,
      required int index}) {
    // TODO: implement createSpecialText
    throw UnimplementedError();
  }
}

使用Text小部件

您可以将RichText与WidgetSpan作为子项一起使用：

内嵌在文本中的不可变小部件。

结果

代码

RichText(
      text: TextSpan(
        children: [
          TextSpan(
            text: "one",
          ),
          WidgetSpan(
            child: Chip(
              label: Text("two"),
            ),
          ),
          TextSpan(
            text: "three",
          ),
        ],
      ),
    )