Flutter Widget 之Dismissible

向左或向右华东列表项以摒除它们是一种很常见的UI模式。

要让其能够与Flutter一起使用，请使用Dismissible widget。

Dismissible 带一个child、background、key，

Dismissible(
    child: ListTitle(
        title: Text(myString),
    ),
    background: Container(
        color: Colors.green,
    ),
    key: ValueKey(myString),
)

然后它会检测滑动手势并激活child，滑过背景。

如果您有一个构建Listview的有状态的widget，则可以使用onDismissed回调来调用setState并从支持列表的数组中删除一个项目。

ListView.builder(
    itemCount: items.length,
    itemBuilder: (context, i) {
        return Dismissible(
            ...
            onDismissed: (direction) {
                setState((){
                    items.removeAt(i);
                });
            },
            ...
        );
    };
);

尝试使用secoindaryBackground进行多项的删除，为您的用户提供两向的滑动方式。

Dismissible(
    ...
    background: Container(
        color: Colors.green,
        child: Icon(Icons.check),
    ),
    secondaryBackground: Container(
        color: Colors.red,
        child: Icon(Icons.cancel),
    ),
)

还有一个方向属性，因此您也可以垂直滑动。

Dismissible(
    ...
    direction: DismissDirection.vertical,    
    ...
);

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

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