如何在段落中加粗(或格式化)一段文本？

Question

如何使用不同格式的文本行？

例如:

你好世界

Answer 1

您应该使用RichText小部件.

RichText小部件将接收TextSpan小部件,该小部件也可以包含子TextSpans列表.

每个TextSpan小部件都可以具有不同的TextStyle.

以下是要呈现的示例代码:Hello World

var text = new RichText(
  text: new TextSpan(
    // Note: Styles for TextSpans must be explicitly defined.
    // Child text spans will inherit styles from parent
    style: new TextStyle(
      fontSize: 14.0,
      color: Colors.black,
    ),
    children: <TextSpan>[
      new TextSpan(text: 'Hello'),
      new TextSpan(text: 'World', style: new TextStyle(fontWeight: FontWeight.bold)),
    ],
  ),
 );

Answer 2

我喜欢保持我的代码简洁和干净这是我怎么做它添加两个文本字段连续一个普通字体和另一个粗体

Row(children: <Widget>[
      Text("Hello"),
      Text("World", style: TextStyle(fontWeight: FontWeight.bold))
    ])
`

你应该得到一个所需的输出作为"你好世界 "

Answer 3

return RichText(
  text: TextSpan(
    text: 'Can you ',
    style: TextStyle(color: Colors.black),
    children: <TextSpan>[
      TextSpan(
        text: 'find the',
        style: TextStyle(
          color: Colors.green,
          decoration: TextDecoration.underline,
          decorationStyle: TextDecorationStyle.wavy,
        ),
        recognizer: _longPressRecognizer,
      ),
      TextSpan(text: 'secret?'),
    ],
  ),
);

Answer 4

您应该使用此处类Text.rich中的构造函数。Text

通过使用rich构造函数，您可以显示具有不同样式的段落TextSpans。

为什么我推荐它而不是RichText因为使用RichText您将需要定义父级TextStyle，RichText但使用您rich的构造函数Text不需要显式定义父TextStyle级Text.rich

这是如何使用它获得相同结果的示例RichText

const text = RichText(
  text: TextSpan( 
    // Here is the explicit parent TextStyle
    style: new TextStyle(
      fontSize: 16.0,
      color: Colors.black,
      fontFamily: 'Montserrat', 
    ),
    children: <TextSpan>[
      new TextSpan(text: 'Hello'),
      new TextSpan(text: 'World', style: new TextStyle(fontWeight: FontWeight.bold)),
    ],
  ),
 );

使用rich构造函数Text

const text = Text.rich(
  TextSpan(
    // with no TextStyle it will have default text style
    text: 'Hello',
    children: <TextSpan>[
      TextSpan(text: 'World', style: TextStyle(fontWeight: FontWeight.bold)),
    ],
  ),
)

Answer 5

我通过使用flutter_html小部件以及不同标签的自定义样式解决了类似的问题。实际上，我有不同语言的字符串，其中的某些部分应该是粗体，因此很难确定应该将字符串的哪一部分设为粗体，因为字符串位于 l10n 语言环境文件中。这是示例：

Container(
   child: Html(
              data: "<p>My normal text <b>with bold part</b> in any place</p>",
              style: {
                "p": Style(
                    fontSize: FontSize.large,
                    fontWeight: FontWeight.normal),
                "b": Style(
                  fontWeight: FontWeight.bold,
                ),
    )
 );

我认为如果您的常规文本中有很多不同样式的文本，这种方法很有用。

Answer 6

尚未完全测试，但您可以尝试这个辅助函数，该函数使用Text.rich并接受fullText，textToBold然后返回一个文本：

static Text boldTextPortion(
    String fullText,
    String textToBold,
) {
    final texts = fullText.split(textToBold);
    final textSpans = List.empty(growable: true);
    texts.asMap().forEach((index, value) {
      textSpans.add(TextSpan(text: value));
      if (index < (texts.length - 1)) {
        textSpans.add(TextSpan(
          text: textToBold,
          style: const TextStyle(fontWeight: FontWeight.bold),
        ));
      }
    });
    return Text.rich(
      TextSpan(
        children: <TextSpan>[...textSpans],
      ),
    );
}