10.【文档讲解】主题和文字处理

3-19【文档讲解】主题和文字处理

声明：Flutter专栏文档均来自慕课网
https://coding.imooc.com/class/321.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 来制作遵守 Human Interface Guidelines 的界面。查看这些 widget 的集合，可参考 Cupertino widgets gallery。

你也可以在你的 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-主题和文字处理'),
      ),
    );
  }
}

---