iT邦幫忙

2023 iThome 鐵人賽

DAY 17
0
Mobile Development

初窺Flutter系列 第 17

Flutter 手勢-滑動刪除

  • 分享至 

  • xImage
  •  

滑動刪除可以快速而直觀地刪除列表中的項目。這種功能通常用於顯示列表,例如郵件列表、待辦事項列表、聯絡人列表、購物清單等

1.顯示列表項目: 首先,您需要在應用程序中顯示要滑動刪除的列表項目。可以使用Flutter的 ListViewListView.builder 來創建這些列表。範例程式使用ListView.builder
2.Dismissible Widget: 每個列表項目都應該被包裝在一個 Dismissible widget 中。Dismissible 接受一個 key 屬性用於識別列表中的項目。
3.滑動動作: 當用戶在列表項目上滑動手指時,Dismissible widget 會檢測到滑動動作。根據滑動的方向,您可以定義一個回調函數 onDismissed,以執行刪除項目的操作。
4.更新UI: 在滑動操作中,通常會從列表中移除項目。需要更新UI,以便刪除的項目不再顯示在列表中。
5.顯示反饋: 您通常會在刪除後顯示反饋給用戶,以確保他們知道該項目已被刪除。練習的程式碼使用SnackBar顯示刪除。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  List<String> items = List<String>.generate(40, (i) => "列表${i + 1}"); //創建1~40列表

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("滑動刪除"),
        ),
        // 在Scaffold的主體中顯示一個ListView,用於顯示列表項目
        body: ListView.builder(
          itemCount: items.length,  // 指定列表中的項目總數
          
          // 使用 itemBuilder 動態創建和顯示每個列表項目
          itemBuilder: (BuildContext context, int index) {
            final item = items[index]; // 獲取當前項目的內容
              key: Key(item),  // 指定唯一的識別鍵,用於辨識列表項目
              
              onDismissed: (direction) {
                // 當用戶滑動刪除項目時執行的回調函數
                items.removeAt(index); // 從列表中刪除該項目
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(
                    content: Text("$item 被刪除了"), // 顯示一條SnackBar以確認刪除操作
                  ),
                );
              },
              child: ListTile(
                title: Text('$item'), // 顯示列表項目的內容
              ),
            );
          },
        ),
      ),
    );
  }
}

執行結果圖(點連結可顯示)
https://imgur.com/3gSCThK


上一篇
Buttom (按鈕)
下一篇
Flutter 資源匯入-自訂義字體
系列文
初窺Flutter30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言