Flutter：CustomScrollView自定义滚动使用

CustomScrollView的使用场景：当需要构建复杂的滚动布局时，如上图，有分页，爆款商品是ListView

注意事项

haskell 复制代码

1、Widget需要进行转换
_buildBanner().sliverToBoxAdapter(),

2、不能直接使用paddingHorizontal，
可用sliverPaddingHorizontal()代替

3、所有组件放在
CustomScrollView(
	slivers: []
)中

上图代码

js 复制代码

// 爆款商品
Widget _buildFlashSell() {
  return <Widget>[
    SizedBox(height: 25.w,),
    // 标题
    <Widget>[
      TDImage(assetUrl: "assets/myimage/nav-11.png",width: 36.w,height: 36.w,),
      SizedBox(width: 7.w,),
      TextWidget.body('爆款商品',size: 28.sp,color: const Color(0xff181818),),
      SizedBox(width: 20.w,),
      TextWidget.body('品质卓越，超值享受，一切尽在我们的爆款产品！ ',size: 20.sp,color: const Color(0xff999999),),
    ].toRow(
      crossAxisAlignment: CrossAxisAlignment.baseline,
      textBaseline: TextBaseline.alphabetic,
    ).paddingHorizontal(30.w),
    SizedBox(height: 30.w,),

    // 爆款商品可左右滑动查看
    <Widget>[
      SizedBox(width: 30.w,),
      for (var i = 0; i < 5; i++)
      <Widget>[
        TDImage(assetUrl: "assets/myimage/goods.png",width: 200.w,height: 160.w,),
        SizedBox(height: 5.w,),
        TextWidget.body(
          '爆款商品爆款商品爆款商品',
          size: 28.sp,
          color: const Color(0xff181818),
          overflow: TextOverflow.ellipsis,
          maxLines: 1,
        ),
        SizedBox(height: 5.w,),
        <Widget>[
          TextWidget.body('￥',size: 24.sp,color: const Color(0xffFF6E00),),
          TextWidget.body('599.00',size: 28.sp,color: const Color(0xffFF6E00),),
        ].toRow(),
        Text('原价￥599.00',
          style: TextStyle(
            fontSize: 24.sp,
            color: const Color(0xff999999),
            decoration: TextDecoration.lineThrough,
            decorationColor: const Color(0xff999999)
          ),
        ),
      ].toColumn(crossAxisAlignment: CrossAxisAlignment.start).width(200.w).marginOnly(right: 15.w),
      SizedBox(width: 15.w,),
    ].toListView(scrollDirection: Axis.horizontal,).expanded(),

  ].toColumn()
  .decorated(border: Border.all(width: 1, color: const Color(0xffEDF1F2)),borderRadius: BorderRadius.circular(20.w))
  .tight(height: 390.w);
}
  
// 商品列表
Widget _buildGoodsList() {
  return SliverGrid(
    delegate: SliverChildBuilderDelegate(
      (BuildContext context, int position) {
        // var product = controller.goodsList[position];
        return <Widget>[
          TDImage(assetUrl: "assets/myimage/goods.png",width: 300.w,height: 300.w,),
          <Widget>[
            TextWidget.body('爆款商品爆款商品爆款商品爆款商品爆款商品爆款商品商品',size: 28.sp,color: const Color(0xff181818),overflow: TextOverflow.ellipsis),
            SizedBox(height: 10.w,),
            // 价格
            <Widget>[
              TextWidget.body('￥',size: 24.sp,color: const Color(0xffFF6E00),weight: FontWeight.bold,),
              TextWidget.body('599.00',size: 32.sp,color: const Color(0xffFF6E00),weight: FontWeight.bold,),
            ].toRow(),
            <Widget>[
              Text('原价￥599.00',
                style: TextStyle(
                  fontSize: 24.sp,
                  color: const Color(0xff999999),
                  decoration: TextDecoration.lineThrough,
                  decorationColor: const Color(0xff999999)
                ),
              ),
              TextWidget.body('销量：100',size: 24.sp,color: const Color(0xff999999),),
            ].toRow(mainAxisAlignment: MainAxisAlignment.spaceBetween),
          ].toColumn().paddingOnly(left: 20.w,right: 20.w,top: 20.w,)

        ].toColumn()
        .paddingTop(20.w)
        .decorated(border: Border.all(width: 1, color: const Color(0xffEDF1F2)),borderRadius: BorderRadius.circular(20.w));
      },
      childCount: controller.goodsList.length,
    ),
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2,
      mainAxisSpacing: AppSpace.listRow,
      crossAxisSpacing: AppSpace.listItem,
      childAspectRatio: 0.7,
    ),
  );
}

// 主视图
Widget _buildView() {
  return CustomScrollView(
    slivers: [
      _buildBanner().sliverToBoxAdapter(),
      _buildSearch().sliverToBoxAdapter().sliverPaddingHorizontal(30.w),
      SizedBox(height: 30.w,).sliverToBoxAdapter(),
      _buildCategory().sliverToBoxAdapter().sliverPaddingHorizontal(30.w),
      SizedBox(height: 40.w,).sliverToBoxAdapter(),
      _buildNotice().sliverToBoxAdapter().sliverPaddingHorizontal(30.w),
      SizedBox(height: 30.w,).sliverToBoxAdapter(),
      _buildFlashSell().sliverToBoxAdapter().sliverPaddingHorizontal(30.w),
      SizedBox(height: 30.w,).sliverToBoxAdapter(),
      _buildGoodsList().sliverPaddingHorizontal(30.w),
    ],
  );
}

@override
Widget build(BuildContext context) {
  return GetBuilder<HomeController>(
    init: HomeController(),
    id: "home",
    builder: (_) {
      return Scaffold(
        // appBar: AppBar(title: const Text("card")),
        backgroundColor: Colors.white,
        body: SmartRefresher(
          controller: controller.refreshController,
          enablePullUp: true, // 启用上拉加载
          onRefresh: controller.onRefresh, // 下拉刷新回调
          onLoading: controller.onLoading, // 上拉加载回调
          footer: const SmartRefresherFooterWidget(), // 底部加载更多组件
          child: _buildView(),
        ),
      );
    },
  );
}