3.5 依赖管理与 pubspec.yaml

fonts:
- family: Roboto
fonts:
- asset: assets/fonts/Roboto-Regular.ttf
- family: OpenSans
fonts:
- asset: assets/fonts/OpenSans-Bold.ttf
weight: 700 # 指定字体的粗细

plaintext
复制代码

**步骤 3: 运行 `flutter pub get`**

在终端中运行 `flutter pub get`,确保 Flutter 能够识别并打包这些资源。

**步骤 4: 在 Flutter 应用中使用资源**

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

class AssetsExampleScreen extends StatelessWidget {
  const AssetsExampleScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('资源管理示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 使用图片资源
            Image.asset(
              'assets/images/logo.png',
              width: 150,
              height: 150,
            ),
            const SizedBox(height: 20),
            // 使用背景图片
            Container(
              width: 300,
              height: 200,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('assets/images/background.jpg'),
                  fit: BoxFit.cover,
                ),
              ),
              child: const Center(
                child: Text(
                  '背景图片',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ),
            const SizedBox(height: 20),
            // 使用自定义字体
            const Text(
              'Hello, Roboto Font!',
              style: TextStyle(
                fontFamily: 'Roboto',
                fontSize: 30,
                color: Colors.blue,
              ),
            ),
            const SizedBox(height: 10),
            const Text(
              'Hello, OpenSans Bold!',
              style: TextStyle(
                fontFamily: 'OpenSans',
                fontWeight: FontWeight.bold, // 对应 pubspec.yaml 中设置的 weight
                fontSize: 28,
                color: Colors.purple,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(const MaterialApp(home: AssetsExampleScreen()));
}

案例分析:

  • assets: 部分:在 pubspec.yaml 中,我们通过 assets: 关键字声明了项目使用的图片资源。你可以声明单个文件(如 assets/images/logo.png),也可以声明整个目录(如 assets/images/),这样该目录下的所有文件都会被包含在应用包中。
  • fonts: 部分:通过 fonts: 关键字声明了自定义字体。每个字体家族 (family) 可以包含多个字体文件 (asset),并可以指定字体的粗细 (weight) 和样式 (style)。
  • Image.asset('assets/images/logo.png'):在 Flutter 代码中,使用 Image.asset Widget 来加载和显示声明在 pubspec.yaml 中的图片资源。路径必须与 pubspec.yaml 中声明的路径一致。
  • AssetImage('assets/images/background.jpg'):当图片作为 DecorationImage 的一部分时,使用 AssetImage 来引用图片资源。
  • TextStyle(fontFamily: 'Roboto'):在 Text Widget 的 style 属性中,通过 fontFamily 来指定使用自定义字体。如果字体有不同的粗细或样式,可以通过 fontWeightfontStyle 来进一步指定。

这个案例清晰地展示了 pubspec.yaml 在 Flutter 项目中的重要性,它不仅管理了外部依赖,还负责声明和打包项目所需的各种资源。正确配置 pubspec.yaml 是构建完整 Flutter 应用不可或缺的一部分。