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(),
        ),
      );
    },
  );
}
相关推荐
郑州光合科技余经理1 分钟前
微服务架构:基于Spring Cloud ,构建同城生活服务平台
java·spring cloud·微服务·小程序·架构·uni-app
ajassi20008 分钟前
开源 java android app 开发(十七)封库--混淆源码
android·java·开源
海梨花11 分钟前
关于Java的几个小问题
java·面试
vx_dmxq21122 分钟前
免费领源码-Spring boot的物流管理系统 |可做计算机毕设Java、Python、PHP、小程序APP、C#、爬虫大数据、单片机、文案
java·大数据·python·jupyter·课程设计
2501_916008891 小时前
JavaScript调试工具有哪些?常见问题与常用调试工具推荐
android·开发语言·javascript·小程序·uni-app·ecmascript·iphone
zero13_小葵司1 小时前
在不同开发语言与场景下设计模式的使用
java·开发语言·javascript·设计模式·策略模式
梁萌1 小时前
java实现移动云mas短信发送
java·短信·移动·mas
PH = 71 小时前
Spring AI整合聊天模型DeepSeek
java·spring boot·后端
珹洺1 小时前
Java-Spring入门指南(十三)SpringMVC基本概念与核心流程详解
java·开发语言·spring
ccccczy_1 小时前
SpringCloudGateway:像城市交通指挥系统一样的微服务网关
java·springcloud·微服务网关·api网关·springcloudgateway