flutter 交互之DraggableScrollableSheet

最新推荐文章于 2024-09-27 10:39:01 发布

原创最新推荐文章于 2024-09-27 10:39:01 发布 · 603 阅读

0 ·

CC 4.0 BY-SA版权

flutter 专栏收录该内容

220 篇文章

订阅专栏

这篇博客介绍了如何在Flutter中使用DraggableScrollableSheet组件创建一个初始占据屏幕小部分，可拖动扩展至全屏的列表视图。示例代码展示了一个包含AppBar的Scaffold，其Body部分是一个DraggableScrollableSheet，内部包裹了一个ListView，显示25个列表项。用户可以通过拖动顶部来改变Sheet的高度，从而实现内容的动态展示。

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('DraggableScrollableSheet'),
      ),
      body: SizedBox.expand(
        child: DraggableScrollableSheet(
          builder: (BuildContext context, ScrollController scrollController) {
            return Container(
              color: Colors.blue[100],
              child: ListView.builder(
                controller: scrollController,
                itemCount: 25,
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(title: Text('Item $index'));
                },
              ),
            );
          },
        ),
      ),
    );
  }
}

在最开始时，占的位置大概在0.25的位置上，上面有空白，当拖动时，占用父窗口的所有空间。