[Day10] Flutter GetX flutter_slidable ListView滑动

Flutter slidable

Flutter listView左右滑动後出现的选项,(iOS的 tableView swipe actions)
RsDCnDgf2_sRUufuyqh_1w

这次将在首页的ListView改成slidable
在ListView的itemBuilder里建立 _slidableCell() function

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('FirstPage')),
      body: SafeArea(
        child: Container(
          color: Colors.grey[50],
          child: _buildListView(),
        ),
      ),
    );
  }

  Widget _buildListView() {
    return ListView.builder(
      physics: BouncingScrollPhysics(),
      shrinkWrap: true,
      itemCount: controller.dataList.length,
      itemBuilder: (BuildContext context, int index) {
        final title = controller.dataList[index];
        return _slidableCell(title);
      },
    );
  }

Card, ListTile是cell的本体(外层是Slidable)
secondaryActions 这个属性里面带入 List
这次范例显示两个侧滑选项

  Widget _slidableCell(String title) {
    return Slidable(
      actionPane: SlidableStrechActionPane(),
      secondaryActions: [
        Padding(
          padding: const EdgeInsets.all(3.0),
          child: SliderActionWidget(
            text: "选项1",
            backgroundColor: Colors.lightBlue[300],
            iconData: Icons.drive_file_move_outline,
            didSelected: () async {
              print("点击了 $title 选项1");
            },
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(3.0),
          child: SliderActionWidget(
            text: "选项2",
            backgroundColor: Colors.orange[300],
            iconData: Icons.delete_forever,
            didSelected: () {
              print("点击了 $title 选项2");
            },
          ),
        ),
      ],
      child: Card(
        elevation: 3.0,
        child: ListTile(
          title: Text(title),
          trailing: Icon(Icons.arrow_forward_ios),
          onTap: () => Get.toNamed("/FirstPage/$title"),
        ),
      ),
    );
  }

里面的SliderActionWidget则是写一个widget class
construct的时候带入
text: 选单显示的字, backgroundColor: 选单背景颜色,
iconData: 带入Icon, didSelected: 选单被点击後的回传


///Cell左滑出现的小选单
class SliderActionWidget extends StatelessWidget {
  const SliderActionWidget(
      {Key? key,
      required this.text,
      required this.backgroundColor,
      required this.iconData,
      required this.didSelected})
      : super(key: key);
  final String text;
  final Color? backgroundColor;
  final IconData iconData;
  final VoidCallback didSelected;

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: const BorderRadius.all(Radius.circular(5)),
      child: IconSlideAction(
        caption: text,
        color: backgroundColor,
        icon: iconData,
        onTap: () => didSelected(),
      ),
    );
  }
}

最後效果如下

j2Rfd4w8jydI3EvO3g