HookAll (开发中...)

外观

本页目录

Flutter ​

Flutter 是 Google 推出的开源 UI 工具包，用于从单一的代码库开发跨平台的移动、Web 和桌面应用程序。它使用 Dart 语言进行开发，通过其高性能的渲染引擎和丰富的组件库，帮助开发者高效地构建美观、高性能的应用程序。

核心架构 ​

Flutter 的设计旨在提供高性能、高保真的跨平台开发体验。其架构主要分为三层：框架层、引擎层和嵌入层。

┌─────────────────────────────────────────────────────────────────────────────┐
│                            Dart App (Your Code)                              │
├─────────────────────────────────────────────────────────────────────────────┤
│                            Framework Layer                                   │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────┐  │
│  │  Material   │  │   Cupertino │  │   Widgets   │  │     Rendering       │  │
│  │   Library   │  │   Library   │  │   Library   │  │      Library        │  │
│  └─────────────┘  └─────────────┘  └─────────────┘  └─────────────────────┘  │
├─────────────────────────────────────────────────────────────────────────────┤
│                            Engine Layer                                      │
│  ┌─────────────────────────────────────────────────────────────────────────┐ │
│  │                  Skia (2D Rendering) + Dart Runtime                     │ │
│  └─────────────────────────────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────────────────────────────┤
│                            Embedder Layer                                   │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────┐  │
│  │   iOS       │  │   Android   │  │   Windows   │  │        ...          │  │
│  │  Embedder   │  │   Embedder  │  │   Embedder  │  │                     │  │
│  └─────────────┘  └─────────────┘  └─────────────┘  └─────────────────────┘  │
└─────────────────────────────────────────────────────────────────────────────┘

主要特点 ​

跨平台开发 ​

Flutter 实现了“一次编写，随处运行”的理念，使用单一代码库构建多平台应用。

单一 Dart 代码库
        ↓
┌───────┼───────┐
↓       ↓       ↓
iOS   Android  Web

完全原生性能 ​

Flutter 代码直接编译为本地机器代码。其应用可以直接与设备硬件交互，提供了快速且流畅的用户体验。

热重载功能 ​

Flutter 的热重载功能允许开发者实时修改代码并立即看到变化，而无需重启应用。当代码发生变化时，Flutter 应用能够实时更新 UI 界面，而不需要整个 APP 重新启动，这大大缩短了调试周期。

开发流程对比： 传统开发：修改代码 → 重新编译 → 重启应用 → 查看效果 Flutter 开发：修改代码 → 热重载 → 立即查看效果

响应式框架 ​

Flutter 使用声明式 UI 构建方式，与传统的命令式风格不同。

命令式 UI： 按钮。文本 = “点击我” 按钮。颜色 = 红色 按钮。点击事件 = 处理函数

声明式 UI： Button ( 文本：“点击我”， 颜色：红色， 点击事件：处理函数， )

丰富的组件库 ​

Flutter 提供全面的预构建组件，分为两类：

  • Material Design 组件：遵循 Google Material Design 指南
  • Cupertino 组件：提供 iOS 风格的外观和体验

常用 API 及代码示例 ​

基础组件 API ​

Flutter 应用的基本构建块是 Widget，以下是常用基础组件的使用：

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('基础组件示例'),
        backgroundColor: Colors.blue,
      ),
      body: Container(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            const Text(
              'Hello Flutter!',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 16),
            Image.network(
              'https://example.com/image.jpg',
              width: 100,
              height: 100,
            ),
            const SizedBox(height: 16),
            TextField(
              decoration: InputDecoration(
                labelText: '请输入内容',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                // 处理按钮点击
                print('按钮被点击');
              },
              child: const Text('点击我'),
            ),
          ],
        ),
      ),
    );
  }
}

布局组件 API ​

Flutter 使用灵活的布局系统来创建响应式界面：

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Expanded(
            flex: 2,
            child: Container(
              color: Colors.red,
              child: const Center(child: Text('顶部区域')),
            ),
          ),
          Expanded(
            flex: 3,
            child: Row(
              children: <Widget>[
                Expanded(
                  child: Container(
                    color: Colors.green,
                    child: const Center(child: Text('左侧')),
                  ),
                ),
                Expanded(
                  child: Container(
                    color: Colors.blue,
                    child: const Center(child: Text('右侧')),
                  ),
                ),
              ],
            ),
          ),
          Container(
            height: 60,
            color: Colors.orange,
            child: const Center(child: Text('底部区域')),
          ),
        ],
      ),
    );
  }
}

网络请求 API ​

Flutter 与后端 API 交互通常通过 HTTP 请求实现：

dart
import 'dart:convert';
import 'package:http/http.dart' as http;

Future<Map<String, dynamic>> fetchUserData() async {
  // 替换为你的API URL
  final url = 'https://api.example.com/users';
  
  try {
    // 发送GET请求
    final response = await http.get(Uri.parse(url));
    
    // 如果服务器返回了200 OK响应，则处理响应体
    if (response.statusCode == 200) {
      // 将JSON响应转换为Dart Map
      return json.decode(response.body);
    } else {
      // 如果服务器没有返回200 OK响应，则抛出异常
      throw Exception('Failed to load data');
    }
  } catch (e) {
    // 处理网络请求或解析过程中的错误
    throw Exception('Failed to fetch data: $e');
  }
}

// 在UI中使用 FutureBuilder 显示数据
class UserDataWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder<Map<String, dynamic>>(
      future: fetchUserData(),
      builder: (BuildContext context, AsyncSnapshot<Map<String, dynamic>> snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const CircularProgressIndicator();
        } else if (snapshot.hasError) {
          return Text('Error: ${snapshot.error}');
        } else {
          // 使用获取到的数据构建UI
          Map<String, dynamic> data = snapshot.data!;
          return Text('User: ${data['name']}');
        }
      },
    );
  }
}

状态管理 API ​

使用 GetX 进行状态管理：

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

// 创建控制器
class CounterController extends GetxController {
  var count = 0.obs;
  
  void increment() {
    count.value++;
  }
  
  void decrement() {
    count.value--;
  }
}

// 在UI中使用
class CounterScreen extends StatelessWidget {
  final CounterController controller = Get.put(CounterController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Obx(
              () => Text(
                'Count: ${controller.count.value}',
                style: const TextStyle(fontSize: 24),
              ),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: controller.increment,
              child: const Text('增加'),
            ),
            ElevatedButton(
              onPressed: controller.decrement,
              child: const Text('减少'),
            ),
          ],
        ),
      ),
    );
  }
}

动画 API ​

Flutter 提供强大的动画支持：

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

class AnimationExample extends StatefulWidget {
  const AnimationExample({Key? key}) : super(key: key);

  @override
  _AnimationExampleState createState() => _AnimationExampleState();
}

class _AnimationExampleState extends State<AnimationExample> 
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;
  
  @override
  void initState() {
    super.initState();
    
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );
    
    _animation = Tween<double>(
      begin: 0,
      end: 300,
    ).animate(_controller)
      ..addListener(() {
        setState(() {});
      });
    
    _controller.repeat(reverse: true);
  }
  
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: _animation.value,
        height: _animation.value,
        color: Colors.blue,
        child: const Center(
          child: Text(
            '动画示例',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    );
  }
  
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

路由导航 API ​

Flutter 提供灵活的页面导航系统：

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('导航示例')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                // 普通路由跳转
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => const DetailScreen(),
                  ),
                );
              },
              child: const Text('跳转到详情页'),
            ),
            ElevatedButton(
              onPressed: () {
                // 带参数的路由跳转
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => DetailScreen(
                      title: '带参数的页面',
                    ),
                  ),
                );
              },
              child: const Text('带参数跳转'),
            ),
          ],
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  final String title;
  
  const DetailScreen({Key? key, this.title = '详情页'}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 返回上一页
            Navigator.pop(context);
          },
          child: const Text('返回'),
        ),
      ),
    );
  }
}

数据存储 API ​

使用 shared_preferences 进行本地数据存储：

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

class StorageExample extends StatefulWidget {
  const StorageExample({Key? key}) : super(key: key);

  @override
  _StorageExampleState createState() => _StorageExampleState();
}

class _StorageExampleState extends State<StorageExample> {
  final TextEditingController _controller = TextEditingController();
  String _storedValue = '';
  
  // 保存数据
  Future<void> _saveData() async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setString('user_input', _controller.text);
    
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('数据保存成功')),
    );
  }
  
  // 读取数据
  Future<void> _loadData() async {
    final prefs = await SharedPreferences.getInstance();
    setState(() {
      _storedValue = prefs.getString('user_input') ?? '暂无数据';
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('数据存储示例')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            TextField(
              controller: _controller,
              decoration: const InputDecoration(
                labelText: '输入要保存的数据',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _saveData,
              child: const Text('保存数据'),
            ),
            ElevatedButton(
              onPressed: _loadData,
              child: const Text('加载数据'),
            ),
            const SizedBox(height: 20),
            Text(
              '存储的值: $_storedValue',
              style: const TextStyle(fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}

开发工具与工作流 ​

开发环境搭建 ​

Flutter 开发环境包含以下组件：

  1. Flutter SDK - 核心开发工具包
  2. Dart SDK - Dart 编程语言工具包
  3. IDE 扩展 - Android Studio/VS Code 的 Flutter 插件
  4. 平台工具 - Android 和 iOS 开发工具

调试与测试 ​

Flutter 提供完整的开发工具链：

  • 热重载：亚秒内重载，并且不会丢失状态
  • Dart DevTools：性能分析和调试工具
  • Widget 测试：组件级测试框架
  • 集成测试：完整的应用流程测试

开发流程示意图： 编写代码 → 热重载预览 → 调试分析 → 测试验证 → 构建发布

在 GitHub 上编辑此页