欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

《Flutter 控件大全》第三十九个:DraggableScrollableSheet

程序员文章站 2022-06-01 18:14:24
...
  • 如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。
  • 同时也欢迎关注我的Flutter公众号【老孟程序员】,公众号首发Flutter的相关内容。
  • Flutter地址:http://laomengit.com 里面包含160多个组件的详细用法。

DraggableScrollableSheet组件可以在屏幕上拖动,builder属性需要返回其子控件,可以是任何类型的子控件,一般返回一个ListView,用法如下:

DraggableScrollableSheet(
    builder:
        (BuildContext context, ScrollController scrollController) {
      return Container(
        color: Colors.blue[100],
        child: ListView.builder(
          controller: scrollController,
          itemCount: 100,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(title: Text('评论 $index'));
          },
        ),
      );
    })

还可以设置其初始尺寸、最大尺寸和最小尺寸,用法如下:

DraggableScrollableSheet(
    initialChildSize: 0.4,
    minChildSize: 0.4,
    maxChildSize: 1,
  	...
    )

expand属性表示是否充满父组件,大部分情况下设置true,如果父组件将根据其所需大小来定位此组件时需要设置为false,比如Center,设置如下:

DraggableScrollableSheet(
  expand: false,
  ...
  )

一个电影的详情介绍页面,包含顶部的海报图、中间介绍部分以及底部的评论部分,在滑动评论的时候希望评论能滑到顶部,这样用户的体验会非常好,效果如下:

《Flutter 控件大全》第三十九个:DraggableScrollableSheet

实现此效果的代码:

@override
Widget build(BuildContext context) {
  return Stack(
    children: <Widget>[
      Column(
        children: <Widget>[
          Image.network(
              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583224371276&di=c8a9d759bdde3218aef0f24268f11ab2&imgtype=0&src=http%3A%2F%2Fi1.sinaimg.cn%2Fent%2Fr%2F2009-03-27%2FU2507P28T3D2441286F328DT20090327082744.jpg'),
          Container(
            height: 200,
            color: Colors.grey,
            alignment: Alignment.center,
            child: Text('电影介绍'),
          ),
        ],
      ),
      Positioned.fill(
          child: DraggableScrollableSheet(
            expand: false,
              initialChildSize: 0.4,
              minChildSize: 0.4,
              maxChildSize: 1,
              builder:
                  (BuildContext context, ScrollController scrollController) {
                return Container(
                  color: Colors.blue[100],
                  child: ListView.builder(
                    controller: scrollController,
                    itemCount: 100,
                    itemBuilder: (BuildContext context, int index) {
                      return ListTile(title: Text('评论 $index'));
                    },
                  ),
                );
              }))
    ],
  );
}
相关标签: # Flutter Widgets