Flutter邮件芯片组件插件chip_emails的使用

Flutter邮件芯片组件插件chip_emails的使用

特性

[alt text]

开始使用

在你的Flutter项目中，将依赖添加到pubspec.yaml文件中：

dependencies:
  ...
  chip_emails:

运行flutter pub get以获取该包。

使用方法

首先，你需要导入库：

import 'package:chip_emails/chip_emails.dart';

接下来，你可以使用EmailChips组件来构建和显示电子邮件芯片。以下是一个完整的示例代码：

import 'package:chip_emails/chip_emails.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: 'Email 包',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'EmailChips'),
    );
  }
}

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

  // 这个小部件是你的应用的主页。它是有状态的，意味着它有一个状态对象（定义在下面），其中包含影响其外观的字段。
  // 这个类是状态的配置。它保存由父级（在这个例子中是App小部件）提供的值（在这种情况下是标题）并用于状态的构建方法。Widget子类中的字段总是标记为“final”。

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  List<String> email_list = [];
  List<String> getemail_list = [];
  TextEditingController emailcontroller = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 每次调用setState时，此方法都会被重新运行，例如通过上面的_incrementCounter方法。
    //
    // Flutter框架已被优化为使重建方法快速运行，因此您可以只需重建任何需要更新的东西，而不是逐个更改小部件实例。
    return Scaffold(
      appBar: AppBar(
        // 这里我们从MyHomePage对象中获取值，该对象是由App.build方法创建的，并将其用于设置我们的appbar标题。
        title: Text(widget.title),
      ),
      body: Center(
        // Center是一个布局小部件。它接受一个子元素并将其定位在其父元素的中间。
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            EmailChips(
              press: () {
                setState(() {
                  getemail_list = email_list;
                });
              },
              emails: email_list,
              backgroundcolor: Colors.blue,
              editingController: emailcontroller,
            ),
            SizedBox(
              height: 30,
            ),
            Center(
              child: Container(
                height: 100,
                width: 200,
                child: ListView.builder(
                    itemCount: getemail_list.length,
                    itemBuilder: (BuildContext context, int i) {
                      return Text(getemail_list[i].toString());
                    }),
              ),
            )
          ],
        ),
      ),
      // 这个尾随逗号使自动格式化更美观。
    );
  }
}