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

Question

我对 flutter 还很陌生，但我很想从头开始学习它。

现在我正在尝试更改某些文本的背景颜色等基本操作，但我卡住了。

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 -（2019 年 7 月 8 日更新）

使用样式 属性 (backgroundColor)

Text(
  'Some text...',
  style: TextStyle(backgroundColor: Colors.blue),
)

使用样式 属性 (background)

Text(
  'Some text...',
  style: TextStyle(background: Paint()..Colors.blue),
)

使用 DecoratedBox

const DecoratedBox(
  decoration: const BoxDecoration(color: Colors.blue),
  child: const Text('Some text...'),
);

---

长答案

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

发生这种情况是因为误解了使用 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),
)

您可以在 style: TextStyle()

中将这么多属性设置为 text

{ 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
}