正则表达式

Question

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

e.g：

您好世界

Answer 1

您应该使用RichText小部件。

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

每个TextSpan窗口小部件可以有不同的TextStyle。

以下是要呈现的示例代码：您好世界

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

我希望代码简洁明了，这就是我要如何在行中添加两个文本字段，其中一个使用Normal字体，另一个使用粗体

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

，您应该会得到一个期望的输出为“ Hello 世界”

Answer 3

正则表达式

您可以使用此小部件。下面的例子总是使数字加粗。

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

Answer 4

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 5

您应该使用 Text.rich 类 here 中的 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 6

另一种方法：

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

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

6 个答案:

正则表达式