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)),
],
),
);
使用Text的rich构造函数
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)),
],
),
)
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);
}
9条答案
按热度按时间v1l68za41#
您应该使用RichText小部件。
RichText小部件将接受一个TextSpan小部件,该小部件也可以具有子TextSpans列表。
每个TextSpan小部件都可以有不同的TextStyle。
下面是要呈现的示例代码:你好世界
7dl7o3gd2#
[更新]
下面的答案最适合几个词,而不是一个段落,如果你有一个长句或一个段落,你需要格式化一个特定的文本,更喜欢使用RichText建议由@Dvdwasibi在上面的答案
[老答案]
我喜欢保持我的代码简短和干净,这是我如何做到这一点添加两个文本字段在一行一个正常字体和另一个**粗体 *,
**注意:这可能不好看,因为长段落看起来适合标题等。
你应该得到一个想要的输出“HelloWorld”
plupiseo3#
avwztpqn4#
您应该使用
Text
类here中的Text.rich
构造函数。通过使用
rich
构造函数,您可以显示具有不同样式的TextSpans
的段落。我之所以推荐它而不是
RichText
,是因为使用RichText
时,需要在RichText
中定义父TextStyle
,而使用Text
的rich
构造函数时,不需要在Text.rich
中显式定义父TextStyle
下面是使用
RichText
获得相同结果的示例使用
Text
的rich
构造函数zlhcx6iw5#
我已经解决了一个类似的问题,通过使用flutter_html小部件为不同的标签定制样式。实际上,我得到了不同语言的字符串,它们的某些部分应该是粗体,所以不容易确定字符串的哪一部分应该是粗体,因为字符串在l10n语言环境文件中。下面是一个例子:
我认为这种方法是有用的,如果你有很多不同风格的文本在你的常规文本。
ubof19bj6#
还没有完全测试过,但是你可以尝试这个帮助函数,它使用
Text.rich
并接受fullText
和textToBold
,然后返回一个Text:ctrmrzij7#
正则表达式
你可以使用这个widget。下面的例子总是把数字加粗。
dw1jzc5e8#
或者,如果你从例如
'someText'.tr
接收文本,那么使用styled_textpub包。67up9zun9#
一个字符串列表的示例代码,以粗体作为参数,并循环遍历它们以查找它们在全文中的位置。然后,它创建具有适当样式的文本跨度,并返回RichText小部件。这是对给定答案的修改。有了这个,你可以加粗多个单词/文本