9.9 占位图

9.9 占位图

大家已经发现了，因为首页拉取的数据比较多，所以首屏展示慢。（如多次请求、网络延迟等等）
大家可以放一张占位图，加强下用户体验

img

实现步骤：

第 1 步：添加图片

image-20220720101848592

将占位图放在这个位置
assets/images/3.0x/home_placeholder.png

  • 通过 vscode Flutter GetX Generator - 猫哥 插件 生成 x2 x1 尺寸图

配置图片资源索引
lib/common/values/images.dart

第 2 步：占位图组件

lib/common/components/placehold.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import 'package:flutter/material.dart';

import '../index.dart';

/// 占位图组件
class PlaceholdWidget extends StatelessWidget {
  // 资源图片地址
  final String? assetImagePath;

  const PlaceholdWidget({
    Key? key,
    this.assetImagePath,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ImageWidget.asset(assetImagePath ?? AssetsImages.homePlaceholderPng)
        .paddingHorizontal(AppSpace.page)
        .center();
  }
}

第 3 步：控制器

为了方便模拟效果，特意延迟拉取数据 1 秒看看效果

lib/pages/goods/home/controller.dart

1
2
3
4
5
6
7
8
_initData() async {
  ...

  // 模拟网络延迟 1 秒
  await Future.delayed(const Duration(seconds: 1));

  update(["home"]);
}

第 3 步：视图

lib/pages/goods/home/view.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
// 主视图
Widget _buildView() {
  return controller.flashShellProductList.isEmpty ||
          controller.newProductProductList.isEmpty
      ?
      // 占位图
      const PlaceholdWidget()
      : CustomScrollView(
          slivers: [
            ...
          ],
        );
}

提交代码到 git