Question

我有一个使用导航器推送的路线。奇怪的是，在这条新路线中，我所有的“文本”小部件看起来都已经具有预定的红色，32位字体大小，控制台字体和双下划线。

代码如下：

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"),
          ]
      ),
    );
  }
}

这是屏幕截图：

我已经尝试将样式应用于“ Frozen II”文本，因为我想将自己的头缠在奇怪的样式周围。 “测试”文本是没有任何样式的“纯文本”窗口小部件结果。为什么会这样？

上一个（主）屏幕没有这种怪异。所有文本都是正常的（如无样式的Text所预期）。

Answer 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"),
          ]
      ),
    ),
  );
}

Answer 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"),
            ]
        ),
      ),
    );

Answer 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'),
          ),
        ),
      ),
    );
  }
}

Answer 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'),
          ),
        ),
      ),
    );
  }
}

Answer 5

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

为什么Text小部件在Flutter中已经具有预定义的样式？

5 个答案: