为啥 Text 小部件已经在 Flutter 中预定义了样式？

Posted 2023-02-23

【中文标题】为啥 Text 小部件已经在 Flutter 中预定义了样式？

【英文标题】：Why Text widget already have predefined styles in Flutter?为什么 Text 小部件已经在 Flutter 中预定义了样式？

【发布时间】：2020-03-27 22:48:38

【问题描述】：

我有一条使用 Navigator 推送的路线。奇怪的是，在这条新路线中，我所有的 Text 小部件看起来都已经有了预定的红色样式、32-ish 字体大小、控制台字体和双黄色下划线。

代码如下：

import 'package:flutter/material.dart';
import 'package:movie_browsers/src/models/item_model.dart';

class MovieDetail extends StatelessWidget 
  final MovieModel movieModel;

  const MovieDetail( Key key, this.movieModel ) : super(key: key);

  @override
  Widget build(BuildContext context) 
    // TODO: implement build
    return Center(
      child: Column(
          children: [
            Image.network('https://image.tmdb.org/t/p/w185$movieModel.posterPath', fit: BoxFit.cover),
            Text(movieModel.title, style: TextStyle(color: const Color(0xFFFFFFFFF), fontSize: 14),),
            Text("testing"),
          ]
      ),
    );
  

这是屏幕截图：

我已经在“冰雪奇缘 II”文本中应用了样式，因为我正试图围绕奇怪的样式展开思考。 “测试”文本是没有任何样式的“纯”文本小部件结果。为什么会这样？

之前的（主）屏幕没有这种怪异之处。所有文本都是正常的（正如没有样式的文本所预期的那样）。

【参考方案1】：

那是因为您没有使用任何Material 组件。它有很多解决方案，比如你可以使用Scaffold、Material 小部件等。

@override
Widget build(BuildContext context) 
  return Material( // add this
    child: Center(
      child: Column(
          children: [
            Image.network('https://image.tmdb.org/t/p/w185$movieModel.posterPath', fit: BoxFit.cover),
            Text(movieModel.title, style: TextStyle(color: const Color(0xFFFFFFFFF), fontSize: 14),),
            Text("testing"),
          ]
      ),
    ),
  );

【讨论】：

哦等等...是的，你是对的。呸！ *facepalm 新手的痛苦。谢谢！

是的，我还需要再等 5 分钟才能设置接受的答案?

我讨厌这个“你必须等待 x 分钟才能接受”的规则。 ?

【参考方案2】：

将整个代码封装在 Scaffold 中，

Scaffold(
      body: Center(
        child: Column(
            children: [
              Image.network('https://image.tmdb.org/t/p/w185$movieModel.posterPath', fit: BoxFit.cover),
              Text(movieModel.title, style: TextStyle(color: const Color(0xFFFFFFFFF), fontSize: 14),),
              Text("testing"),
            ]
        ),
      ),
    );

【讨论】：

是的，我刚刚意识到。我太专注于创建树，我忘记了如果它是推送路线，我必须使用 Scaffold。谢谢！

【参考方案3】：

使用脚手架小部件

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter'),
        ),
        body: Center(
          child: Container(
            child: Text('Hello World'),
          ),
        ),
      ),
    );
  
               

                                                                       

【参考方案4】：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter'),
        ),
        body: Center(
          child: Container(
            child: Text('Hello World'),
          ),
        ),
      ),
    );
  
        

【参考方案5】：

MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter'),
        ),
        body: Center(
          child: Container(
            child: Text('Hello World'),
          ),
        ),
      ),
    );