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

我怎样才能有一行不同格式的文本?

例如:

你好 世界

138618 次浏览

您应该使用 RichText小部件。

RichText 小部件将包含一个 TextSpan小部件,该小部件还可以包含子 TextSpans 列表。

每个 TextSpan 小部件可以有不同的 文本风格

下面是要呈现的示例代码: 你好 世界

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

[更新]

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

[旧的答案]

我喜欢保持我的代码简洁,这是我将如何做到这一点添加两个文本字段在一行一个正常字体和另一个 大胆,

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

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

你应该得到一个想要的输出“ Hello 世界

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

正方糖

您可以使用这个小部件。

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);
}


您应该使用来自 Text给你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)),
],
),
)

虽然还没有完全测试,但是你可以试试这个 helper 函数,它使用 Text.rich,接收 fullText,然后 textToBold返回一个 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],
),
);
}

我已经通过使用 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,
),
)
);

我认为这种方法对于常规文本中存在大量不同样式的文本非常有用。

RichText()

或者,如果您从例如 'someText'.tr收到文本, 所以使用 Styled _ text酒吧软件包。