Flutter Widget 之 flutter_slidable

移动用户界面设计的一个常见模式，是有一个可以向一个方向滑动的东西，它便显示一些可用操作，这种动作包含很多东西。手势检测器、变换、曲线、动画点击处理器等等。

如果能使用这种模式，而不用担心所有这些就太好了，是吧？

实际上，这是做得到的,有了flutter_slidable包，你就可以用滑块微件来实现这种模式

flutter_slidable: 0.5.7

一个滑块的典型例子就是具有相同操作的列表。如电子邮件收件箱。

选择你通常用于项目的ListTile,添加为滑块的子项目

Slidable(
    child: ListTile(/*...*/),
)

滑块需要知道如何显示操作列表的开头部分，它是不是把每一个项目都展开了，好像会变大到填满空间？它们是不是想叠在一起然后从后面滑出？或者它们是从屏幕外滑入的？

你可以使用actionPane属性来定义这是如何发生的，你可以为它创建自己的动画 或者使用flutter_slidable包中内置的选项，打个比方SlidableScrollActionPane,将操作面板从屏幕外滚动进来

Slidable(
    actionPane: SliableScrollActionPane(),
    child: ListTile(/*...*/),
)

但是等等！我们需要滑入哪些操作？actions参数内含微件列表，它们代表用户可在滑块操作的所有动作。这个包包含像IconSlideAction这样的助手, 可以用来调整操作大小

Slidable(
    actionPane:SliaableScrollActionPane(),
    actions:<Widget>[
        IconSlideAction(
            caption: 'Active',
            color: Colors.blue,
            icon: Icons.archive,
            onTap: () => print('Archive'),
        ),
    ],
    child: ListTile(/*...*/),
)

最后，设置actionExtentTatio， 来指定每个操作应该占用的空间比例，这应该给予操作数量，它们才全都看得见

Slidable(
    actionPane:SliaableScrollActionPane(),
    actions:<Widget>[
        IconSlideAction(
            caption: 'Active',
            color: Colors.blue,
            icon: Icons.archive,
            onTap: () => print('Archive'),
        ),
        /*...*/
    ],
    actionExtentRatio: 1 / 5,
    child: ListTile(/*...*/),
)

就这样，现在，你有了一个可以滑动显示的功能列表

如果想了解有关flutter_slidable 的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址