Flutter中mixin的使用

页表页面

这是一个普通的展示数据，上拉加载更多数据的列表。

其中有一个类型为List<T>的数据列表listData，有个page数据用于分页，isLoading用来判断是否正在加载数据，scrollController用于列表控制器

如果存在大量这种页面则可以用mixin来处理，不免大量重复的代码

import 'package:flutter/material.dart';
import 'package:flutter_app/app/model/ListViewJson.dart';
import 'package:flutter_app/app/shared/api/api.dart';
import 'package:dio/dio.dart';
import 'dart:convert';

import 'package:flutter_app/app/shared/mixins/list_more_data_mixin.dart';

/// 列表页面
class RecommendView extends StatefulWidget {
  @override
  _RecommendViewState createState() => _RecommendViewState();
}

class _RecommendViewState
    extends ListMoreDataBase<ListViewJsonData, RecommendView>
    with ListMoreDataMixin<ListViewJsonData, RecommendView> {
  @override
  Future<List<ListViewJsonData>> getData() async {
    String data = await DioUtils.postHttp(
      "api/getOneLevel",
      parameters: FormData.fromMap({
        'page': page,
        'limit': '10',
      }),
    );
    ListViewJson _json = ListViewJson.fromJson(json.decode(data));
    return _json.data;
  }

  @override
  void initState() {
    print('init widget');
    super.initState();
  }

  @override
  void dispose() {
    print('dispose widget');
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(title: Text('返回')),
      body: Stack(
        children: <Widget>[
          NotificationListener<ScrollNotification>(
            onNotification: onNotification,
            child: ListView.builder(
              controller: scrollController,
              itemCount: listData.length,
              itemBuilder: (BuildContext context, int index) =>
                  TeamListItem(listData[index]),
            ),
          ),
          isLoading ? Center(child: CircularProgressIndicator()) : Container()
        ],
      ),
    );
  }
}

mixin

import 'package:flutter/material.dart';

abstract class ListMoreDataBase<T, K extends StatefulWidget> extends State<K> {
  /// 获取异步数据
  Future<List<T>> getData();
}

/// 在
mixin ListMoreDataMixin<T, K extends StatefulWidget> on ListMoreDataBase<T, K> {
  @override
  void initState() {
    print('init');
    super.initState();
    initData();
  }

    @override
  void dispose() {
    print('dispose');
    super.dispose();
    scrollController?.dispose();
  }

  /// 数据列表
  List<T> listData = [];

  /// 分页
  int page = 1;

  /// 是否在加载数据
  bool isLoading = false;

  /// 滚动条控制器
  ScrollController scrollController = ScrollController();

  /// 初始化数据
  Future<void> initData() async {
    setState(() {
      isLoading = true;
    });

    List<T> data = await getData();
    if (!mounted) return;
    setState(() {
      listData = data;
      isLoading = false;
    });
  }

  /// 上拉加载更多
  Future<void> loadMore() async {
    setState(() {
      isLoading = true;
      page += 1;
    });

    List<T> data = await getData();

    if (data.isEmpty) {
      page--;
    }

    setState(() {
      listData.addAll(data);
      isLoading = false;
    });
  }

  bool canLoadMore(ScrollNotification scroll) {
    return !isLoading &&
        scroll.metrics.maxScrollExtent <= scrollController.offset;
  }

  bool onNotification(ScrollNotification scroll) {
    if (canLoadMore(scroll)) {
      loadMore();
    }
    return true;
  }
}

注：

• dart是单继承
• 在类中，能重写mixin的属性和方法，并且也能用super调用miixn属性和方法
• 上面的生命周期依次打印 init widget -> init -> dispose widget -> dispose