Flutter组件 StatefulWidget、StatelessWidget 可继承写法

前言

学过Java的同学,应该都知道面向对象语言的三大特征,封装、继承、多态;

Dart也是面向对象的语言,但是在Flutter中的很多组件都被下划线 '_' 标记为私有,导致无法继承,本文将介绍一种非私有的创建组件写法。

当前案例 Flutter SDK版本:3.13.2

效果图

StatefulWidget

基类:base_stateful_widget.dart

import 'package:flutter/material.dart';class BaseStatefulWidget extends StatefulWidget {final Map<String,dynamic>? arguments;const BaseStatefulWidget({super.key,this.arguments});@overrideState<BaseStatefulWidget> createState() => BaseStatefulWidgetState();
}class BaseStatefulWidgetState<T extends StatefulWidget> extends State<BaseStatefulWidget> {@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});@overrideParentBoxState<ParentBox> createState() => ParentBoxState();
}class ParentBoxState<T extends ParentBox> extends BaseStatefulWidgetState<ParentBox> {@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});@overrideChildBoxState<ChildBox> createState() => ChildBoxState();
}class ChildBoxState<T extends ChildBox> extends ParentBoxState<ChildBox> {@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});@overrideChildBoxState<ChildBox> createState() => PosterityBoxState();
}class PosterityBoxState<T extends PosterityBox> extends ChildBoxState<PosterityBox> {@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 Map<String,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});@overrideState<TestStatefulWidget> createState() => _TestStatefulWidgetState();
}class _TestStatefulWidgetState extends State<TestStatefulWidget> {@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});@overrideState<TestStatelessWidget> createState() => _TestStatelessWidgetState();
}class _TestStatelessWidgetState extends State<TestStatelessWidget> {@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;@overrideState<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {@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.push<void>(context,MaterialPageRoute<void>(builder: (BuildContext context) =>const TestStatefulWidget(),),);},child: const Text('TestStatefulWidget',style: TextStyle(fontSize: 16),),),),ElevatedButton(onPressed: () {Navigator.push<void>(context,MaterialPageRoute<void>(builder: (BuildContext context) =>const TestStatelessWidget(),),);},child: const Text('TestStatelessWidget',style: TextStyle(fontSize: 16),),)],),),);}
}

源码地址

GitHub - LanSeLianMa/flutter_widget_extends: Flutter组件 StatefulWidget、StatelessWidget 可继承写法

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/254161.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

@PostMapping/ @GetMapping等请求格式

目录 1.只传一个参数的 第一种 第二种 第三种:表单 2.传整个对象的 2.1修改实体类就是传整个对象过来 2.2新增实体类就是传整个对象过来新增 1.只传一个参数的 第一种 PostMapping("/add/{newsId}")public Result addOne(PathVariable Integer newsId) {}pos…

Python爬虫之文件存储#5

爬虫专栏&#xff1a;http://t.csdnimg.cn/WfCSx 文件存储形式多种多样&#xff0c;比如可以保存成 TXT 纯文本形式&#xff0c;也可以保存为 JSON 格式、CSV 格式等&#xff0c;本节就来了解一下文本文件的存储方式。 TXT 文本存储 将数据保存到 TXT 文本的操作非常简单&am…

排序算法---插入排序

原创不易&#xff0c;转载请注明出处。欢迎点赞收藏~ 插入排序是一种简单直观的排序算法&#xff0c;它的基本思想是将待排序的元素分为已排序和未排序两部分&#xff0c;每次从未排序部分中选择一个元素插入到已排序部分的合适位置&#xff0c;直到所有元素都插入到已排序部分…

navigator.mediaDevices.getUserMedia获取本地音频/麦克权限并提示用户

navigator.mediaDevices.getUserMedia获取本地音频/麦克权限并提示用户 效果获取权限NotFoundErrorNotAllowedError 代码 效果 获取权限 NotFoundError NotAllowedError 代码 // 调用 captureLocalMedia()// 方法 function captureLocalMedia() {console.warn(Requesting lo…

rem基础+媒体查询+Less基础

一&#xff0c;rem基础 二&#xff0c;媒体查询 2.1什么是媒体查询 2.2语法规范 2.3媒体查询rem实现元素动态大小的变化 2.4 引入资源&#xff08;理解&#xff09; 三&#xff0c;Less基础 1 维护css的弊端 2 Less介绍 3 Less变量 变量命名规范 4 Less嵌套 5 Less…

Mysql用户权限角色访问控制

写在开头 有些权限由于mysql版本不同 root用户本身可能没有某些权限 GRANT SYSTEM_USER ON *.* TO root%; (root用户 mysql8.0.27版本确实没有这个权限 可以一开始加上) 记得是 with grant option 权限给其他用户的时候碰到这个问题 如果按照这个文档测试的话 遇到了再把…

Android13多媒体框架概览

Android13多媒体框架概览 Android 多媒体框架 Android 多媒体框架旨在为 Java 服务提供可靠的接口。它是一个系统&#xff0c;包括多媒体应用程序、框架、OpenCore 引擎、音频/视频/输入的硬件设备&#xff0c;输出设备以及一些核心动态库&#xff0c;比如 libmedia、libmedi…

DC-7靶机渗透详细流程

信息收集&#xff1a; 1.存活扫描&#xff1a; 由于靶机和kali都是nat的网卡&#xff0c;都在一个网段&#xff0c;我们用arp-scan会快一点&#xff1a; arp-scan arp-scan -I eth0 -l └─# arp-scan -I eth0 -l Interface: eth0, type: EN10MB, MAC: 00:0c:29:dd:ee:6…

基于微信小程序的校园二手交易平台

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

Springboot+vue的社区智慧养老监护管理平台设计与实现(有报告),Javaee项目,springboot vue前后端分离项目

演示视频&#xff1a; Springbootvue的社区智慧养老监护管理平台设计与实现&#xff08;有报告&#xff09;&#xff0c;Javaee项目&#xff0c;springboot vue前后端分离项目 项目介绍&#xff1a; 本文设计了一个基于Springbootvue的前后端分离的社区智慧养老监护管理平台设…

【Linux】SystemV IPC

进程间通信 一、SystemV 共享内存1. 共享内存原理2. 系统调用接口&#xff08;1&#xff09;创建共享内存&#xff08;2&#xff09;形成 key&#xff08;3&#xff09;测试接口&#xff08;4&#xff09;关联进程&#xff08;5&#xff09;取消关联&#xff08;6&#xff09;释…

Android:Volley框架使用

3.15 Volley框架使用 Volley框架主要作为网络请求,图片加载工具。当应用数据量小、网络请求频繁,可以使用Volley框架。 框架Github地址:https://github.com/google/volley Volley框架的简单使用,创建项目Pro_VolleyDemo。将Github上下载Volley框架源代码,volley-master.zi…

无心剑汉英双语诗《龙年大吉》

七绝龙年大吉 Great Luck in the Dragon Year 龙腾五岳九州圆 年吼佳音万里传 大漠苍鹰华夏梦 吉人天相铸奇缘 Dragon flies over five peaks watching the divine land so great and round, New Year’s call sends joyous tidal waves far across the world’s bound. The…

SQL注入(SQL Injection)从注入到拖库 —— 简单的手工注入实战指南精讲

基本SQL注入步骤&#xff1a; 识别目标&#xff1a;确定目标网站或应用程序存在潜在的SQL注入漏洞。收集信息&#xff1a;通过查看页面源代码、URL参数和可能的错误信息等&#xff0c;搜集与注入有关的信息。判断注入点&#xff1a;确定可以注入的位置&#xff0c;比如输入框、…

红队渗透靶机:TIKI: 1

目录 信息收集 1、arp 2、nmap 3、nikto 4、whatweb 目录探测 1、dirsearch 2、gobuster WEB web信息收集 searchsploit cms信息收集 ssh登录 提权 信息收集 1、arp ┌──(root㉿ru)-[~/kali] └─# arp-scan -l Interface: eth0, type: EN10MB, MAC: 00:0c:2…

Blender_查看版本

Blender_查看版本 烦人的烦恼&#xff0c;没找见哪儿可以查看版本&#xff1f; 算是个隐蔽的角落&#xff01;

华清作业day56

SQLite特性&#xff1a; 零配置一无需安装和管理配置&#xff1b;储存在单一磁盘文件中的一个完整的数据库&#xff1b;数据库文件可以在不同字节顺序的机器间自由共享&#xff1b;支持数据库大小至2TB&#xff1b;足够小&#xff0c;全部源码大致3万行c代码&#xff0c;250KB…

09 AB 10串口通信发送原理

通用异步收发传输器&#xff08; Universal Asynchronous Receiver/Transmitter&#xff0c; UART&#xff09;是一种异步收发传输器&#xff0c;其在数据发送时将并行数据转换成串行数据来传输&#xff0c; 在数据接收时将接收到的串行数据转换成并行数据&#xff0c; 可以实现…

休斯顿NASA太空机器人进入最后测试阶段,或可模拟人类执行外星任务!

美国宇航局开发研制的太空智能机器人目前正在德州休斯顿的约翰逊航天中心接受最后的运行测试&#xff0c;距离太空智能化时代又要更进一步了&#xff01; NASA表示&#xff0c;日前在德州休斯顿附近的约翰逊航天中心进行测试的机器人名为Valkyrie&#xff0c;是以北欧神话中的一…

机器学习9-随机森林

随机森林&#xff08;Random Forest&#xff09;是一种集成学习方法&#xff0c;用于改善单一决策树的性能&#xff0c;通过在数据集上构建多个决策树并组合它们的预测结果。它属于一种被称为“集成学习”或“集成学习器”的机器学习范畴。 以下是随机森林的主要特点和原理&…