12.12 下拉刷新数据

12.12 下拉刷新数据

实现步骤：

第 1 步：控制器

lib/pages/goods/product_details/controller.dart

1
2
3
4
// 主界面 刷新控制器
final RefreshController mainRefreshController = RefreshController(
  initialRefresh: true,
);
1
2
3
4
5
6
7
8
9
10
11
12
13
// main 下拉刷新
void onMainRefresh() async {
  try {
    // 拉取商品详情
    await _loadProduct();
    // 刷新数据
    mainRefreshController.refreshCompleted();
  } catch (error) {
    // 刷新失败
    mainRefreshController.refreshFailed();
  }
  update(["product_details"]);
}
1
2
3
_initData() async {
	// 删掉
	// await _loadProduct();
1
2
3
4
5
6
7
8
9
10
@override
void onClose() {
  super.onClose();
  // 销毁 tab 控制器
  tabController.dispose();
  // 销毁 主下拉控制器
  mainRefreshController.dispose();
  // 销毁 评论下拉控制器
  reviewsRefreshController.dispose();
}

第 2 步：视图

lib/pages/goods/product_details/view.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
@override
Widget build(BuildContext context) {
  return GetBuilder<ProductDetailsController>(
    init: ProductDetailsController(),
    id: "product_details",
    // 4 GetBuilder 属性 tag 设置
    tag: tag,
    builder: (_) {
      return Scaffold(
        // 导航
        appBar: mainAppBarWidget(titleString: LocaleKeys.gDetailTitle.tr),
        // 内容
        body: SafeArea(
          child: <Widget>[
            // 主视图
            SmartRefresher(
              controller: controller.mainRefreshController, // 刷新控制器
              onRefresh: controller.onMainRefresh, // 下拉刷新回调
              child: _buildView(),
            ),
            // 底部按钮
            _buildButtons().positioned(
              bottom: 10,
              left: 0,
              right: 0,
            ),
          ].toStack(),
        ),
      );
    },
  );
}

第 3 步：评论星标组件

image-20220722130946222

lib/common/components/stars_list.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import 'package:flutter/material.dart';

import '../index.dart';

/// 星级列表组件
class StarsListWidget extends StatelessWidget {
  /// 点击事件
  final Function(int value)? onTap;

  /// 图标 data
  final IconData? iconData;

  /// 星级数量
  final int starNum;

  /// 选中的星级
  final int value;

  /// 星级大小
  final double? size;

  // 颜色
  final Color? color;

  // 选中颜色
  final Color? selectedColor;

  // 元素间距
  final double? spacing;

  // 行间距
  final double? runSpacing;

  // 构造
  StarsListWidget({
    Key? key,
    this.onTap,
    this.size = 24,
    this.iconData,
    Color? color,
    Color? selectedColor,
    this.spacing = 5,
    this.runSpacing = 5,
    this.starNum = 5,
    this.value = 0,
  })  : color = color ?? AppColors.surfaceVariant,
        selectedColor = selectedColor ?? AppColors.primary,
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return <Widget>[
      for (var i = 1; i <= starNum; i++)
        IconWidget.icon(
          iconData ?? Icons.star,
          size: size ?? 12,
          color: i <= value ? selectedColor : color,
        ).onTap(() {
          if (value == 1 && i == value) {
            onTap?.call(0);
          } else {
            onTap?.call(i);
          }
        }),
    ].toWrap(
      spacing: spacing ?? AppSpace.listItem,
      runSpacing: runSpacing ?? AppSpace.listRow,
    );
  }
}

lib/pages/goods/product_details/widgets/tab_reviews.dart

1
2
3
4
5
6
7
8
9
10
11
12
// 列表项
_buildListItem(ReviewModel item) {
  return <Widget>[
    ...

    // 星、名称、评论、图
    <Widget>[
      // 星
      StarsListWidget(
        value: item.rating ?? 0,
        size: 12,
      ),

提交代码到 git