置顶带滚动效果_Flutter 实现钉钉消息列表效果(三)

上一篇: Flutter 实现钉钉消息列表效果(二)

依赖

flutter_slidable: ^0.5.5 # 包裹 ListView Item 实现可以左右滑动的扩展操作

实现效果如图

修改整体的 DTMessageScreen 布局

• 使用 SingleChildScrollView + Column

@override
  Widget build(BuildContext context) {
    
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: buildAppBar(context),
      body: SingleChildScrollView(
          controller: _scrollController,
          child: Column(
              children: <Widget>[
                  DTMessageSearchDecoration(),
                  DTMessageTopQuick(),
                  DTMessageTopMask(),
                  DTMessageListView(),
              ],
          ),
      )
    );
  }

实现一个 DTMessageListView 消息列表

• ListView.builder 来构建出 ListView
• 视图显示根据数据模型来显示不同的 Item
• 创建 DTMessageModel 数据模型
• 第三方 Slidable 添加扩展操作 (删除、取消置顶)
• ListView 设置
  • shrinkWrap: true 适应父容器
  • physics: NeverScrollableScrollPhysics() ，禁止 ListView 自身的滚动效果，使用父组件的滚动，因为父组件是 SingleChildScrollView

@override
  Widget build(BuildContext context) {
    
    return ListView.builder(
      itemCount: _messageList.length,
      itemBuilder: (BuildContext context, int index) {
    
        DTMessageModel model = _messageList[index];
        return Slidable(
          actionPane: SlidableDrawerActionPane(),
          actionExtentRatio: 0.25,
          secondaryActions: <Widget>[
            IconSlideAction(
              caption: '取消置顶',
              color: Colors.black45,
              icon: Icons.more_horiz,
              onTap: () => _showSnackBar('More'),
            ),
            IconSlideAction(
              caption: '删除',
              color: Colors.redAccent,
              icon: Icons.del