Flutter之DraggableScrollableSheet可滑动sheet实现类似抖音商品详情页

Flutter之DraggableScrollableSheet可滑动sheet实现类似抖音商品详情页

介绍：

使用DraggableScrollableSheet可实现类似抖音视频上商品弹出页的滑动动效果。以下代码是嵌入我的子页面。

代码如下：

• 父页面（showModalBottomSheet）
  如果要实现上滑满屏的效果，需要将scrollController传入到子页面

   showModalBottomSheet(
      isScrollControlled: true,
      context: context,
      builder: (context) {
    
    
        return StatefulBuilder(
          builder: (context1, setState2) {
    
    
            return DraggableScrollableSheet(
              expand: false,
               //初始化占用父容器高度
              initialChildSize: 0.75,
               //占用父组件的最小高度
              minChildSize: 0.75,
              builder: (BuildContext context, ScrollController scrollController) {
    
    
                return ClipRRect(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(ScreenAdapter.setHeight(14)),
                    topRight: Radius.circular(ScreenAdapter.setHeight(14)),
                  ),
                  //嵌入我的子页面（ProductDetailsPage），如果要实现上滑满屏的效果，需要将scrollController传入到子页面
                  child: ProductDetailsPage(arguments: {
    
    
                    "id": item['id'],
                    // 传入controller，实现上滑效果
                    'controller': scrollController
                  }),
                );
              },
            );
          },
        );
      },
    )

• 子页面（ProductDetailsPage）
  将子页面可滑动组件的controller设置为父页面传入的controller,便可以实现上滑满屏的效果

 Scaffold(
      backgroundColor: Color.fromRGBO(238, 238, 238, 1),
      body: Stack(
        children: [
          _productInfo.isNotEmpty
              ? CustomScrollView(
                 //将子页面可滑动组件的controller设置为父页面传入的controller
                  controller: _controller,
                  slivers: [
                    _stickBanner(),
                    _buildStickyBar(),
                    _buildList(),
                  ],
                )
              : LoadingView(results: _results, page: 'productDetails'),
          //底部收藏，比价，客服，加入购物车，立即购买
          _bottomOpration(),
          MyCommonWidget.shopCartEntry(context, _count),
        ],
      ),
    )