# 10.主题和文字处理

声明：Flutter专栏文档均来自慕课网\
[https://coding.imooc.com/class/321.html](https://links.jianshu.com/go?to=https%3A%2F%2Fcoding.imooc.com%2Fclass%2F321.html)

## 主题和文字处理

* 如何在 Text widget上设置自定义字体？
* 如何在Text上定义样式？
* 如何给 App 设置主题？

## 如何在 Text widget上设置自定义字体？

* 在 iOS 中，你在项目中引入任意的 `ttf` 文件，并在 `info.plist` 中设置引用；
* 在Android SDK（从Android O开始）中，创建一个Font资源文件并将其传递到TextView的FontFamily参数中；

在 Flutter 中设置字体更加简便，只需要在文件夹中放置字体文件，并在 `pubspec.yaml` 中引用它，就像添加图片那样：

```
fonts:
   - family: MyCustomFont
     fonts:
       - asset: fonts/MyCustomFont.ttf
       - style: italic
```

然后，通过如下方式使用字体：

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

## 如何在**Text**上定义样式？

除了字体以外，你也可以给 `Text` widget 的样式元素设置自定义值。`Text` widget 接受一个 `TextStyle` 对象，你可以指定许多参数，比如：

* color
* decoration
* decorationColor
* decorationStyle
* fontFamily
* fontSize
* fontStyle
* fontWeight
* hashCode
* height
* inherit
* letterSpacing
* textBaseline
* wordSpacing

## 如何给 App 设置主题？

Flutter 实现了一套漂亮的 `Material Design`组件，它接管了一大堆你需要的样式和主题。

为了充分发挥你的 App 中 `Material Design` 组件的优势，声明一个顶级 widget，`MaterialApp`，用作你的 App 入口。`MaterialApp` 是一个便利组件，包含了许多 App 通常需要的 Material Design 风格组件。它通过一个 `WidgetsApp` 添加了 `Material Design` 功能来实现。

但是 Flutter 足够地灵活和富有表现力来实现任何其他的设计语言。在 iOS 上，你可以用 [Cupertino library](https://links.jianshu.com/go?to=https%3A%2F%2Fdocs.flutter.io%2Fflutter%2Fcupertino%2Fcupertino-library.html) 来制作遵守 [Human Interface Guidelines](https://links.jianshu.com/go?to=https%3A%2F%2Fdeveloper.apple.com%2Fios%2Fhuman-interface-guidelines%2Foverview%2Fthemes%2F) 的界面。查看这些 widget 的集合，可参考 [Cupertino widgets gallery](https://links.jianshu.com/go?to=https%3A%2F%2Fflutter.io%2Fdocs%2Fdevelopment%2Fui%2Fwidgets%2Fcupertino)。

你也可以在你的 App 中使用 `WidgetApp`，它提供了许多相似的功能，但不如 `MaterialApp` 那样强大。

对任何子组件定义颜色和样式，可以给 `MaterialApp` widget 传递一个 `ThemeData` 对象。举个例子，在下面的代码中，`primary swatch` 被设置为蓝灰色，并且文字的选中颜色是红色：

```
import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      theme: ThemeData(
          primarySwatch: Colors.blueGrey,
          textSelectionColor: Colors.red
      ),
      home: Scaffold(
        appBar: AppBar(),
        body: Text('Android、iOS开发者快速上手Flutter-主题和文字处理'),
      ),
    );
  }
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://alexcode2.gitbook.io/ios-development-guidelines/flutter/10.-zhu-ti-he-wen-zi-chu-li.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.