Flutter组件 StatefulWidget、StatelessWidget 可继承写法

已于 2024-02-02 20:58:06 修改
阅读量1.3k 收藏 7
点赞数 4
分类专栏： Flutter 文章标签： flutter
于 2024-02-02 20:49:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lan_Se_Tian_Ma/article/details/136000212
版权

前言

学过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});

  @override
  State<BaseStatefulWidget> createState() => BaseStatefulWidgetState();
}

class BaseStatefulWidgetState<T extends StatefulWidget> extends State<BaseStatefulWidget> {

  @override
  Widget 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});

  @override
  ParentBoxState<ParentBox> createState() => ParentBoxState();
}

class ParentBoxState<T extends ParentBox> extends BaseStatefulWidgetState<ParentBox> {

  @override
  Widget 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});

  @override
  ChildBoxState<ChildBox> createState() => ChildBoxState();
}

class ChildBoxState<T extends ChildBox> extends ParentBoxState<ChildBox> {

  @override
  content() {
    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});

  @override
  ChildBoxState<ChildBox> createState() => PosterityBoxState();
}

class PosterityBoxState<T extends PosterityBox> extends ChildBoxState<PosterityBox> {

  @override
  content() {
    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});

  @override
  Widget 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});

  @override
  Widget 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});

  @override
  content() {
    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});

  @override
  content() {
    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});

  @override
  State<TestStatefulWidget> createState() => _TestStatefulWidgetState();
}

class _TestStatefulWidgetState extends State<TestStatefulWidget> {

  @override
  Widget 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});

  @override
  State<TestStatelessWidget> createState() => _TestStatelessWidgetState();
}

class _TestStatelessWidgetState extends State<TestStatelessWidget> {

  @override
  Widget 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});

  @override
  Widget 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;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget 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 可继承写法

韩老九
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter中的widget
m0_54861402的博客
12-14 2736
StatelessWidget和 StatefulWidget是 flutter的基础组件，日常开发中自定义 Widget都是选择继承这两者之一。也是在往后的开放中，我们最多接触的Widget： StatelessWidget：无状态的，展示信息，面向那些始终不变的UI控件； StatefulWidget：有状态的，可以通过改变状态使得 UI 发生变化，可以包含用户交互(比如弹出一个 dialog)。 在实际使用中，Stateless与Stateful的选择需要取决于这个 Widget 是有状态还是无状态，
flutter 继承statefulwidget方法。
chuweichen3247的博客
03-11 2198
2019年03月11 日 一个State对象，statefulWidget它可以是一个方法跨帧存储状态数据并恢复它。statefulwidget 继承的是widget 的方法。 1、如何使用StatelessWidget 相当于Text，Text Widget是stateful...
继承StatefulWidget组件模板，一键自动生成
少年
01-05 622
class MyWidget extends StatefulWidget { @override State<StatefulWidget> createState() => MyWidgetState(); } class MyWidgetState extends State<MyWidget> { @override Widget build(BuildContext context) { return null; } } 在Flutte
Flutter 吐血整理组件继承关系图
老孟Flutter
04-17 1649
老孟导读：前几天一个读者和我说能不能整理一个各个控件之间的继承关系，这2天抽时间整理了一下，不整理不知道，一整理真的吓一跳啊，仅仅Widget的子类（包括间接子类）就高达353个，今天发群里给大家浏览的时候，有人说：“看见这个，会让初学者从入门到放弃的“，其实不必担心，虽然很多，但常用的就那几十个，很快就入门了，剩余其他的用到的时候在查就好了。 Widget 先看Widget的直接子类，仅仅...
10.Flutter学习之StatefulWidget有状态组件、页面绑定数据、改变数据
易帜¤的博客
02-29 1536
StatelessWidget StatelessWidget：无状态的widget，适用于我们描述用户界面不依赖对象中的配置信息时。例如：使用ImaegView/UIImageView来显示Logo，Logo在运行时不会改变，所以可以使用StatelessWidget StaefluWidget 如果遇到HTTP网络请求或者用户交互接受数据后动态更改UI，则必须使用StatefluWidget并...
【Flutter】StatefulWidget 组件.zip
02-28
【Flutter】StatefulWidget 组件 ( Image 组件 | TextField 组件 ) https://hanshuliang.blog.csdn.net/article/details/114192001 【Flutter】StatefulWidget 组件 ( PageView 组件 ) ...
【Flutter】StatelessWidget 组件.zip
02-26
【Flutter】StatelessWidget 组件 ( Container 组件 | BoxDecoration 组件 | Text 组件 | Icon 组件 ) https://hanshuliang.blog.csdn.net/article/details/114112643 【Flutter】StatelessWidget 组件 ( Close...
Flutter组件化开发方案
01-27
这样可以有效的将Flutter和Native进行物理隔离，但随着Flutter承载的业务越来越多，与Native交互的接口变的越来越多，带来了很多管理问题，因此我们迫切需要采用新的开发模式，本文将介绍Flutter的组件化开发方案。...
Flutter组件学习—Image
02-24
之前，我们讲了Flutter中Text组件的一些用法以及API，本节我们继续学习Flutter中的Image组件，同样先上图：在Android中，我们都知道，图片的显示方式有很多，资源图片、网络图片、文件图片等等，在Flutter中也有多种...
Flutter渲染机制(一)：Widget
Elson的博客
03-19 326
Widget 是我们构建页面UI的基本元素，如设置间距用的Padding、行排列用的Row、流式布局用的 Wrap。Widget内的所有属性都是 final 类型，它是一个配置文件，是 Element 的描述性信息。Widget 的作用类似于 Android Native 开发中的 xml 角色。
Flutter StatefulWidget 有状态组件、页面上绑定数据、改变页面数据
01-07
//导入了Material UI组件库 ,快捷操作fim import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } //自定义组件 //StatelessWidget:无状态组件，状态不可变的widget //StatefulWidget:有状态组件，状态可以改变 //fluter中一切都是组件 //使用MaterialApp和Scaffold 两个组件装饰App //MaterialApp一般作为根组件----home、title、color、theme、routes等 class MyApp ext
Flutter之StatelessWidget
一抹离愁
06-01 4434
StatelessWidget StatelessWidget 是无状态控件，没有自己的私有数据，是纯展示型的控件，基本定义过程如下： class MyMidget extends StatelessWidget { // 构造函数： // 其中的 this.title 定义的是命名参数 // @required 用来规定某个数据在初始化的时候是必须要提供的，否则会报错。 M...
跟我学flutter：细细品Widget（二）StatelessWidget&StatefulWidget
s297165331的专栏
04-25 904
StatelessWidget和StatefulWidget是Flutter开发必不可少的。两者的区别在于state。有状态的widget需要继承StatefulWidget无状态的需要继承StatelessWidget。
Flutter学习笔记_Dart：类的继承和super关键字
weixin_46136019的博客
02-04 1054
Dart中的类的继承：1、子类使用关键词来继承父类2、子类会继承父类里面可见的属性和方法 但是不会继承3、子类能复写父类的方法 getter和setter。
【Flutter】widgets (5) Flutter 理解 Flutter 的 Stateful Widget 有状态组件
Code Metaverse
06-08 626
我们从这篇文章开始学习Stateful Widget ，有状态的组件。
【Flutter】widgets (6) Stateful Widget 有状态组件的生命周期
最新发布
Code Metaverse
06-09 658
Stateful Widget 有状态组件的生命周期
Flutter基础篇（一）：StatefulWidget
NOWAY的博客
08-08 906
参考：https://zhuanlan.zhihu.com/p/83782208 StatefulWidget顾名思义，有状态的组件 用于显示一些需要实时改变的内容
flutter父子传值，StatefulWidget和StatelessWidget
菜鸟先飞
08-21 1167
flutter 父子组件传值
Flutter 学习之 statelesswidget 基础
FREE_CODER
02-04 227
flutter widget 基础
flutter statefulwidget
03-16
Flutter中的StatefulWidget是一种可变的小部件，它可以在运行时改变其状态。它包含两个类：StatefulWidget和State。StatefulWidget类是一个抽象类，它定义了一个具有可变状态的小部件。State类是一个具体类，它实现了StatefulWidget类的状态。当StatefulWidget的状态发生变化时，Flutter会自动调用StatefulWidget的build方法来重新构建小部件。这使得开发人员可以根据用户的交互动作来更新小部件的状态，从而实现动态的用户界面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值