Flutter延迟自动完成插件delayed_autocomplete的使用

Flutter延迟自动完成插件delayed_autocomplete的使用

特性

• 延迟显示建议
• 易于自定义设计
• 简单易用的API

入门指南

在你的dart文件中导入以下包：

import 'package:delayed_autocomplete/delayed_autocomplete.dart';

使用方法

下面是一个完整的示例，展示了如何使用DeyaledAutocomplete组件。

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

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

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

  // 这个小部件是你的应用的根节点。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  Future<List> _getSuggestions(String suggestion) async {
    await Future.delayed(Duration(seconds: 2));
    return ["Apple", "Banana", "Orange", "Pineapple", "Mango"];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: DeyaledAutocomplete(
        // 设置延迟时间（毫秒）
        delayinMilliseconds: 1000,
        hintText: "搜索",
        borderColor: Colors.blue,
        // 定义每个建议项的显示方式
        itemWidget: (dynamic object) {
          String name = object as String;
          return Container(
            height: 50,
            child: Center(
              child: Text(name),
            ),
          );
        },
        // 处理用户选择的建议
        toDo: (String suggestion) async {
          // 在这里可以调用你的API
          return await _getSuggestions(suggestion);
          // 返回的列表项类型必须与itemWidget中传递的对象类型一致
        },
      ),
    );
  }
}

代码解释

1. 导入包:

   import 'package:delayed_autocomplete/delayed_autocomplete.dart';
   

2. 主函数:

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

3. 创建应用主体:

   class MyApp extends StatelessWidget {
     const MyApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter Demo',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         home: const MyHomePage(title: 'Flutter Demo Home Page'),
       );
     }
   }
   

4. 创建主页状态类:

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

5. 实现主页状态:

   class _MyHomePageState extends State<MyHomePage> {
     int _counter = 0;
   
     void _incrementCounter() {
       setState(() {
         _counter++;
       });
     }
   
     Future<List> _getSuggestions(String suggestion) async {
       await Future.delayed(Duration(seconds: 2));
       return ["Apple", "Banana", "Orange", "Pineapple", "Mango"];
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text(widget.title),
         ),
         body: DeyaledAutocomplete(
           delayinMilliseconds: 1000,
           hintText: "搜索",
           borderColor: Colors.blue,
           itemWidget: (dynamic object) {
             String name = object as String;
             return Container(
               height: 50,
               child: Center(
                 child: Text(name),
               ),
             );
           },
           toDo: (String suggestion) async {
             return await _getSuggestions(suggestion);
           },
         ),
       );
     }
   }