flutter - 如何用 Flutter 设置文字背景?

我对 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);
}

我确实理解为什么文本没有显示,但我已经为此工作了几天,并且我尝试了很多不同的事情但没有成功,因此非常感谢任何帮助。

谢谢

最佳答案

TL;DR -(2019 年 7 月 8 日更新)

使用样式属性(backgroundColor)

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

使用样式属性(background)

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

使用 DecoratedBox

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

长答案

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

这是因为误解了您应该使用 Flutter 进行开发的方式。 与从 main() 函数开始的其他架构不同,实例化你的 vars/objects 并从那里开发你的流程,使用 Flutter 你从 main 开始你的小部件树() 函数,通常使用 MaterialAppCupertinoApp 并适合其所有子级来创建您的应用程序。

因此,作为获得所需内容的示例,您必须将 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 内容可以开始,这真的可以帮助你。

https://stackoverflow.com/questions/53807975/

相关文章:

image - Flutter 图像未加载(异常 : resolving an image code

flutter - 如何在 Flutter 中并排显示按钮?

dart - Flutter 示例中的流布局

ios - CocoaPods 找不到 pod "Firebase/Core” 的兼容版本 | cl

function - 如何访问 Flutter Back 按钮功能?

dart - 如何在 flutter 中自定义标签栏宽度?

flutter - 如何在 flutter 中为折叠元素设置动画

dart - 如何限制 TextFormField 中的字符数?

android - 在为 x86 构建的 Android SDK 上启动应用程序时出错

dart - Flutter 改变 FloatingActionButton 的子图标颜色