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

TL; DR：

TextStyle(background: Paint()..color = Colors.blue)

好答案

首先，欢迎使用Flutter和StackOverflow :)

发生这种情况是因为误解了Flutter开发方式的误解。与其他从main()函数开始的体系结构发生的情况相反，使vars / objects不稳定并从那里开始开发流程，使用Flutter，您也从main()函数开始小部件树，通常使用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仓库，那里有很多很好的Flutter内容，可以真正帮助您。

Answer 2

很简单，您可以在 style 属性中设置它..

Text(
  'My Text...',
  style: TextStyle(backgroundColor: Colors.grey),
)

您可以在text

中将这么多属性设置为style: TextStyle()

{ bool inherit = true, 
  Color color, 
  Color backgroundColor, 
  double fontSize, 
  FontWeight fontWeight, 
  FontStyle fontStyle, 
  double letterSpacing, 
  double wordSpacing, 
  TextBaseline textBaseline, 
  double height, 
  Locale locale, 
  Paint foreground, 
  Paint background, 
  List<Shadow> shadows, 
  List<FontFeature> fontFeatures, 
  TextDecoration decoration, 
  Color decorationColor, 
  TextDecorationStyle decorationStyle, 
  double decorationThickness, 
  String debugLabel, 
  String fontFamily, 
  List<String> fontFamilyFallback, 
  String package
}

如何使用Flutter设置文本背景？

2 个答案: