关于程序员:如何在你的-Flutter-中使用-input-chip-标签组件

43次阅读

共计 5619 个字符，预计需要花费 15 分钟才能阅读完成。

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 多平台公布

正文完
程序员
发表至： 程序员
2022-10-30
 0
关于程序员:云会议开启线上办公新模式
关于程序员:首个HarmonyOS专业课走进校园落地武汉大学
关于程序员:彻底搞懂-etcd-系列文章四etcd-安全
关于程序员:干货值得收藏的50个常用Linux命令