编程马·菜鸟教程

Appearance

第15章：进阶实战（贴合企业开发，衔接Flutter） ​

实战4：简易数据筛选工具（高阶函数+泛型实战） ​

15.1 需求分析 ​

  • 实现数据筛选
  • 实现数据排序
  • 实现数据映射
  • 支持多种数据类型

15.2 核心实现 ​

  • 高阶函数：使用where、map、sort等方法
  • 泛型：支持多种数据类型
  • 闭包：用于封装筛选条件

15.3 实操：封装通用工具函数，实现多场景数据处理 ​

dart
// 通用数据处理工具类
class DataProcessor<T> {
  // 筛选数据
  List<T> filter(List<T> data, bool Function(T) predicate) {
    return data.where(predicate).toList();
  }
  
  // 映射数据
  List<R> map<R>(List<T> data, R Function(T) transform) {
    return data.map(transform).toList();
  }
  
  // 排序数据
  List<T> sort(List<T> data, [int Function(T, T)? compare]) {
    var sortedData = List<T>.from(data);
    if (compare != null) {
      sortedData.sort(compare);
    }
    return sortedData;
  }
  
  // 查找数据
  T? find(List<T> data, bool Function(T) predicate) {
    return data.firstWhereOrNull(predicate);
  }
  
  // 分组数据
  Map<K, List<T>> groupBy<K>(List<T> data, K Function(T) keySelector) {
    var groups = <K, List<T>>{};
    for (var item in data) {
      var key = keySelector(item);
      if (!groups.containsKey(key)) {
        groups[key] = [];
      }
      groups[key]!.add(item);
    }
    return groups;
  }
  
  // 去重数据
  List<T> distinct(List<T> data, [Object Function(T)? keySelector]) {
    if (keySelector == null) {
      return data.toSet().toList();
    }
    var seen = <Object>{};
    return data.where((item) {
      var key = keySelector(item);
      if (seen.contains(key)) {
        return false;
      }
      seen.add(key);
      return true;
    }).toList();
  }
}

// 扩展方法，为List添加firstWhereOrNull方法
extension ListExtension<T> on List<T> {
  T? firstWhereOrNull(bool Function(T) test) {
    for (var element in this) {
      if (test(element)) {
        return element;
      }
    }
    return null;
  }
}

// 测试数据
class Person {
  final String name;
  final int age;
  final String city;
  
  Person(this.name, this.age, this.city);
  
  @override
  String toString() {
    return 'Person(name: $name, age: $age, city: $city)';
  }
}

void main() {
  print('=== 简易数据筛选工具 ===');
  
  // 初始化测试数据
  var people = [
    Person('Alice', 25, 'New York'),
    Person('Bob', 30, 'London'),
    Person('Charlie', 20, 'Paris'),
    Person('David', 35, 'New York'),
    Person('Eve', 28, 'London'),
  ];
  
  var processor = DataProcessor<Person>();
  
  // 1. 筛选年龄大于25的人
  print('\n1. 筛选年龄大于25的人：');
  var filtered = processor.filter(people, (person) => person.age > 25);
  filtered.forEach(print);
  
  // 2. 映射获取所有人的姓名
  print('\n2. 映射获取所有人的姓名：');
  var names = processor.map(people, (person) => person.name);
  print(names);
  
  // 3. 按年龄排序
  print('\n3. 按年龄排序：');
  var sortedByAge = processor.sort(people, (a, b) => a.age.compareTo(b.age));
  sortedByAge.forEach(print);
  
  // 4. 查找住在New York的人
  print('\n4. 查找住在New York的人：');
  var newYorker = processor.find(people, (person) => person.city == 'New York');
  print(newYorker);
  
  // 5. 按城市分组
  print('\n5. 按城市分组：');
  var groupedByCity = processor.groupBy(people, (person) => person.city);
  groupedByCity.forEach((city, persons) {
    print('$city: ${persons.map((p) => p.name).toList()}');
  });
  
  // 6. 去重（假设可能有重复数据）
  print('\n6. 去重（按城市）：');
  var distinctCities = processor.distinct(people, (person) => person.city);
  distinctCities.forEach(print);
  
  // 测试其他数据类型
  print('\n=== 测试其他数据类型 ===');
  
  var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  var numberProcessor = DataProcessor<int>();
  
  // 筛选偶数
  var evenNumbers = numberProcessor.filter(numbers, (n) => n % 2 == 0);
  print('偶数：$evenNumbers');
  
  // 映射为平方
  var squares = numberProcessor.map(numbers, (n) => n * n);
  print('平方：$squares');
  
  // 按降序排序
  var sortedDesc = numberProcessor.sort(numbers, (a, b) => b.compareTo(a));
  print('降序：$sortedDesc');
}

代码优化 ​

  1. 泛型支持：使用泛型实现对多种数据类型的支持
  2. 高阶函数：使用where、map、sort等高阶函数简化代码
  3. 扩展方法：为List添加firstWhereOrNull方法，提高代码可读性
  4. 功能封装：将数据处理功能封装为工具类，提高代码复用性

实战5：Dart 与 Flutter 基础衔接（提前适配） ​

15.4 需求分析 ​

  • 用Dart语法编写Flutter基础组件逻辑
  • 实现状态管理
  • 实现事件处理
  • 搭建简单Flutter页面

15.5 核心实现 ​

  • Dart类：定义数据模型和业务逻辑
  • 函数：实现事件处理和业务逻辑
  • 异步编程：处理网络请求等异步操作
  • Flutter组件：使用Flutter的基础组件

15.6 实操：搭建简单Flutter页面，用Dart实现页面逻辑 ​

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dart与Flutter基础衔接',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Dart与Flutter基础衔接'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  
  final String title;
  
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 状态管理
  int _counter = 0;
  String _message = 'Hello, Flutter!';
  bool _isLoading = false;
  List<String> _items = [];
  
  // 事件处理函数
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  
  void _decrementCounter() {
    setState(() {
      if (_counter > 0) {
        _counter--;
      }
    });
  }
  
  void _updateMessage() {
    setState(() {
      _message = 'Message updated at ${DateTime.now().toString().substring(11, 19)}';
    });
  }
  
  // 模拟异步操作
  Future<void> _loadData() async {
    setState(() {
      _isLoading = true;
    });
    
    // 模拟网络请求延迟
    await Future.delayed(Duration(seconds: 2));
    
    setState(() {
      _items = [
        'Item 1',
        'Item 2',
        'Item 3',
        'Item 4',
        'Item 5',
      ];
      _isLoading = false;
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              _message,
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 20),
            Text(
              'Counter: $_counter',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: _decrementCounter,
                  child: Text('-'),
                ),
                SizedBox(width: 20),
                ElevatedButton(
                  onPressed: _incrementCounter,
                  child: Text('+'),
                ),
              ],
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _updateMessage,
              child: Text('Update Message'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _loadData,
              child: Text('Load Data'),
            ),
            SizedBox(height: 20),
            _isLoading
                ? CircularProgressIndicator()
                : _items.isNotEmpty
                    ? Expanded(
                        child: ListView.builder(
                          itemCount: _items.length,
                          itemBuilder: (context, index) {
                            return ListTile(
                              title: Text(_items[index]),
                              subtitle: Text('Item ${index + 1}'),
                              leading: CircleAvatar(
                                child: Text('${index + 1}'),
                              ),
                            );
                          },
                        ),
                      )
                    : Text('No data loaded yet'),
          ],
        ),
      ),
    );
  }
}

// 数据模型类
class User {
  final String id;
  final String name;
  final String email;
  
  User({required this.id, required this.name, required this.email});
  
  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      id: json['id'],
      name: json['name'],
      email: json['email'],
    );
  }
  
  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'name': name,
      'email': email,
    };
  }
  
  @override
  String toString() {
    return 'User(id: $id, name: $name, email: $email)';
  }
}

// 业务逻辑类
class UserService {
  // 模拟获取用户列表
  Future<List<User>> getUsers() async {
    // 模拟网络请求延迟
    await Future.delayed(Duration(seconds: 2));
    
    // 模拟返回数据
    return [
      User(id: '1', name: 'Alice', email: 'alice@example.com'),
      User(id: '2', name: 'Bob', email: 'bob@example.com'),
      User(id: '3', name: 'Charlie', email: 'charlie@example.com'),
    ];
  }
  
  // 模拟创建用户
  Future<User> createUser(User user) async {
    // 模拟网络请求延迟
    await Future.delayed(Duration(seconds: 1));
    
    // 模拟返回创建的用户
    return User(
      id: '${DateTime.now().millisecondsSinceEpoch}',
      name: user.name,
      email: user.email,
    );
  }
}

代码优化 ​

  1. 状态管理：使用setState管理组件状态
  2. 异步处理：使用async/await处理异步操作
  3. 数据模型：定义User类封装数据
  4. 业务逻辑：将网络请求等业务逻辑封装为UserService类
  5. Flutter组件：使用Flutter的基础组件构建界面

运行说明 ​

  1. 创建Flutter项目：flutter create dart_flutter_demo
  2. 替换lib/main.dart文件内容为上述代码
  3. 运行项目：flutter run

这个示例展示了如何在Flutter中使用Dart语法实现基本的状态管理、事件处理和异步操作，为后续的Flutter开发打下基础。

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建