如何用Flutter设置文本背景？

Question

我很吵，但我很想从一开始就学习它。

现在我正在尝试改变某些文字的背景颜色这样一个基本的东西，但我卡住了。

import 'package:flutter/material.dart';

void main() {

  final barColor = const Color(0xFFD63031);

  var app = MaterialApp(    
    home: Scaffold(    
      backgroundColor: barColor,    
    ),    
  );

  Center(    
    child: Text('My Text',      
      textDirection: TextDirection.ltr,    
    ),    
  );
      runApp(app);
}

我明白为什么文本没有显示，但我已经在这几天工作了，我已经尝试了很多不同的事情而没有成功，所以任何帮助都将非常感激。

谢谢

Answer 1

首先，欢迎来到Flutter和StackOverflow :)

发生这种情况是因为误解了你应该用Flutter开发的方式。与你从main()函数开始的其他架构所发生的情况相反，安装你的vars /对象并从那里开发你的流程，Flutter你也可以从你的main()函数启动你的widget树，通常使用MaterialApp或CupertinoApp并且适合在其所有孩子中创建您的应用程序。

所以，作为获得你想要的东西的例子，你必须添加你的Center小部件作为你的Scaffold的主体，然后给你的TextStyle小部件提供Text，提供属性color。我把它给了蓝色，但你可以给你想要的任何东西。因此，这是您重构的代码

void main() => runApp(
      MaterialApp(
        home: Scaffold(
          backgroundColor: const Color(0xFFD63031),
          body: Center(
            child: Text(
              'MyText',
              textDirection: TextDirection.ltr,
              style: TextStyle(
                background: Paint()..color = Colors.blue,
              ),
            ),
          ),
        ),
      ),
    );

这将提供以下结果

我建议你看看Awesome Flutter repo，你有很多好的Flutter内容，可以真正帮助你。