Flutter联系人标签输入插件contact_input_tag的使用

Flutter联系人标签输入插件contact_input_tag的使用

包帮助你制作像Google Gmail一样的联系人标签（电子邮件或电话号码）。

你可以自定义模型电话号码以适应你的语言，默认是越南的电话号码格式。

功能

使用方法

要使用此包，在pubspec.yaml文件中添加依赖项：

dependencies:
  contact_input_tag:
    git: https://github.com/Ceschref/contact_input_tag

手机号输入标签示例

ContactInputTag(
  label: 'Your Phone Number', // 标签文本
  hintText: 'Input phone', // 提示文本
  updateResult: (items) {}, // 更新结果的回调函数
  typeTag: TypeTag.phoneNumber, // 类型为手机号
)

邮箱输入标签示例

ContactInputTag(
  label: 'Your Email', // 标签文本
  hintText: 'Input mail', // 提示文本
  updateResult: (items) {}, // 更新结果的回调函数
  typeTag: TypeTag.email, // 类型为邮箱
  listRecord: ['mail1@gmail.com'], // 初始记录列表
)

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用contact_input_tag插件。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Contact Input Tag'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<ContactInputTagState> _emailInputTagGlobalKey = GlobalKey<ContactInputTagState>();
  final GlobalKey<ContactInputTagState> _phoneNumberInputTagGlobalKey = GlobalKey<ContactInputTagState>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: () {
          FocusScopeNode currentFocus = FocusScope.of(context);
          if (currentFocus.isFirstFocus || currentFocus.hasPrimaryFocus) {
            currentFocus.unfocus();
          }
        },
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ContactInputTag(
                key: _phoneNumberInputTagGlobalKey,
                label: 'Your Phone Number', // 输入标签的标签文本
                hintText: 'Input phone', // 输入提示文本
                updateResult: (items) {}, // 更新结果的回调函数
                typeTag: TypeTag.phoneNumber, // 类型为手机号
                listRecord: [ // 初始记录列表
                  '0977584232',
                ],
              ),
              const SizedBox(
                height: 24,
              ),
              ContactInputTag(
                key: _emailInputTagGlobalKey,
                label: 'Your Email', // 输入标签的标签文本
                hintText: 'Input mail', // 输入提示文本
                updateResult: (items) {}, // 更新结果的回调函数
                typeTag: TypeTag.email, // 类型为邮箱
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter联系人标签输入插件contact_input_tag的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter联系人标签输入插件contact_input_tag的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


contact_input_tag 是一个用于 Flutter 的插件，允许用户在输入框中输入联系人，并将其显示为标签。这个插件通常用于需要用户选择或输入多个联系人的场景，比如邮件客户端、消息应用等。

安装

首先，你需要在 pubspec.yaml 文件中添加 contact_input_tag 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  contact_input_tag: ^1.0.0  # 请根据实际情况使用最新版本

然后运行 flutter pub get 来安装依赖。

使用示例

以下是一个简单的使用 contact_input_tag 插件的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Contact Input Tag Example'),
        ),
        body: ContactInputTagDemo(),
      ),
    );
  }
}

class ContactInputTagDemo extends StatefulWidget {
  [@override](/user/override)
  _ContactInputTagDemoState createState() => _ContactInputTagDemoState();
}

class _ContactInputTagDemoState extends State<ContactInputTagDemo> {
  List<String> contacts = [];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        children: [
          ContactInputTag(
            initialContacts: contacts,
            onChanged: (List<String> updatedContacts) {
              setState(() {
                contacts = updatedContacts;
              });
            },
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              labelText: 'Enter contacts',
            ),
          ),
          SizedBox(height: 20),
          Text('Selected Contacts:'),
          Wrap(
            children: contacts.map((contact) {
              return Chip(
                label: Text(contact),
                onDeleted: () {
                  setState(() {
                    contacts.remove(contact);
                  });
                },
              );
            }).toList(),
          ),
        ],
      ),
    );
  }
}
回到顶部