0
点赞
收藏
分享

微信扫一扫

flutter 应用字体的示例

年夜雪 2022-02-12 阅读 49
flutter

示意图:

字体文件下载地址:https:fonts.google.com

1.首先设置 pubspec.yaml 文件:C:\Users\user\StudioProjects\myflutter\pubspec.yaml

# To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages
  fonts:
    - family: Zhi_Mang_Xing
      fonts:
        - asset: fonts/Zhi_Mang_Xing/ZhimangXing-Regular.ttf
          style: normal
          weight: 700  # 100 的整数

2.入口程序:C:\Users\user\StudioProjects\myflutter\lib\main.dart

  主要代码只有一条:fontFamily: 'Zhi_Mang_Xing',

  看一下代码在下面的具体位置:

import 'package:flutter/material.dart';
import 'package:myflutter/basic/text.dart';

String mytitle = '首页';

void main(List<String> args) {
  return runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 1.首先,程序进入 flutter 的顶级组件
    return MaterialApp(
        title: "hello myflatter", // 应用在任务管理器中的标题;
        // 应用程序的全局主题样式
        theme: ThemeData(
          primarySwatch: Colors.blueGrey,
          fontFamily: 'Zhi_Mang_Xing', // **** 这是今天的主角,全局字体设置!!!!
        ),
        home: my_flutter(title: mytitle), // 应用程序的主内容
        debugShowCheckedModeBanner: false // 应用是否显示主上角调试标记
        );
  }
}

// ignore: camel_case_types
class my_flutter extends StatelessWidget {
  const my_flutter({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    // 2.其次,程序进入 flutter 的脚手架组件
    return Scaffold(
      // 应用程序的头部组件
      appBar: AppBar(
        // 应用程序的头部中间标题
        title: Text(title),
        // leading 是主上角的图标
        leading: IconButton(
          onPressed: () {
            print('This is home!');
          },
          icon: const Icon(Icons.view_headline),
        ),
        // 应用程序的头部右边图标组(多个图标)
        actions: [
          // 图标1
          IconButton(
            onPressed: () {
              print('This is share!');
            },
            icon: const Icon(Icons.share),
          ),
          // 图标2
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 0),
            child: IconButton(
              icon: const Icon(Icons.search),
              onPressed: () {
                print('This is search!');
              },
            ),
          ),
          // 图标3
          IconButton(
            onPressed: () {
              print('This is more!');
            },
            icon: const Icon(Icons.more_vert),
          )
        ],
      ),
      // 3.这是整个应用程序内容的主体组件入口!!
      body: const text_demo(),
    );
  }
}

3.局部字体的代码在每个组件中也是只有一条:fontFamily: 'Zhi_Mang_Xing',

  组件里面有此代码,就没有设置字体,具体看一下代码的位置:

import 'package:flutter/material.dart';

/// Text
///     TestDirection(文本方向)
///
///     TextStyle(文本样式)
///         Colors(文本颜色)
///         FontWeight(字体粗细)
///         FontStyle(字体样式)
///
///     TextAlign(文本对齐)
///     TextOverflow(文本溢出)
///     maxLines(指定显示的行数)
///
/// RichText 与 TextSpan(给一段文本声明不同的多个样式)
///

class text_demo extends StatelessWidget {
  const text_demo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    /// Column 是例组件,可以传入多个内容,
    /// 传多个内容的时候用 children,child 只能传入一个内容。
    return Column(
      children: [
        const Text(
          "Flutter 为应用开发带来了革新: 只要一套代码库,即可构建、测试和发布适用于移动、Web、桌面和嵌入式平台的精美应用。",
          textDirection:
              TextDirection.ltr, // 文本方向:ltr 是 left to right 从左到右;rtl 从右到左
          style: TextStyle(
            fontSize: 30,
            color: Colors.red,
            fontWeight: FontWeight.w500,
            fontStyle: FontStyle.italic,
            // decoration: TextDecoration.lineThrough, //文本修饰:中划线
            decorationColor: Colors.blue,
          ),
          textAlign: TextAlign.right,
          maxLines: 3, // 文本最大显示行数
          overflow: TextOverflow.ellipsis, // 文本溢出显示三个点
          textScaleFactor: 1.5, // 文本放大倍数
        ),
        // 多行文本组件 RichTixt 相当于 HTML 的 <div></div> 标签
        RichText(
          // TextSpan 相当于 HTML 的 <span></span> 标签
          text: const TextSpan(
              text: "hello",
              style: TextStyle(
                fontSize: 40,
                color: Colors.deepOrange,
              ),
              // children 可以显示多行文本。
              children: [
                TextSpan(
                  text: "flutter",
                  style: TextStyle(
                    fontSize: 40,
                    color: Colors.blue,
                  ),
                ),
                TextSpan(
                  text: "你好世界!",
                  style: TextStyle(
                    fontSize: 40,
                    color: Colors.blue,
                    fontFamily: 'Zhi_Mang_Xing', // **** 这是今天的主角,局部字体设置!!!!
                  ),
                ),
                TextSpan(
                  text: "你好世界!",
                  style: TextStyle(
                    fontSize: 40,
                    color: Colors.blue,
                    // fontFamily: 'Zhi_Mang_Xing', // **** 这是今天的主角,局部字体设置!!!!
                  ),
                ),
              ]),
        ),
      ],
    );
  }
}

执行效果如下:

 

举报

相关推荐

0 条评论