Flutter 中使用Chip 小部件

flutter 中使用Chip 小部件

本文是關于 flutter 中的 Chip 小部件。我們將大致了解小部件的基本原理，然后通過代碼來實現(xiàn)它。事不宜遲，讓我們開始吧。

概述

典型的chip是一個圓角的小盒子。它有一個文本標簽，并以一種有意義且緊湊的方式顯示信息。chip可以在同一區(qū)域同時顯示多個交互元素。一些流行的chip用例是：

發(fā)布標簽（您可以在許多 WordPress ，VuePress，知乎，掘金，公眾號或 GitHub等大型平臺上看到它們）。

可刪除的內容列表（一系列電子郵件聯(lián)系人、最喜歡的音樂類型列表等）。

在 Flutter 中，您可以使用以下構造函數(shù)來實現(xiàn) Chip 小部件：

Chip({ Key? key, Widget? avatar, required Widget label, TextStyle? labelStyle, EdgeInsetsGeometry? labelPadding, Widget? deleteIcon, VoidCallback? onDeleted, Color? deleteIconColor, bool useDeleteButtonTooltip = true, String? deleteButtonTooltipMessage, BorderSide? side, OutlinedBorder? shape, Clip clipBehavior = Clip.none, FocusNode? focusNode, bool autofocus = false, Color? backgroundColor, EdgeInsetsGeometry? padding, VisualDensity? visualDensity, MaterialTapTargetSize? materialTapTargetSize, double? elevation, Color? shadowColor })

只有l(wèi)abel屬性是必需的，其他是可選的。一些常用的有：

avatar：在標簽前顯示一個圖標或小圖像。

backgroundColor : chip的背景顏色。

padding：chip內容周圍的填充。

deleteIcon：讓用戶刪除chip的小部件。

onDeleted：點擊deleteIcon時調用的函數(shù)。

您可以在官方文檔中找到有關其他屬性的更多詳細信息。但是，對于大多數(shù)應用程序，我們不需要超過一半。

簡單示例

這個小例子向您展示了一種同時顯示多個chip的簡單使用的方法。我們將使用Wrap小部件作為chip列表的父級。當當前行的可用空間用完時，籌碼會自動下行。由于Wrap 小部件的間距屬性，我們還可以方便地設置chip之間的距離。

截屏：

代碼：

Scaffold( appBar: AppBar( title: const Text('大前端之旅'), ), body: Padding( padding: const EdgeInsets.symmetric(vertical: 30, horizontal: 10), child: Wrap( // space between chips spacing: 10, // list of chips children: const [ Chip( label: Text('Working'), avatar: Icon( Icons.work, color: Colors.red, ), backgroundColor: Colors.amberAccent, padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10), ), Chip( label: Text('Music'), avatar: Icon(Icons.headphones), backgroundColor: Colors.lightBlueAccent, padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10), ), Chip( label: Text('Gaming'), avatar: Icon( Icons.gamepad, color: Colors.white, ), backgroundColor: Colors.pinkAccent, padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10), ), Chip( label: Text('Cooking & Eating'), avatar: Icon( Icons.restaurant, color: Colors.pink, ), backgroundColor: Colors.greenAccent, padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10), ) ]), ), );

在這個例子中，chip只呈現(xiàn)信息。在下一個示例中，chip是可交互的。

復雜示例：動態(tài)添加和移除籌碼

應用預覽

我們要構建的應用程序包含一個浮動操作按鈕。按下此按鈕時，將顯示一個對話框，讓我們添加一個新chip。可以通過點擊與其關聯(lián)的刪除圖標來刪除每個chip。

以下是應用程序的工作方式：

完整代碼

main.dart中的最終代碼和解釋：

// main.dart import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: '大前端之旅', theme: ThemeData( primarySwatch: Colors.green, ), home: const HomePage(), ); } } // Data model for a chip class ChipData { // an id is useful when deleting chip final String id; final String name; ChipData({required this.id, required this.name}); } class HomePage extends StatefulWidget { const HomePage({Key? key}) : super(key: key); @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State { // list of chips final List _allChips = []; // Text controller (that will be used for the TextField shown in the dialog) final TextEditingController _textController = TextEditingController(); // This function will be triggered when the floating actiong button gets pressed void _addNewChip() async { await showDialog( context: context, builder: (_) { return AlertDialog( title: const Text('添加'), content: TextField( controller: _textController, ), actions: [ ElevatedButton( onPressed: () { setState(() { _allChips.add(ChipData( id: DateTime.now().toString(), name: _textController.text)); }); // reset the TextField _textController.text = ''; // Close the dialog Navigator.of(context).pop(); }, child: const Text('提交')) ], ); }); } // This function will be called when a delete icon associated with a chip is tapped void _deleteChip(String id) { setState(() { _allChips.removeWhere((element) => element.id == id); }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('大前端之旅'), ), body: Padding( padding: const EdgeInsets.all(15), child: Wrap( spacing: 10, children: _allChips .map((chip) => Chip( key: ValueKey(chip.id), label: Text(chip.name), backgroundColor: Colors.amber.shade200, padding: const EdgeInsets.symmetric(vertical: 7, horizontal: 10), deleteIconColor: Colors.red, onDeleted: () => _deleteChip(chip.id), )) .toList(), ), ), floatingActionButton: FloatingActionButton( onPressed: _addNewChip, child: const Icon(Icons.add), ), ); } }

結論

我們已經(jīng)探索了 Chip 小部件的許多方面，并經(jīng)歷了不止一個使用該小部件的示例。

大家喜歡的話，支持一下堅果

Flutter iOS

版權聲明：本文內容由網(wǎng)絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內刪除侵權內容。

版權聲明：本文內容由網(wǎng)絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內刪除侵權內容。