Flutter 系列（一），有固定 header 的底部滑动页效果

最近换工作了，比较忙，没时间写博客。但总不写也不好，所以后面我准备偷懒下，尽可能通过多贴些代码，控制时间，就不在细节处多费话了。

正文

实现的效果是这样的：

刚开始的时候，是在dev上找了两个轮子，简单测了下，都不太满意，滑动事件处理的比较粗糙，总有bug。就在想着，要不要拿源码改一版的时候，让我无意间看到了这个帖子

里面的想法，大开眼界，是通过 DraggableScrollableSheet 和 IgnorePointer 来完美实现上面的效果。

实现

这是 DraggableScrollableSheet 的代码，

DraggableScrollableSheet(
  maxChildSize: 0.8,
  minChildSize: 0.25, // 注意都是占父组件的比例
  initialChildSize: 0.25,
  expand: true,
  builder: (BuildContext context, ScrollController controller) {
    return Stack(); // body列表和header栏都在stack内
  },
)
复制代码

这是 body 列表和 header，这里的 body 是个 list，

Stack(
  children: [
    Container(
      color: Colors.blue,
      child: Body( // ListView.separated
        controller: controller,
        paddingTop: headerHeight, // 防止压盖
      ),
    ),
    const IgnorePointer( // 这里不接收事件，所以拖动 header 也能够滑动页面
      child: Header( // Container[Center[Text]]
        height: headerHeight,
      ),
    ),
  ],
)
复制代码

但如果我们想在 header 内加点击事件呢？那在 Stack header 上层再加 widget 就好了。

代码就这点，我放在了 gitHub 上，感兴趣的可以看下。

本节完。