Question

我正在尝试在RichText小部件中获得红色星号（）；我可以使用style属性。但这会使整个文本变成红色。我只希望星号（）为红色。有什么线索，如何实现？

这是我的RichText窗口小部件，现在我可以查看与其余文本相同颜色的星号（*）。

with open("dognames.txt", "r") as f:
    key = "Bob" 
    for line in f:
        if key in line:
            print line

Answer 1

我想出了办法。 TextSpan具有子级的属性，该属性以List作为值。

所以我为星号（*）分配了一个TextSpan。

 RichText(
    text: TextSpan(
        text: '$labelText',
        style: TextStyle(
            color: labelColor, fontWeight: fontWeight, fontSize: fontSize),
        children: [
           TextSpan(
                  text: ' *',
                  style: TextStyle(
                      color: Colors.red,
                      fontWeight: fontWeight,
                      fontSize: fontSize))
        ]),
    textScaleFactor: labelTextScale,
    maxLines: labelMaxLines,
    overflow: overflow,
    textAlign: textAlign,
  ),

Answer 2

最简单，最准确的方法-将TextSpan()与RichText()一起使用

RichText小部件显示使用多种不同样式的文本。使用TextSpan对象的树来描述要显示的文本，每个对象都有用于该子树的关联样式。

可以使用TextSpan对象的style属性来设置其样式。该样式将应用于文本和子项。

  RichText(
      text: TextSpan(
          text: 'Country of Residence',
          style: TextStyle(
              fontSize: 16.0, color: Colors.blue),
          children:
          [
            TextSpan(
              text:' *',
              style: TextStyle(
                  color: Colors.red,
                  fontSize: 16.0),
            ),                                           ]
      ),
    )

Answer 3

你可以使用这个：

class FormField extends StatelessWidget {
  final String label;
  final bool withAsterisk;
  const FormField({Key key, @required this.label, @required this.withAsterisk})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      Container(
        padding: EdgeInsets.fromLTRB(16, 16, 16, 0),
        child: TextFormField(
          decoration: InputDecoration(
              border: OutlineInputBorder(),
              focusedBorder: OutlineInputBorder(),
              errorBorder: OutlineInputBorder(
                borderSide: const BorderSide(color: Colors.red, width: 1),
              )),
        ),
      ),
      Padding(
        padding: const EdgeInsets.only(left: 32, top: 10),
        child: RichText(
          text: TextSpan(
            children: <TextSpan>[
              TextSpan(
                  text: ' $label',
                  style: TextStyle(
                      backgroundColor:
                          Theme.of(context).scaffoldBackgroundColor,
                      color: DsColor.textColorDrkGrey,
                      fontWeight: FontWeight.w400,
                      fontSize: 12)),
              TextSpan(
                  text: withAsterisk ? '* ' : ' ',
                  style: TextStyle(
                      fontWeight: FontWeight.w500,
                      fontSize: 12,
                      backgroundColor:
                          Theme.of(context).scaffoldBackgroundColor,
                      color: Colors.red)),
            ],
          ),
        ),
      ),
    ]);
  }
}

用法：

FormField(
  label: "Name",
  withAsterisk: true,
),
FormField(
  label: "Phone",
  withAsterisk: false,
)

Flutter：如何在标签中获得红色星号（*）

3 个答案: