主题和文字
主题和文字
如何设置应用主题?
Flutter 实现了一套漂亮的 Material Design 组件,而且开箱可用,它提供了许多常用的样式和主题。
为了充分发挥应用中 Material Components 的优势,声明一个顶级的 widget,MaterialApp,来作为你的应用入口。MaterialApp 是一个封装了大量常用 Material Design 组件的 widget。它基于 WidgetsApp 添加了 Material 的相关功能。
但是 Flutter 有足够的灵活性和表现力来实现任何设计语言。在 iOS 上,可以使用 Cupertino library 来制作遵循 Human InterfaceGuidelines 的界面。关于这些 widget 的全部集合,可以参看 Cupertino widgets gallery。
也可以使用 WidgetApp 来做为应用入口,它提供了一部分类似的功能接口,但是不如 MaterialApp 强大。
定义所有子组件颜色和样式,可以直接传递 ThemeData 对象给 MaterialApp widget。���如,在下面的代码中,primary swatch 被设置为蓝色,而文本选中后的颜色被设置为红色。
class SampleApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sample App',
theme: ThemeData(
primarySwatch: Colors.blue,
textSelectionColor: Colors.red
),
home: SampleAppPage(),
);
}
}
如何给 Text widget 设置自定义字体?
在 iOS 里,可以在项目中引入任何的 ttf 字体文件,并在 info.plist 文件中声明并进行引用。在 Flutter 里,把字体放到一个文件夹中,然后在 pubspec.yaml 文件中引用它,就和引用图片一样。
fonts:
- family: MyCustomFont
fonts:
- asset: fonts/MyCustomFont.ttf
- style: italic
然后在 Text widget 中指定字体:
@overrideWidget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Sample App"), ), body: Center( child: Text( 'This is a custom font text', style: TextStyle(fontFamily: 'MyCustomFont'), ), ), );}
如何设置 Text widget 的样式?
除了字体以外,你也可以自定义 Text widget 的其他样式。Text widget 接收一个 TextStyle 对象的参数,可以指定很多参数,例如:
colordecorationdecorationColordecorationStylefontFamilyfontSizefontStylefontWeighthashCodeheightinheritletterSpacingtextBaselinewordSpacing
