Flutter文本芯片输入插件text_chip_field的使用
Flutter 文本芯片输入插件 text_chip_field 的使用
特性
获取与安装
在 Dart 中：
dart pub add text_chip_field
在 Flutter 中：
flutter pub add text_chip_field
在 pubspec.yaml 文件中添加依赖：
dependencies:
text_chip_field: ^0.0.7
导入包：
import 'package:text_chip_field/text_chip_field.dart';
使用方法
前端代码示例
TextChipField(
initialString: s, // 初始字符串
seprator: " ", // 分隔符
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30), // 设置边框圆角
),
),
onChanged: (val) {
print(val); // 输出改变后的字符串
},
),
完整示例代码
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:text_chip_field/text_chip_field.dart';
import 'package:text_chip_field_example/issue.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
[@override](/user/override)
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
String _platformVersion = 'Unknown';
[@override](/user/override)
void initState() {
super.initState();
// initPlatformState();
}
// Platform messages are asynchronous, so we initialize in an async method.
// Future<void> initPlatformState() async {
// String platformVersion;
// // Platform messages may fail, so we use a try/catch PlatformException.
// // We also handle the message potentially returning null.
// try {
// platformVersion = TextChipField.platformVersion;
// } on PlatformException {
// platformVersion = 'Failed to get platform version.';
// }
// // If the widget was removed from the tree while the asynchronous platform
// // message was in flight, we want to discard the reply rather than calling
// // setState to update our non-existent appearance.
// if (!mounted) return;
// setState(() {
// _platformVersion = platformVersion;
// });
// }
[@override](/user/override)
Widget build(BuildContext context) {
Get.put(SearchFormController());
var ctrl = Get.find<SearchFormController>(); // GetX
return GetMaterialApp(
home: Scaffold(
appBar: AppBar(
centerTitle: true,
title: const Text('Text Chip Field 示例应用'),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: ListView(
children: [
TextChipField(
initialString: ctrl.purchaseNumbers,
seprator: " ",
decoration: InputDecoration(
hintText: "姓名",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
),
onChanged: (val) {
ctrl.purchaseNumbers = val;
print('数据: ${ctrl.purchaseNumbers}');
},
),
SizedBox(
height: 18,
),
TextChipField(
initialString: "初始字符串",
seprator: " ",
decoration: InputDecoration(
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.green),
borderRadius: BorderRadius.circular(0),
),
),
onChanged: (val) {
print(val); // 输出改变后的字符串
},
),
SizedBox(
height: 18,
),
TextChipField(
initialString: "圆形且带颜色的边框初始字符串",
seprator: " ",
spacing: 4,
chipsPadding: EdgeInsets.all(10),
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(
color: Colors.blue,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(
color: Colors.red,
width: 2.0,
),
),
),
onChanged: (val) {
print(val); // 输出改变后的字符串
},
),
SizedBox(
height: 18,
),
TextChipField(
initialString: "芯片间距",
seprator: " ",
spacing: 4,
chipsPadding: EdgeInsets.symmetric(horizontal: 50),
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(
color: Colors.green,
width: 2.0,
),
),
),
onChanged: (val) {
print(val); // 输出改变后的字符串
},
),
SizedBox(
height: 18,
),
TextChipField(
initialString: "设置芯片位置的间距",
seprator: " ",
spacing: 4,
runSpacing: 4,
deleteIcon: Icons.clear,
chipsPadding: EdgeInsets.all(10),
decoration: InputDecoration(
fillColor: Colors.cyan,
filled: true,
),
onChanged: (val) {
print(val); // 输出改变后的字符串
},
),
],
),
),
),
);
}
}
更多关于Flutter文本芯片输入插件text_chip_field的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter文本芯片输入插件text_chip_field的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是如何在Flutter项目中使用text_chip_field插件的一个示例。这个插件允许用户输入文本，并将其转换为可删除的芯片（chip）。首先，你需要确保在pubspec.yaml文件中添加了text_chip_field依赖项：
dependencies:
flutter:
sdk: flutter
text_chip_field: ^x.y.z # 请替换为最新版本号
然后运行flutter pub get来获取依赖项。
接下来是一个简单的示例代码，展示如何使用TextChipField：
import 'package:flutter/material.dart';
import 'package:text_chip_field/text_chip_field.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Text Chip Field Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final List<String> chips = [];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Text Chip Field Example'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextChipField(
labelText: 'Enter chips:',
chips: chips,
onChipSubmitted: (chip) {
setState(() {
chips.add(chip);
});
},
onChipDeleted: (chip) {
setState(() {
chips.remove(chip);
});
},
decoration: InputDecoration(
border: OutlineInputBorder(),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blueAccent, width: 2.0),
),
),
),
SizedBox(height: 16.0),
Text(
'Current chips:',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
Wrap(
spacing: 8.0,
runSpacing: 8.0,
children: List.generate(
chips.length,
(index) => Chip(
label: Text(chips[index]),
onDeleted: () {
setState(() {
chips.removeAt(index);
});
},
),
),
),
],
),
),
);
}
}
在这个示例中：
- 我们创建了一个简单的Flutter应用，包含一个
TextChipField。 TextChipField允许用户输入文本，并在提交（例如通过按回车键）时将其添加为芯片。- 芯片可以被删除，无论是通过
TextChipField内置的删除功能，还是通过显示在页面上的芯片的删除按钮。 - 我们使用
setState来更新UI，确保每次添加或删除芯片时都能反映最新的芯片列表。
这个示例展示了text_chip_field插件的基本用法，你可以根据需要进行扩展和自定义。
