dart 如何加粗(或格式化)段落中的一段文字?

6qfn3psc  于 2023-10-13  发布在  其他
关注(0)|答案(9)|浏览(138)

我怎么能有一行不同格式的文本?
例如:
你好世界

v1l68za4

v1l68za41#

您应该使用RichText小部件。
RichText小部件将接受一个TextSpan小部件,该小部件也可以具有子TextSpans列表。
每个TextSpan小部件都可以有不同的TextStyle
下面是要呈现的示例代码:你好世界

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

7dl7o3gd2#

[更新]

下面的答案最适合几个词,而不是一个段落,如果你有一个长句或一个段落,你需要格式化一个特定的文本,更喜欢使用RichText建议由@Dvdwasibi在上面的答案

[老答案]

我喜欢保持我的代码简短和干净,这是我如何做到这一点添加两个文本字段在一行一个正常字体和另一个**粗体 *,

**注意:这可能不好看,因为长段落看起来适合标题等。

Row(children: [
  Text("Hello"),
  Text("World", style: const TextStyle(fontWeight: FontWeight.bold))
]);

你应该得到一个想要的输出“HelloWorld

plupiseo

plupiseo3#

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?'),
    ],
  ),
);
avwztpqn

avwztpqn4#

您应该使用Texthere中的Text.rich构造函数。
通过使用rich构造函数,您可以显示具有不同样式的TextSpans的段落。
我之所以推荐它而不是RichText,是因为使用RichText时,需要在RichText中定义父TextStyle,而使用Textrich构造函数时,不需要在Text.rich中显式定义父TextStyle
下面是使用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)),
    ],
  ),
 );

使用Textrich构造函数

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)),
    ],
  ),
)
zlhcx6iw

zlhcx6iw5#

我已经解决了一个类似的问题,通过使用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,
                ),
    )
 );

我认为这种方法是有用的,如果你有很多不同风格的文本在你的常规文本。

ubof19bj

ubof19bj6#

还没有完全测试过,但是你可以尝试这个帮助函数,它使用Text.rich并接受fullTexttextToBold,然后返回一个Text:

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],
      ),
    );
}
ctrmrzij

ctrmrzij7#

正则表达式

你可以使用这个widget。下面的例子总是把数字加粗。

import 'package:flutter/material.dart';

class TextBold extends StatelessWidget{
  final String text;
  final String regex;
  static const _separator = " ";

  const TextBold({Key key, this.text, this.regex = r'\d+'}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    final parts = splitJoin();

    return Text.rich(TextSpan(
        children: parts.map((e) => TextSpan(
            text: e.text,
            style: (e.isBold)
                ? const TextStyle(fontFamily: 'bold')
                : const TextStyle(fontFamily: 'light')))
            .toList()));
  }

  // Splits text using separator, tag ones to be bold using regex
  // and rejoin equal parts back when possible
  List<TextPart> splitJoin(){
    assert(text!=null);

    final tmp = <TextPart>[];

    final parts = text.split(_separator);

    // Bold it
    for (final p in parts){
      tmp.add(TextPart(p + _separator,p.contains(RegExp(regex))));
    }

    final result = <TextPart>[tmp[0]];
    // Fold it
    if (tmp.length>1) {
      int resultIdx = 0;
      for (int i = 1; i < tmp.length; i++)
        if (tmp[i - 1].isBold != tmp[i].isBold) {
          result.add(tmp[i]);
          resultIdx++;
        }
        else
          result[resultIdx].text = result[resultIdx].text
              + tmp[i].text;
    }

    return result;
  }
}

class TextPart{
  String text;
  bool isBold;

  TextPart(this.text, this.isBold);
}
dw1jzc5e

dw1jzc5e8#

RichText()

或者,如果你从例如'someText'.tr接收文本,那么使用styled_textpub包。

67up9zun

67up9zun9#

一个字符串列表的示例代码,以粗体作为参数,并循环遍历它们以查找它们在全文中的位置。然后,它创建具有适当样式的文本跨度,并返回RichText小部件。这是对给定答案的修改。有了这个,你可以加粗多个单词/文本

RichText boldTextPortions(
  String fullText,
  List<String> textsToBold,
) {
  final textSpans = List.empty(growable: true);
  int start = 0;
  for (final textToBold in textsToBold) {
    final index = fullText.indexOf(textToBold, start);
    if (index != -1) {
      textSpans.add(TextSpan(text: fullText.substring(start, index)));
      textSpans.add(TextSpan(
        text: textToBold,
        style: TextStyle(fontWeight: FontWeight.bold),
      ));
      start = index + textToBold.length;
    }
  }
  textSpans.add(TextSpan(text: fullText.substring(start)));
  return RichText(
      text: TextSpan(
    children: <TextSpan>[...textSpans],
  ));
}

相关问题