Flutter 에서 mixin 의 사용 에 대한 상세 한 설명

8946 단어 fluttermixin
mixin 이 뭐 예요?
mixin 은 어떻게 이해 해 야 합 니까?자바 학과 출신 인 저 에 게 이것 은 새로운 개념 이 고 각종 자료 의 소개 도 명확 한 정 의 를 찾 지 못 했 습 니 다.개인 적 인 이 해 를 보면 Kotlin 의 인터페이스(자바 와 의 차 이 는 추상 적 이지 않 은 속성 과 방법 을 가 질 수 있다)라 고 상상 할 수 있 고 여러 개의 mixin 은 서로 덮어 조합 을 실현 할 수 있 으 며 매우 큰 유연성 을 제공 하고 다 중 계승 과 유사 한 효 과 를 얻 을 수 있다.
페이지
이것 은 일반적인 전시 데이터 로 더 많은 데 이 터 를 불 러 오 는 목록 입 니 다.
그 중 하 나 는List<T>데이터 목록 listdata 입 니 다.페이지 를 나 누 는 데 사용 되 는 페이지 데이터 가 있 습 니 다.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 의 속성 과 방법 을 다시 쓸 수 있 고 슈퍼 로 miixn 속성 과 방법 을 호출 할 수 있 습 니 다
  • 위의 생명 주 기 는 init widget->init->dispose widget->dispose
  • 를 순서대로 인쇄 합 니 다.
    ps:다음은 간단 함 에서 복잡 함 까지 mixin 이 Dart 에서 의 용법 을 보 여 줍 니 다.
    가장 쉬 운 mixin.
    
    mixin TestMixin {
     void test() {
     print('test');
     }
     int testInt = 1;
     void test2();
    }
     
    class Test with TestMixin {
     @override
     test2() {
     print('test2');
     }
    }
    
    void main() {
     Test().test();  // test
     print(Test().testInt); // 1
     Test().test2();  // test2
    }
    mixin 자 체 는 추상 적일 수도 있 고 각종 방법 속성 을 정의 할 수도 있 으 며 추상 적일 수도 있다.
    어떤 유형의 mixin 기반
    
    class BaseObject {
     void method() {
     print('call method');
     }
    }
    mixin TestMixin on BaseObject{
     void test() {
     print('test');
     }
     int testInt = 1;
     void test2() {
     method();
     }
    }
     
    class Test extends BaseObject with TestMixin {
    }
     
    void main() {
     Test().test();  // test
     print(Test().testInt); // 1
     Test().test2();  // call method
    }
    on 키 워드 를 사용 하면 이 mixin 은 그 종류의 하위 클래스 에서 만 사용 할 수 있다 는 것 을 나타 낸다.그러면 결 과 는 분명 하 다.mixin 에서 그 종류의 정의 방법,속성 을 호출 할 수 있다.
    여러 개의 mixin
    
    mixin TestMixin {
     void test() {
     print('test');
     }
     
     int testInt = 1;
     
     void test2();
    }
     
    mixin TestMixin2 {
     int testInt = 2;
     
     void test3() {
     print('test3');
     }
    }
     
    class Test with TestMixin, TestMixin2 {
     @override
     test2() {
     print('test2');
     }
    }
     
    void main() {
     Test().test();  // test
     print(Test().testInt); // 2
     Test().test2();  // test2
     Test().test3();  // test3
    }
    TestMixin 과 TestMixin 2 의 우선 순 위 를 바 꾸 면:
    
    mixin TestMixin {
     void test() {
     print('test');
     }
     
     int testInt = 1;
     
     void test2();
    }
     
    mixin TestMixin2 {
     int testInt = 2;
     
     void test3() {
     print('test3');
     }
    }
     
    class Test with TestMixin2, TestMixin {
     @override
     test2() {
     print('test2');
     }
    }
     
    void main() {
     Test().test();  // test
     print(Test().testInt); // 1
     Test().test2();  // test2
     Test().test3();  // test3
    }
    만약 에 mixin 이 충돌 하 는 부분 이 존재 한다 면 뒤쪽 은 앞 을 덮 고 충돌 이 없 으 면 보류 할 수 있 기 때문에 뒤의 mixin 이 앞의 mixin 의 일부 논 리 를 수정 한 상황 이 존재 할 수 있 습 니 다.직접 계승 하지 않 아 도 덮어 쓸 수 있 고 더욱 복잡 한 계승 관 계 를 피 할 수 있 습 니 다.
    
    "    "
    mixin TestMixin on BaseClass {
     void init() {
     print('TestMixin init start');
     super.init();
     print('TestMixin init end');
     }
    }
     
    mixin TestMixin2 on BaseClass {
     void init() {
     print('TestMixin2 init start');
     super.init();
     print('TestMixin2 init end');
     }
    }
     
    class BaseClass {
     void init() {
     print('Base init');
     }
     BaseClass() {
     init();
     }
    }
     
    class TestClass extends BaseClass with TestMixin, TestMixin2 {
     
     @override
     void init() {
     print('TestClass init start');
     super.init();
     print('TestClass init end');
     
     }
    }
     
    void main() {
     TestClass();
     /// TestClass init start
     /// TestMixin2 init start
     /// TestMixin init start
     /// Base init
     /// TestMixin init end
     /// TestMixin2 init end
     /// TestClass init end
    }
    약간 감 겨 있 습 니 다.이 는 사실상 다 중 계승 이 이 루어 질 수 있 는 효과 에 이 르 렀 습 니 다.쓰기 가 귀 찮 고 어느 정도 실 수 를 하기 쉽 지 않 습 니 다(C++에 비해).소스 코드 에 가장 좋 고 가장 복잡 한 예 가 있 습 니 다.Widgets FlutterBinding 의 정 의 는 다음 과 같 습 니 다.
    
    class WidgetsFlutterBinding 
    extends BindingBase with GestureBinding, 
    ServicesBinding, 
    SchedulerBinding, 
    PaintingBinding, 
    SemanticsBinding,
     RendererBinding,
     WidgetsBinding 
    {
    }
    구체 적 으로 Widgets FlutterBinding 의 분석 은 없어 졌 으 니 소스 코드 를 직접 보 세 요~~
    총결산
    여기 서 Flutter 에서 mixin 의 사용 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 flutter mixin 의 사용 내용 은 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!

    좋은 웹페이지 즐겨찾기