Question

格式化MdiIcons中包含的文本并使其呈白色的最佳方法是什么？

这样做，最终文本显示为黑色（默认设置为flutter，我希望这样）：

[MdiIcons.shieldAccount, Colors.deepPurple, 'COVID-19 Info Center'],

这样做会导致错误结束

 [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,
          ),)
        ],
      ),
    );
  }
}

Answer 1

Text是widget而不是字符串，您应该在需要该字符串的小部件内为文本着色，这意味着您不能将小部件用作字符串

Answer 2

如果要从列表中获取小部件，则应将标签类型更改为Text或Widget，而不是像这样使用String类型

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

如果以上代码没有帮助或效果不够好，则可以通过以下方式使用此代码：将字符串添加到列表中，然后将其添加到文本don't forget to restart the app

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

预期值为'String'类型的值，但获得了'Text'类型的值

2 个答案: