Flutter 应为类型为';字符串';,但是得到了一个类型';文本';
在flatter中格式化MDICONS中包含的文本并将文本设置为特定颜色(在我的示例中为白色)的最佳方法是什么 这样做的结果是文本显示为黑色(默认设置为flatter,我希望如此): 这样做我最终会出错Flutter 应为类型为';字符串';,但是得到了一个类型';文本';,flutter,dart,Flutter,Dart,在flatter中格式化MDICONS中包含的文本并将文本设置为特定颜色(在我的示例中为白色)的最佳方法是什么 这样做的结果是文本显示为黑色(默认设置为flatter,我希望如此): 这样做我最终会出错 [MdiIcons.shieldAccount, Colors.deepPurple, Text('COVID-19 Info Center', style: TextStyle(color: Colors.white),)] 抛出的错误是 应为“String”类型的值,但得到了“Text”
[MdiIcons.shieldAccount, Colors.deepPurple, Text('COVID-19 Info Center', style: TextStyle(color: Colors.white),)]
抛出的错误是
应为“String”类型的值,但得到了“Text”类型的值
代码
class MoreOptionsList extends StatelessWidget {
final List<List> _moreOptionsList = const [
[MdiIcons.shieldAccount, Colors.deepPurple, Text('COVID-19 Info Center', style: TextStyle(color: Colors.white),)],
[MdiIcons.accountMultiple, Colors.cyan, Text('Friends', style: TextStyle(color: Colors.white),)],
[MdiIcons.facebookMessenger, Colors.pinkAccent, Text('Messenger', style: TextStyle(color: Colors.white),)],
[MdiIcons.flag, Colors.orange, Text('Pages', style: TextStyle(color: Colors.white),)],
[MdiIcons.storefront, Colors.lightBlue, Text('Market Place', style: TextStyle(color: Colors.white),)],
[MdiIcons.video, Colors.green, Text('Events', style: TextStyle(color: Colors.white),)],
];
final User currentUser;
const MoreOptionsList({Key key,
@required this.currentUser}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
constraints: BoxConstraints(maxWidth: 280.0),
child: ListView.builder(
itemCount: 1 + _moreOptionsList.length,
itemBuilder: (BuildContext context, int index){
if(index == 0) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: UserCard(user: currentUser),
);
}
final List option = _moreOptionsList [index-1];
return Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: _Option(icon: option[0], color: option[1], label: option[2]),
);
},
),
);
}
}
class _Option extends StatelessWidget {
final IconData icon;
final Color color;
final String label;
const _Option({Key key,
@required this.icon,
@required this.color,
@required this.label}) : super(key: key);
@override
Widget build(BuildContext context) {
return InkWell(
onTap: () => print(label),
child: Row(
children: [
Icon(icon, size:38.0, color: color,),
const SizedBox(width: 6.0),
Flexible(child: Text(
label, style: const TextStyle(fontSize: 16.0),
overflow: TextOverflow.ellipsis,
),)
],
),
);
}
}
class MoreOptions列表扩展了无状态小部件{
最终列表_more选项列表=常量[
[mdicons.shieldcount,Colors.deepPurple,Text('COVID-19信息中心',样式:Text样式(颜色:Colors.white),)],
[mdicons.accountMultiple,Colors.cyan,Text('Friends',style:TextStyle(color:Colors.white),)],
[mdicons.facebookMessenger,Colors.pinkAccent,Text('Messenger',style:TextStyle(color:Colors.white),)],
[mdicons.flag,Colors.orange,Text('page',style:TextStyle(color:Colors.white)),
[mdicons.storefront,Colors.lightBlue,Text('Market Place',style:TextStyle(color:Colors.white),)],
[mdicons.video,Colors.green,Text('Events',style:TextStyle(color:Colors.white)),
];
最终用户当前用户;
const moreOptionList({Key,
@必需。currentUser}):super(key:key);
@凌驾
小部件构建(构建上下文){
返回容器(
约束:框约束(最大宽度:280.0),
子项:ListView.builder(
itemCount:1+\u moreOptionsList.length,
itemBuilder:(构建上下文,int索引){
如果(索引==0){
返回填充(
填充:常量边集。对称(垂直:8.0),
子项:用户卡(用户:currentUser),
);
}
最终列表选项=_更多选项列表[index-1];
返回填充(
填充:常量边集。对称(垂直:8.0),
子项:_选项(图标:选项[0],颜色:选项[1],标签:选项[2]),
);
},
),
);
}
}
类_选项扩展了无状态小部件{
最终的Iconda图标;
最终颜色;
最终字符串标签;
const_选项({Key,
@需要此.icon,
@需要这个颜色,
@必需:this.label}):super(key:key);
@凌驾
小部件构建(构建上下文){
回墨槽(
onTap:()=>打印(标签),
孩子:排(
儿童:[
图标(图标,大小:38.0,颜色:color,),
常量大小框(宽度:6.0),
灵活(子:文本)(
标签,样式:常量文本样式(fontSize:16.0),
溢出:TextOverflow.省略号,
),)
],
),
);
}
}
文本
是一个小部件
不是一个字符串您应该在小部件中为需要字符串的文本上色,这意味着您不能将小部件用于字符串如果您想从列表中获取小部件,您应该将标签类型更改为文本
或小部件
,而不是使用类似的字符串类型这个
class _Option extends StatelessWidget {
final IconData icon;
final Color color;
final Text label;
const _Option({Key key,
@required this.icon,
@required this.color,
@required this.label}) : super(key: key);
@override
Widget build(BuildContext context) {
return InkWell(
onTap: () => print(label),
child: Row(
children: [
Icon(icon, size:38.0, color: color,),
const SizedBox(width: 6.0),
Flexible(child: label)
],
),
);
}
}
如果上面的代码没有帮助或不够好,您可以通过将字符串添加到列表中,然后将其添加到文本中来使用此代码,不要忘记重新启动应用程序
final List<List> _moreOptionsList = const [
[Icons.ac_unit, Colors.deepPurple, 'COVID-19 Info Center'],
[Icons.ac_unit, Colors.cyan, 'Friends'],
[Icons.ac_unit, Colors.pinkAccent, 'Messenger'],
[Icons.ac_unit, Colors.orange, 'Pages'],
[Icons.ac_unit, Colors.lightBlue, 'Market Place'],
[Icons.ac_unit, Colors.green, 'Events'],
];
class _Option extends StatelessWidget {
final IconData icon;
final Color color;
final String label;
const _Option(
{Key key,
@required this.icon,
@required this.color,
@required this.label})
: super(key: key);
@override
Widget build(BuildContext context) {
return InkWell(
onTap: () => print(label),
child: Row(
children: [
Icon(
icon,
size: 38.0,
color: color,
),
const SizedBox(width: 6.0),
Flexible(
child: Text(
'$label',
style: const TextStyle(fontSize: 16.0, color: Colors.black),
overflow: TextOverflow.ellipsis,
),
)
],
),
);
}
}
final List\u moreOptionsList=const[
[Icons.ac_unit,Colors.deepPurple,'新冠病毒-19信息中心'],
[Icons.ac_unit,Colors.cyan,'Friends'],
[Icons.ac_unit,Colors.pinkAccent,“Messenger”],
[Icons.ac_单位,Colors.orange,'页面'],
[Icons.ac_单位,Colors.lightBlue,'市场'],
[Icons.ac_单位,Colors.green,“事件”],
];
类_选项扩展了无状态小部件{
最终的Iconda图标;
最终颜色;
最终字符串标签;
常数选项(
{键,
@需要此.icon,
@需要这个颜色,
@必需的。标签})
:super(key:key);
@凌驾
小部件构建(构建上下文){
回墨槽(
onTap:()=>打印(标签),
孩子:排(
儿童:[
图标(
偶像
尺寸:38.0,
颜色:颜色,
),
常量大小框(宽度:6.0),
灵活的(
子:文本(
“$label”,
样式:const TextStyle(fontSize:16.0,颜色:Colors.black),
溢出:TextOverflow.省略号,
),
)
],
),
);
}
}
我应该如何编写它?
final List<List> _moreOptionsList = const [
[Icons.ac_unit, Colors.deepPurple, 'COVID-19 Info Center'],
[Icons.ac_unit, Colors.cyan, 'Friends'],
[Icons.ac_unit, Colors.pinkAccent, 'Messenger'],
[Icons.ac_unit, Colors.orange, 'Pages'],
[Icons.ac_unit, Colors.lightBlue, 'Market Place'],
[Icons.ac_unit, Colors.green, 'Events'],
];
class _Option extends StatelessWidget {
final IconData icon;
final Color color;
final String label;
const _Option(
{Key key,
@required this.icon,
@required this.color,
@required this.label})
: super(key: key);
@override
Widget build(BuildContext context) {
return InkWell(
onTap: () => print(label),
child: Row(
children: [
Icon(
icon,
size: 38.0,
color: color,
),
const SizedBox(width: 6.0),
Flexible(
child: Text(
'$label',
style: const TextStyle(fontSize: 16.0, color: Colors.black),
overflow: TextOverflow.ellipsis,
),
)
],
),
);
}
}