iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 5
0

相信我們已經很習慣在我們的APP出現這樣的手勢:

今天我們就要在我們的代辦清單內加入

這邊我使用了一個套件,flutter_slidable在 flutter package 分數達到99分。
flutter_slidable: https://pub.dev/packages/flutter_slidable
使用方法也很簡單,一樣打開我們的pubspec.yamldependencies下加入,

dependencies:
  flutter_slidable: ^0.5.3

然後執行安裝:

flutter pub get

這個範圍主要改變的地方在lib/widgets/todo_tile.dart檔案,下列為改完後的程式碼

import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

class TodoItem extends StatelessWidget {
  final int index;
  final String title;
  final bool done;
  final Function toggleDone;
  final Function toggleDelete;
  final SlidableController slidableController;

  TodoItem({
    this.title,
    this.done,
    this.toggleDone,
    this.index,
    this.slidableController,
    this.toggleDelete,
  });

  void _showSnackBar(actionType) {
    print(actionType);
    if (actionType == 'Done') {
      toggleDone(index, true);
    }
    if (actionType == 'Delete') {
      toggleDelete(index);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Slidable(
      dismissal: SlidableDismissal(
        child: SlidableDrawerDismissal(),
        // 向右向左滑到底事件監聽
        onWillDismiss: (actionType) {
          _showSnackBar(
              actionType == SlideActionType.primary ? 'Done' : 'Delete');
          return;
        },
      ),
      key: Key(title),
      controller: slidableController,
      actionPane: SlidableDrawerActionPane(), // 展開方式
      actionExtentRatio: 0.25,  // 每個 action 大小佔全部百分比
      child: Container(
          color: Colors.white,
          child: ListTile(
            title: Text(
              title,
              style: TextStyle(
                fontSize: 18,
                decoration: done ? TextDecoration.lineThrough : null,
              ),
            ),
            leading: Checkbox(
              activeColor: Colors.lightBlueAccent,
              value: done,
              onChanged: (val) {
                toggleDone(index, val);
              },
            ),
          )),
      // 左邊展開事件選項
      actions: <Widget>[
        IconSlideAction(
          caption: 'Done',
          color: Colors.green,
          icon: Icons.check,
          onTap: () => _showSnackBar('Done'),
        ),
      ],
      // 右邊展開事件選項
      secondaryActions: <Widget>[
        IconSlideAction(
          caption: 'Share',
          color: Colors.indigo,
          icon: Icons.share,
          onTap: () => _showSnackBar('Share'),
        ),
        IconSlideAction(
          caption: 'Delete',
          color: Colors.red,
          icon: Icons.delete,
          onTap: () => _showSnackBar('Delete'),
        ),
      ],
    );
  }
}

先說明展開方式,套件有設定好幾種展開方式,套件連結也有說明,我也把它貼到這邊。

  • SlidableBehindActionPane
  • SlidableScrollActionPane
  • SlidableDrawerActionPane
  • SlidableStrechActionPane

基本看圖比較好理解,就是一些細微的差別,仔細看就知道囉~

再來是,看看上面範例
就可以看得出來一次可以開啟很多滑動選項,如果你想要一次只能打開一個清單的選項時怎麼做?

final SlidableController slidableController = SlidableController();
...
Slidable(
  key: Key(item.title),
  controller: slidableController,
  ...
);

基本就是要建立一個 SlidableController 實例,在Slidable Widget加上唯一的Key,把controller加上去就好囉~

上列改好的程式碼就可以看到,我在construtor時多帶了SlidableController參數,在父組件建立好後傳進來就大功告成了!


上一篇
[Day4] Flutter 狀態管理之 Provider (續)
下一篇
[Day6] Flutter 將我們的專案全面套上 Provider。
系列文
Flutter 從零開始,Android、iOS一次搞定,重新挑戰。12

尚未有邦友留言

立即登入留言