快捷導(dǎo)航

Flutter使用?input?chip?標(biāo)簽組件示例詳解

更新時(shí)間：2022年10月31日 15:51:37 作者：會(huì)煮咖啡的貓

這篇文章主要為大家介紹了Flutter使用?input?chip?標(biāo)簽組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

這里有一些擁有屬性的 chip，其中之一就是 input chip。input chip 通常用于以保守的結(jié)構(gòu)處理客戶端輸入或向客戶端提供想法。除了 label 和 avtar 之外，input chip 還可以有一個(gè)刪除圖標(biāo)。在 Flutter 中，您可以利用 InputChip widget 制作這種 chip。

InputChip 是一個(gè) material widget ，它以保守的結(jié)構(gòu)處理令人難以置信的數(shù)據(jù)片段。Flutter 提供了一個(gè)名為 InputChip 的 widget ，它允許我們?cè)趹?yīng)用程序中添加一個(gè) input chip。

默認(rèn)情況下，input chip 是禁用的。我們可以通過設(shè)置為“選擇”來增強(qiáng)它的能力。我們可以給出一個(gè)標(biāo)簽，以及它的引導(dǎo)和尾隨符號(hào)。不同種類的 chip 有 Chip、 ChoiceChip、 ActionChip 和 FilterChip。

api.flutter.dev/flutter/mat…

演示:

這個(gè)演示視頻顯示了如何在 Flutter 中使用 input chip，并顯示了 input chip 將如何在 Flutter 應(yīng)用程序中工作。我們將顯示一個(gè)用戶按下 chip，然后 chip 將被選中，并且用戶將刪除 chip。它會(huì)顯示在你們的設(shè)備上。

正文

類構(gòu)造

要利用 InputChip，您需要調(diào)用下面的構(gòu)造函數(shù):

要在 Flutter 中制作 input chip，我們需要利用 Flutter 給出的 InputChip 類的構(gòu)造函數(shù)。

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 的一個(gè)必需屬性是 label 屬性。標(biāo)簽可以是任何 widget ，通常是一個(gè)文本 widget 。為了利用 InputChip widget ，我們需要為這個(gè)屬性提供一個(gè)值。

屬性

InputChip 的一些特性是:

選中ー此屬性用于設(shè)置要選中或未選中的 chip 狀態(tài)。它需要一個(gè)布爾值設(shè)置，真正會(huì)使 chip 選擇和假將使 chip 未被選中。
onSelected ー此屬性用于更新 input chip 的選定或未選定狀態(tài)，并在 chip 被選定或未選定時(shí)執(zhí)行一些操作。
isEnable ー此屬性用于啟用或禁用 input chip。它需要一個(gè)布爾值。默認(rèn)情況下，該值為 true。無論我們是否將這個(gè)屬性設(shè)置為 true，我們都需要設(shè)置 onSelected、 onDelete 或 onPress 的一個(gè)回調(diào)來啟用該按鈕。
禁用顏色ーー這個(gè)屬性用于在禁用 chip 時(shí)為 inputChip 應(yīng)用顏色，我們將利用這個(gè)屬性。所以為了禁用這個(gè)按鈕，我要消除每一個(gè)回調(diào)。
showCheckmark ー此屬性用于顯示/隱藏選中 chip 時(shí)的復(fù)選標(biāo)記。它需要一個(gè)布爾值。
這個(gè)屬性被用來改變當(dāng)我們按下 chip 時(shí)我們想要使用的升高量。

如何在 Dart 文件中實(shí)現(xiàn)代碼

您需要分別在代碼中實(shí)現(xiàn)它:

在 lib 文件夾中創(chuàng)建一個(gè)名為 _item_model.dart_ 的新 dart 文件。

首先，我們需要一個(gè) ItemModel 類來保存 Inputchip 的信息。ItemModel 類將有三個(gè)邊界標(biāo)簽、顏色和 isSelected。標(biāo)簽將持有 chip 的標(biāo)記，顏色將持有背景顏色和被選擇的將持有選擇或未選擇的條件的 input chip。

import 'dart:ui';
class ItemModel {
  String label;
  Color color;
  bool isSelected;
  ItemModel(this.label, this.color, this.isSelected);
}

在 lib 文件夾中創(chuàng)建一個(gè)名為 _main.dart_ 的新 dart 文件。

總體來說。在 dart 文件中，我們將創(chuàng)建一個(gè)新的類 MyHomePage ()。在這個(gè)類中，我們將首先創(chuàng)建類型 ItemModel 的 List 并為 chip 提供數(shù)據(jù)。

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 。在這個(gè) widget 中，我們將添加一個(gè)圖像和包裝 widget 。在這個(gè) widget 中，我們將添加方向是水平的，其子級(jí)是 itemsChips ()方法。

Center(
    child: Column(
  children: [
    Image.asset(
      "assets/logo.png",
      height: 300,
      width: 350,
    ),
    Wrap(direction: Axis.horizontal, children: itemsChips()),
  ],
)),

現(xiàn)在我們將深入定義 itemsChips ()方法:

此方法在 widget 列表中。我們將添加 InputChip widget 。在這個(gè) widget 中，我們將添加一個(gè)頭像、標(biāo)簽、 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;
}

當(dāng)我們運(yùn)行應(yīng)用程序時(shí)，我們應(yīng)該得到屏幕的輸出，就像下面的屏幕截圖一樣。

最終輸出

全部代碼

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;
  }
}

結(jié)論

在本文中，我簡單介紹了 input chip 的基本結(jié)構(gòu); 您可以根據(jù)自己的選擇修改此代碼。這是一個(gè)小的介紹 input chip 用戶交互從我的方面，它的工作使用 Flutter 。

我希望這個(gè)博客將提供足夠的信息，試驗(yàn) input chip 在您的 Flutter 項(xiàng)目。我們將向您展示什么是介紹，什么是 input chip 的結(jié)構(gòu)和性能，并作出一個(gè)演示程序與 input chip 工作在您的 Flutter 應(yīng)用程序。

以上就是Flutter使用 input chip 標(biāo)簽組件示例詳解的詳細(xì)內(nèi)容，更多關(guān)于Flutter標(biāo)簽組件input chip 的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: