Flutter使用 input chip 標籤元件範例詳解

2022-11-01 14:00:02

前言

這裡有一些擁有屬性的 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 的資料請關注it145.com其它相關文章！

Flutter使用 input chip 標籤元件範例詳解

目錄

前言

正文

類構造

屬性

如何在 Dart 檔案中實現程式碼

全部程式碼

結論

熱門文章