做设计学什么英语比较好的网站,建立个人网站多少钱,排名优化工具下载,杭州网站建设seo前言
学过Java的同学#xff0c;应该都知道面向对象语言的三大特征#xff0c;封装、继承、多态#xff1b;
Dart也是面向对象的语言#xff0c;但是在Flutter中的很多组件都被下划线 _ 标记为私有#xff0c;导致无法继承#xff0c;本文将介绍一种非私有的创建组件写…前言
学过Java的同学应该都知道面向对象语言的三大特征封装、继承、多态
Dart也是面向对象的语言但是在Flutter中的很多组件都被下划线 _ 标记为私有导致无法继承本文将介绍一种非私有的创建组件写法。
当前案例 Flutter SDK版本3.13.2
效果图 StatefulWidget
基类base_stateful_widget.dart
import package:flutter/material.dart;class BaseStatefulWidget extends StatefulWidget {final MapString,dynamic? arguments;const BaseStatefulWidget({super.key,this.arguments});overrideStateBaseStatefulWidget createState() BaseStatefulWidgetState();
}class BaseStatefulWidgetStateT extends StatefulWidget extends StateBaseStatefulWidget {overrideWidget build(BuildContext context) {return const Placeholder();}}创建第一个非私有的StatefulWidget组件parent_box.dart
import package:flutter/material.dart;
import package:flutter_widget_extends/base/base_stateful_widget.dart;class ParentBox extends BaseStatefulWidget {const ParentBox({super.key,super.arguments});overrideParentBoxStateParentBox createState() ParentBoxState();
}class ParentBoxStateT extends ParentBox extends BaseStatefulWidgetStateParentBox {overrideWidget build(BuildContext context) {final size double.parse((widget.arguments?[size] ?? 50).toString());return Container(width: size,height: size,margin: const EdgeInsets.only(bottom: 12),color: Colors.green,alignment: Alignment.center,child: content(),);}content() {final content widget.arguments?[content];return Text(content,style: const TextStyle(fontSize: 20,color: Colors.yellow,));}}
子类child_box.dart
import package:flutter/material.dart;
import package:flutter_widget_extends/widget/parent_box.dart;class ChildBox extends ParentBox {const ChildBox({super.key,super.arguments});overrideChildBoxStateChildBox createState() ChildBoxState();
}class ChildBoxStateT extends ChildBox extends ParentBoxStateChildBox {overridecontent() {final content widget.arguments?[content];return Text(content,style: const TextStyle(fontSize: 20,color: Colors.white,));}}
子孙类posterity_box.dart
import package:flutter/material.dart;
import package:flutter_widget_extends/widget/child_box.dart;class PosterityBox extends ChildBox {const PosterityBox({super.key,super.arguments});overrideChildBoxStateChildBox createState() PosterityBoxState();
}class PosterityBoxStateT extends PosterityBox extends ChildBoxStatePosterityBox {overridecontent() {final content widget.arguments?[content];return Text(content,style: const TextStyle(fontSize: 20,color: Colors.black,));}} StatelessWidget
基类base_stateless_widget.dart
import package:flutter/material.dart;class BaseStatelessWidget extends StatelessWidget {final MapString,dynamic? arguments;const BaseStatelessWidget({super.key, this.arguments});overrideWidget build(BuildContext context) {return const Placeholder();}
}
创建第一个非私有的StatelessWidget组件school_box.dart
import package:flutter/material.dart;
import package:flutter_widget_extends/base/base_stateless_widget.dart;class SchoolBox extends BaseStatelessWidget {const SchoolBox({super.key,super.arguments});overrideWidget build(BuildContext context) {final size double.parse((arguments?[size] ?? 50).toString());return Container(width: size,height: size,margin: const EdgeInsets.only(bottom: 12),color: Colors.cyan,alignment: Alignment.center,child: content(),);}content() {final content arguments?[content];return Text(content,style: const TextStyle(fontSize: 20,color: Colors.white,));}}
子类teacher_box.dart
import package:flutter/material.dart;
import package:flutter_widget_extends/widget/school_box.dart;class TeacherBox extends SchoolBox {const TeacherBox({super.key,super.arguments});overridecontent() {final content arguments?[content];return Text(content,style: const TextStyle(fontSize: 20,color: Colors.yellow,));}}子孙类student_box.dart
import package:flutter/material.dart;
import package:flutter_widget_extends/widget/teacher_box.dart;class StudentBox extends TeacherBox {const StudentBox({super.key,super.arguments});overridecontent() {final content arguments?[content];return Text(content,style: const TextStyle(fontSize: 20,color: Colors.greenAccent,));}}入口相关文件test_stateful_widget.dart、test_stateless_widget.dart、main.dart
import package:flutter/material.dart;import ../widget/child_box.dart;
import ../widget/parent_box.dart;
import ../widget/posterity_box.dart;class TestStatefulWidget extends StatefulWidget {const TestStatefulWidget({super.key});overrideStateTestStatefulWidget createState() _TestStatefulWidgetState();
}class _TestStatefulWidgetState extends StateTestStatefulWidget {overrideWidget build(BuildContext context) {return Scaffold(body: SizedBox(width: MediaQuery.of(context).size.width,height: MediaQuery.of(context).size.height,child: const Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [ParentBox(arguments: {size: 260,content: 父级,}),ChildBox(arguments: {size: 200,content: 子级,}),PosterityBox(arguments: {size: 150,content: 子孙级,}),],),),);}}
import package:flutter/material.dart;
import package:flutter_widget_extends/widget/school_box.dart;
import package:flutter_widget_extends/widget/student_box.dart;
import package:flutter_widget_extends/widget/teacher_box.dart;class TestStatelessWidget extends StatefulWidget {const TestStatelessWidget({super.key});overrideStateTestStatelessWidget createState() _TestStatelessWidgetState();
}class _TestStatelessWidgetState extends StateTestStatelessWidget {overrideWidget build(BuildContext context) {return Scaffold(body: SizedBox(width: MediaQuery.of(context).size.width,height: MediaQuery.of(context).size.height,child: const Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [SchoolBox(arguments: {size: 150,content: 父级,}),TeacherBox(arguments: {size: 200,content: 子级,}),StudentBox(arguments: {size: 260,content: 子孙级,}),],),),);}}import package:flutter/material.dart;
import package:flutter_widget_extends/page/test_stateful_widget.dart;
import package:flutter_widget_extends/page/test_stateless_widget.dart;void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});overrideWidget build(BuildContext context) {return MaterialApp(debugShowCheckedModeBanner: false,title: Flutter Demo,theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),useMaterial3: true,),home: const MyHomePage(title: Flutter Demo Home Page),);}
}class MyHomePage extends StatefulWidget {const MyHomePage({super.key, required this.title});final String title;overrideStateMyHomePage createState() _MyHomePageState();
}class _MyHomePageState extends StateMyHomePage {overrideWidget build(BuildContext context) {return Scaffold(body: SizedBox(width: MediaQuery.of(context).size.width,height: MediaQuery.of(context).size.height,child: Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [Padding(padding: const EdgeInsets.only(bottom: 16),child: ElevatedButton(onPressed: () {Navigator.pushvoid(context,MaterialPageRoutevoid(builder: (BuildContext context) const TestStatefulWidget(),),);},child: const Text(TestStatefulWidget,style: TextStyle(fontSize: 16),),),),ElevatedButton(onPressed: () {Navigator.pushvoid(context,MaterialPageRoutevoid(builder: (BuildContext context) const TestStatelessWidget(),),);},child: const Text(TestStatelessWidget,style: TextStyle(fontSize: 16),),)],),),);}
}源码地址
GitHub - LanSeLianMa/flutter_widget_extends: Flutter组件 StatefulWidget、StatelessWidget 可继承写法
