lang: zh-CN
title: 如何在你的 Flutter 中应用 input chip 标签组件
description: 译文
如何在你的 Flutter 中应用 input chip 标签组件
这里有一些领有属性的 chip，其中之一就是 input chip。input chip 通常用于以激进的构造解决客户端输出或向客户端提供想法。除了 label 和 avtar 之外，input chip 还能够有一个删除图标。在 Flutter 中，您能够利用 InputChip widget 制作这种 chip。
原文 https://medium.flutterdevs.co...
前言
InputChip 是一个 material widget ，它以激进的构造解决令人难以置信的数据片段。Flutter 提供了一个名为 InputChip 的 widget ，它容许咱们在应用程序中增加一个 input chip。
默认状况下，input chip 是禁用的。咱们能够通过设置为“抉择”来加强它的能力。咱们能够给出一个标签，以及它的疏导和尾随符号。不同品种的 chip 有 Chip、 ChoiceChip、 ActionChip 和 FilterChip。
https://api.flutter.dev/flutt...
- 演示:
这个演示视频显示了如何在 Flutter 中应用 input chip，并显示了 input chip 将如何在 Flutter 应用程序中工作。咱们将显示一个用户按下 chip，而后 chip 将被选中，并且用户将删除 chip。它会显示在你们的设施上。
注释
类结构
要利用 InputChip，您须要调用上面的构造函数:
要在 Flutter 中制作 input chip，咱们须要利用 Flutter 给出的 InputChip 类的构造函数。
const InputChip({ Key? key, this.avatar, required this.label, this.labelStyle, this.labelPadding, this.selected = false, this.isEnabled = true, this.onSelected, this.deleteIcon, this.onDeleted, this.deleteIconColor, this.deleteButtonTooltipMessage, this.onPressed, this.pressElevation, this.disabledColor, this.selectedColor, this.tooltip, this.side, this.shape, this.clipBehavior = Clip.none, this.focusNode, this.autofocus = false, this.backgroundColor, this.padding, this.visualDensity, this.materialTapTargetSize, this.elevation, this.shadowColor, this.selectedShadowColor, this.showCheckmark, this.checkmarkColor, this.avatarBorder = const CircleBorder(), @Deprecated( 'Migrate to deleteButtonTooltipMessage. ' 'This feature was deprecated after v2.10.0-0.3.pre.' ) this.useDeleteButtonTooltip = true,})inputChip widget 的一个必须属性是 label 属性。标签能够是任何 widget ，通常是一个文本 widget 。为了利用 InputChip widget ，咱们须要为这个属性提供一个值。
属性
InputChip 的一些个性是:
- 选中ー此属性用于设置要选中或未选中的 chip 状态。它须要一个布尔值设置，真正会使 chip 抉择和假将使 chip 未被选中。
- onSelected ー此属性用于更新 input chip 的选定或未选定状态，并在 chip 被选定或未选定时执行一些操作。
- isEnable ー此属性用于启用或禁用 input chip。它须要一个布尔值。默认状况下，该值为 true。无论咱们是否将这个属性设置为 true，咱们都须要设置 onSelected、 onDelete 或 onPress 的一个回调来启用该按钮。
- 禁用色彩ーー这个属性用于在禁用 chip 时为 inputChip 利用色彩，咱们将利用这个属性。所以为了禁用这个按钮，我要打消每一个回调。
- showCheckmark ー此属性用于显示/暗藏选中 chip 时的复选标记。它须要一个布尔值。
- 这个属性被用来扭转当咱们按下 chip 时咱们想要应用的升高量。
如何在 Dart 文件中实现代码
您须要别离在代码中实现它:
在lib文件夹中创立一个名为_item_model.dart_的新 dart 文件。
首先，咱们须要一个 ItemModel 类来保留 Inputchip 的信息。ItemModel 类将有三个边界标签、色彩和 isSelected。标签将持有 chip 的标记，色彩将持有背景色彩和被抉择的将持有抉择或未抉择的条件的 input chip。
import 'dart:ui';class ItemModel { String label; Color color; bool isSelected; ItemModel(this.label, this.color, this.isSelected);}在 lib 文件夹中创立一个名为 _main.dart_ 的新 dart 文件。总体来说。在 dart 文件中，咱们将创立一个新的类 MyHomePage ()。在这个类中，咱们将首先创立类型 ItemModel 的 List 并为 chip 提供数据。
final List<ItemModel> _chips = [ ItemModel("Android", Colors.green, false), ItemModel("Flutter", Colors.blueGrey, false), ItemModel("Ios", Colors.deepOrange, false), ItemModel("Python", Colors.cyan, false), ItemModel("React JS", Colors.teal, false),];在主体中，咱们将增加 Column widget 。在这个 widget 中，咱们将增加一个图像和包装 widget 。在这个 widget 中，咱们将增加方向是程度的，其子级是 itemsChips ()办法。
Center( child: Column( children: [ Image.asset( "assets/logo.png", height: 300, width: 350, ), Wrap(direction: Axis.horizontal, children: itemsChips()), ],)),当初咱们将深刻定义 itemsChips ()办法:
此办法在 widget 列表中。咱们将增加 InputChip widget 。在这个 widget 中，咱们将增加一个头像、标签、 backoundColor、 select、 onDelected、 onSelected，而后返回 chip。
List<Widget> itemsChips() { List<Widget> chips = []; for (int i = 0; i < _chips.length; i++) { Widget item = Padding( padding: const EdgeInsets.only(left: 10, right: 5), child: InputChip( avatar: CircleAvatar( backgroundColor: Colors.white, child: Text(_chips[i].label[0].toUpperCase()), ), label: Text(_chips[i].label), labelStyle: const TextStyle(color: Colors.white), backgroundColor: _chips[i].color, selected: _chips[i].isSelected, onDeleted: () { setState(() { _chips.removeAt(i); }); }, onSelected: (bool value) { setState(() { _chips[i].isSelected = value; }); }, ), ); chips.add(item); } return chips;}当咱们运行应用程序时，咱们应该失去屏幕的输入，就像上面的屏幕截图一样。
最终输入
全副代码
import 'package:flutter/material.dart';import 'package:flutter_input_chip_demo/item_model.dart';import 'package:flutter_input_chip_demo/splash_screen.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primarySwatch: Colors.red, ), debugShowCheckedModeBanner: false, home: const Splash(), ); }}class MyHomePage extends StatefulWidget { const MyHomePage({Key? key}) : super(key: key); @override _MyHomePageState createState() { return _MyHomePageState(); }}class _MyHomePageState extends State<MyHomePage> { final List<ItemModel> _chips = [ ItemModel("Android", Colors.green, false), ItemModel("Flutter", Colors.blueGrey, false), ItemModel("Ios", Colors.deepOrange, false), ItemModel("Python", Colors.cyan, false), ItemModel("React JS", Colors.teal, false), ]; @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.grey[200], appBar: AppBar( title: const Text("Flutter Input Chip Demo"), centerTitle: true, automaticallyImplyLeading: false, backgroundColor: Colors.orangeAccent, ), body: Center( child: Column( children: [ Image.asset( "assets/logo.png", height: 300, width: 350, ), Wrap(direction: Axis.horizontal, children: itemsChips()), ], )), ); } List<Widget> itemsChips() { List<Widget> chips = []; for (int i = 0; i < _chips.length; i++) { Widget item = Padding( padding: const EdgeInsets.only(left: 10, right: 5), child: InputChip( avatar: CircleAvatar( backgroundColor: Colors.white, child: Text(_chips[i].label[0].toUpperCase()), ), label: Text(_chips[i].label), labelStyle: const TextStyle(color: Colors.white), backgroundColor: _chips[i].color, selected: _chips[i].isSelected, onDeleted: () { setState(() { _chips.removeAt(i); }); }, onSelected: (bool value) { setState(() { _chips[i].isSelected = value; }); }, ), ); chips.add(item); } return chips; }}论断
在本文中，我简略介绍了 input chip 的根本构造; 您能够依据本人的抉择批改此代码。这是一个小的介绍 input chip 用户交互从我的方面，它的工作应用 Flutter 。
我心愿这个博客将提供足够的信息，试验 input chip 在您的 Flutter 我的项目。咱们将向您展现什么是介绍，什么是 input chip 的构造和性能，并作出一个演示程序与 input chip 工作在您的 Flutter 应用程序。所以请你试试。
如果本文对你有帮忙，请转发让更多的敌人浏览。
© 猫哥
- 微信 ducafecat
- https://wiki.ducafecat.tech
- https://video.ducafecat.tech
本文由mdnice多平台公布