我正在尝试在 RichText 小部件中获取红色星号();我可以使用 style 属性。但它会使整个文本变成红色。我只希望星号()是红色的。任何线索,如何实现它?
这是我的 RichText 小部件,现在我可以查看与文本其余部分相同颜色的星号 (*)。
RichText(
text: TextSpan(
text: '$labelText *',
style: TextStyle(
color: labelColor, fontWeight: fontWeight, fontSize: fontSize)),
textScaleFactor: labelTextScale,
maxLines: labelMaxLines,
overflow: overflow,
textAlign: textAlign,
);
我知道怎么做了。 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,
),
将 flutter 升级到 2.5.3,您将获得一个“标签”小部件来自定义您的标签。你可以随心所欲地改变。
decoration: InputDecoration(
label: Row(
children: [
CustomText(widget.label,
font: Font.NUNITO_REGULAR, color: ColorResource.COLOR_cacaca),
if (widget.isMandatory)
const CustomText(" *",
font: Font.NUNITO_REGULAR,
color: ColorResource.COLOR_DB4437)
],
),
你可以使用这个:
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,
)
您甚至可以通过 Children 属性更改 TextSpan 中所有字符的颜色,也可以使用此功能。
这是我的示例代码,您可以理解它:
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: 'Navigation Basics',
home: HomePage(),
));
}
class HomePage extends StatelessWidget {
String labelText = "Ayush Kumar ";
@override
Widget build(BuildContext context) {
return Scaffold(
body:Center(
child:RichText(
text: TextSpan(
text: '$labelText',
style: TextStyle(
color: Colors.black,
fontSize:30.0,
fontWeight: FontWeight.bold,
),
children: [
TextSpan(
text: ' *',
style: TextStyle(
color: Colors.red,
fontSize:30.0,
fontWeight: FontWeight.bold,
)),
TextSpan(
text: ' *',
style: TextStyle(
color: Colors.blue,
fontSize:30.0,
fontWeight: FontWeight.bold,
)),
])),
),
);
}
}
谢谢,从这里回答,我找到了一个解决方案......除了你必须将 labeltext 更改为 label
child: TextFormField(
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontFamily: 'DM Sans'),
keyboardType: TextInputType.name,
textAlign: TextAlign.center,
decoration: InputDecoration(
label: RichText(
text: TextSpan(
text: 'Nom',
style: TextStyle(
color: Colors.green,
),
children: [
TextSpan(
text: '*',
style: TextStyle(color: Colors.yellow))
]),
),
hintText: 'Nom',
labelStyle: TextStyle(color: Color(0xFF6F6F6F)),
hintStyle: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w500,
color: Colors.black,
fontFamily: 'DM Sans',
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Color(0xFF6F6F6F))),
border: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xFF6F6F6F),
)),
prefixIcon: Padding(
padding: EdgeInsets.all(10),
child: SvgPicture.asset("assets/icons/icon_name.svg"),
),
),
),