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