[toc]
主题和文字
1. 我怎么给 App 设置主题?
Flutter 实现了一套漂亮的 MD 组件,并且开箱可用。它接管了一大堆你需要的样式和主题。
为了充分发挥你的 App 中 MD 组件的优势,声明一个顶级 widget,MaterialApp,用作你的 App 入口。MaterialApp 是一个便利组件,包含了许多 App 通常需要的 MD 风格组件。它通过一个 WidgetsApp 添加了 MD 功能来实现。
但是 Flutter 足够地灵活和富有表现力来实现任何其他的设计语言。在 iOS 上,你可以用 Cupertino library 来制作遵守 Human Interface Guidelines 的界面。查看这些 widget 的集合,请参阅 Cupertino widgets gallery。
你也可以在你的 App 中使用 WidgetApp,它提供了许多相似的功能,但不如 MaterialApp
那样强大。
对任何子组件定义颜色和样式,可以给 MaterialApp
widget 传递一个 ThemeData
对象。举个例子,在下面的代码中,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(),
);
}
}
2. 我怎么给 Text widget 设置自定义字体?
在 iOS 中,你在项目中引入任意的 ttf
文件,并在 info.plist
中设置引用。在 Flutter 中,在文件夹中放置字体文件,并在 pubspec.yaml
中引用它,就像添加图片那样。
fonts:
- family: MyCustomFont
fonts:
- asset: fonts/MyCustomFont.ttf
- style: italic
然后在你的 Text
widget 中指定字体:
@override
Widget 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'),
),
),
);
}
3. 我怎么给我的 Text widget 设置样式?
除了字体以外,你也可以给 Text widget 的样式元素设置自定义值。Text widget 接受一个 TextStyle
对象,你可以指定许多参数,比如:
- color
- decoration
- decorationColor
- decorationStyle
- fontFamily
- fontSize
- fontStyle
- fontWeight
- hashCode
- height
- inherit
- letterSpacing
- textBaseline
- wordSpacing