Flutter 库：提升开发体验——Quick

青旅半醒 2023-10-12 15:03 16阅读 0赞

## Flutter 库：提升开发体验——Quick ##

#### 文章目录 ####

*  Flutter 库：提升开发体验——Quick
 *  一、概述
 *   *  1、简介
     *  2、功能
     *  3、官方资料
     *  4、思考
 *  二、基本使用
 *   *  1、安装
     *  2、基本使用
     *  3、运行结果
 *  三、List 列表扩展示例
 *  四、Map 映射扩展示例
 *  五、其它示例

## 一、概述 ##

### 1、简介 ###

Quick 是一个功能强大的 Flutter 包，旨在通过为**字符串、列表和映射**等类型提供多种扩展方法来增强开发体验，从而实现更高效、更清晰的编码体验。它的灵感来自 `Bootstrap` 和 `Tailwind CSS`，并使用Flutter和Dart构建。该软件包提供了广泛的实用程序功能，例如将填充、可见性和文本样式应用于小部件。通过导入包并在小部件上使用提供的扩展方法，可以轻松地将其集成到代码中。

### 2、功能 ###

1.  有用的小部件和类的集合：Quick提供了一系列有用的小部件和类，用于快速创建常见的UI元素。
2.  常用任务的实用函数：Quick提供了常用任务的实用函数，例如数据验证和格式化。
3.  性能优化工具：Quick提供了性能优化工具，用于改善应用程序的整体性能。

总之，对于任何希望改进开发工作流程并创建高质量、精致应用程序的Flutter开发人员来说，Quick都是必不可少的工具。

### 3、官方资料 ###

GitHub仓库：

https://github.com/Aniketkhote/Quickly

pub.dev：

https://pub.dev/packages/quickly

文档：

https://pub.dev/documentation/quickly/latest/quickly/quickly-library.html

### 4、思考 ###

这是对 Dart 扩展类的功能的一个示例，可以参考这个库的实现代码自定义自己的扩展！这一点很重要！基于此可以做很多有意思的事情！

## 二、基本使用 ##

### 1、安装 ###

flutter pub add quickly

### 2、基本使用 ###

import 'package:flutter/material.dart';
    import 'package:quickly/quickly.dart';
    
    void main() {
        
      runApp(const MyApp());
    }
    
    class MyApp extends StatelessWidget {
        
      const MyApp({
        super.key});
    
      @override
      Widget build(BuildContext context) {
        
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'Flutter Demo',
          theme: ThemeData(
            colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
            useMaterial3: true,
          ),
          home: Scaffold(
            appBar: AppBar(
              title: const Text('Flutter Demo Home Page', style: TextStyle(color: Colors.white)),
              backgroundColor: Colors.deepPurple,
            ),
            body: Container(
              color: Colors.white,
              child: Center(
                child: Container(
                  color: Colors.blueGrey,
                  width: 500,
                  height: 500,
                  child: Column(
                    children: [
                      // 文本样式
                      Text('Quickly').red500.xl.bold.italic.underline.center,
                      Text('12 Padding from all side', style: TextStyle(fontSize: 30)).p12,
                      Text('4 Padding from top and bottom side', style: TextStyle(fontSize: 30)).py4,
                      Text('16 Padding from all side except top', style: TextStyle(fontSize: 30)).pnt(16),
                      // 可见性
                      Text('Show this widget', style: TextStyle(fontSize: 30)).show(true),
                      // 圆角
                      60.hBox(Container(color: Colors.blue).rounded),
                      // 盒子
                      100.hBox(Container(color: Colors.red)),
                    ],
                  ),
                ),
              ),
            ),
          ),
        );
      }
    }

### 3、运行结果 ###

![image-20230613161923237][]

## 三、List 列表扩展示例 ##

// 示例数据
    numbers = [5, 2, 9, 1, 7]
    people = [{
        'name': 'Bob', 'age': 30}, {
        'name': 'Alice', 'age': 25}]
    
    // list.sorted（）：返回一个新列表，其中元素按升序排序。
    numbers.sorted()  // [1, 2, 5, 7, 9]
    
    // list.sortedDec（）：返回一个新列表，其中元素按降序排序。
    numbers.sortedDec()  // [9, 7, 5, 2, 1]
    
    // list.sortedBy（key）：返回按提供的键排序的新对象列表。
    people.sortedBy('age')  // [{'name': 'Alice', 'age': 25}, {'name': 'Bob', 'age': 30}]
    
    // list.chunk（n）：将列表划分为大小为 n 的相等块，并返回列表列表。
    numbers.chunk(2)  // [[5, 2], [9, 1], [7]]
    
    // list.split（n）：将列表分成 n 个相等的部分并返回列表列表。
    numbers.split(3)  // [[5, 2], [9], [1, 7]]
    
    // list.pluck（key）：从对象列表中检索给定键的所有值。
    people.pluck('name')  // ['Bob', 'Alice', 'Charlie']

## 四、Map 映射扩展示例 ##

// 示例数据
    person = {
        'name': 'Bob', 'age': 30, 'gender': 'male'}
    
    // map.has（“key”，“value”）：返回一个布尔值，指示映射中是否存在提供的键值对。
    person.has('gender', 'male')  // true
    
    // map.getId：返回与键“id”关联的值（如果存在），否则返回 NULL。
    person.getId  // null
    
    // map.getString（'key'）：返回与提供的键关联的值（如果存在），否则返回 NULL。
    person.getString('name')  // 'Bob'
    
    // map.getBool（'key'）：返回与提供的键关联的布尔值（如果存在），否则返回 false。
    person.getBool('gender')  // false
    
    // map.retainKeys（keys）：返回一个新映射，其中只有与提供的键匹配的键值对。
    person.retainKeys(['name', 'age'])  // {'name': 'Bob', 'age': 30}
    
    // map.match（key， [defaultValue]）：返回与提供的键关联的值（如果存在），否则返回提供的默认值，如果未提供默认值，则返回“无效输入”。
    person.match('age', 'Unknown')  // 30

## 五、其它示例 ##

https://pub.dev/documentation/quickly/latest/quickly/quickly-library.html

[image-20230613161923237]: https://img-blog.csdnimg.cn/img_convert/1d22194bbca7dbdffa2c201337166973.png