App 的全局 ThemeData 在 flutter 中无法正常工作?
App's global ThemeData not working properly in flutter?
我想在我的应用程序中使用 ThemeData 的 textTheme 进行全局使用,而 textTheme 只是更改字体和颜色。
但是正如您在图片中看到的,Text Widgets 之间会有明显的区别。这种差异是怎么来的?因为上面标签的 TextStyle 实际上和底部标签是一样的。 ThemeData 会做更多的事情来改变我的 TextStyle 吗?
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
textTheme: TextTheme(
headline1: TextStyle(fontSize: 17, color: Color(0xFFFF0000)),
)),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
style: Theme.of(context).textTheme.headline1,
),
Text(
'You have pushed the button this many times:',
style: TextStyle(fontSize: 17, color: Color(0xFFFF0000)),
),
],
),
),
);
}
}
两个文本看起来不同的原因是您没有指定它们的 fontWeight,不幸的是 flutter 给两个文本不同的默认 fontWeights。您只需为两者指定相同的 fontWeight 即可。我尝试过这个。这是代码:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
textTheme: TextTheme(
headline1: TextStyle(fontSize: 17, color: Color(0xFFFF0000),
fontWeight: FontWeight.normal),
)),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
style: Theme.of(context).textTheme.headline1,
),
Text(
'You have pushed the button this many times:',
style: TextStyle(fontSize: 17, color: Color(0xFFFF0000),
fontWeight: FontWeight.normal),
),
],
),
),
);
}
}
我想在我的应用程序中使用 ThemeData 的 textTheme 进行全局使用,而 textTheme 只是更改字体和颜色。
但是正如您在图片中看到的,Text Widgets 之间会有明显的区别。这种差异是怎么来的?因为上面标签的 TextStyle 实际上和底部标签是一样的。 ThemeData 会做更多的事情来改变我的 TextStyle 吗?
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
textTheme: TextTheme(
headline1: TextStyle(fontSize: 17, color: Color(0xFFFF0000)),
)),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
style: Theme.of(context).textTheme.headline1,
),
Text(
'You have pushed the button this many times:',
style: TextStyle(fontSize: 17, color: Color(0xFFFF0000)),
),
],
),
),
);
}
}
两个文本看起来不同的原因是您没有指定它们的 fontWeight,不幸的是 flutter 给两个文本不同的默认 fontWeights。您只需为两者指定相同的 fontWeight 即可。我尝试过这个。这是代码:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
textTheme: TextTheme(
headline1: TextStyle(fontSize: 17, color: Color(0xFFFF0000),
fontWeight: FontWeight.normal),
)),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
style: Theme.of(context).textTheme.headline1,
),
Text(
'You have pushed the button this many times:',
style: TextStyle(fontSize: 17, color: Color(0xFFFF0000),
fontWeight: FontWeight.normal),
),
],
),
),
);
}
}