Flutter使用 input chip 標簽組件示例詳解

Posted on 2022-11-01 by WalkonNet

前言

這裡有一些擁有屬性的 chip，其中之一就是 input chip。input chip 通常用於以保守的結構處理客戶端輸入或向客戶端提供想法。除瞭 label 和 avtar 之外，input chip 還可以有一個刪除圖標。在 Flutter 中，您可以利用 InputChip widget 制作這種 chip。

InputChip 是一個 material widget ，它以保守的結構處理令人難以置信的數據片段。Flutter 提供瞭一個名為 InputChip 的 widget ，它允許我們在應用程序中添加一個 input chip。

默認情況下，input chip 是禁用的。我們可以通過設置為“選擇”來增強它的能力。我們可以給出一個標簽，以及它的引導和尾隨符號。不同種類的 chip 有 Chip、 ChoiceChip、 ActionChip 和 FilterChip。

api.flutter.dev/flutter/mat…

演示:

這個演示視頻顯示瞭如何在 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 應用程序。

以上就是Flutter使用 input chip 標簽組件示例詳解的詳細內容，更多關於Flutter標簽組件input chip 的資料請關註WalkonNet其它相關文章！

Flutter使用 input chip 標簽組件示例詳解

目錄

前言

正文

類構造

屬性

如何在 Dart 文件中實現代碼

全部代碼

結論

推薦閱讀：

發佈留言取消回覆

近期文章

目錄

前言

正文

類構造

屬性

如何在 Dart 文件中實現代碼

全部代碼

結論

推薦閱讀：

發佈留言 取消回覆

近期文章

標籤

發佈留言取消回覆