深入理解Flutter鸿蒙next版本 中的Widget继承:使用extends获取数据与父类约束

简介: 本文详细介绍了Flutter中如何通过继承其他Widget来创建自定义组件。首先解释了Widget继承的基本概念,包括StatelessWidget和StatefulWidget的区别。接着通过具体示例展示了如何继承StatelessWidget和StatefulWidget,并在子类中访问父类的build方法和状态。最后,结合多个自定义Widget展示了如何在实际应用中灵活使用继承和组合来构建复杂的UI。

写在前面
在Flutter中,Widget是构建用户界面的基本构件。通过组合和继承Widget,我们可以创建出复杂的UI。本文将详细探讨如何在Flutter中使用extends来继承其他Widget,并在子类中访问父类的build方法以获取数据和约束规范。

什么是Widget继承?
在Flutter中,继承是对象导向编程中的一个重要概念,它允许我们创建一个新的类,该类是一个现有类的子类。通过继承,我们可以重用代码,扩展现有类的功能,并定制其行为。

当我们定义一个新的Widget类时,通常会继承自Flutter框架中现有的Widget类,比如StatelessWidget或StatefulWidget。这样,我们就可以利用父类的功能,并在此基础上进行扩展。

基本概念
StatelessWidget与StatefulWidget
StatelessWidget:表示一个不需要维护状态的Widget。它的build方法在构建时只依赖于传入的参数。
StatefulWidget:表示一个可以维护状态的Widget。它的状态由State类管理,并在状态改变时重新构建UI。
build方法
build方法是一个关键点,它定义了如何根据输入数据构建UI。通过重写这个方法,我们可以自定义Widget的显示方式。

创建自定义Widget

  1. 继承StatelessWidget
    首先,我们来看一个简单的示例,展示如何通过继承StatelessWidget来创建一个自定义Widget:

import 'package:flutter/material.dart';

class CustomText extends StatelessWidget {
final String text;

CustomText(this.text);

@override
Widget build(BuildContext context) {
return Text(
text,
style: TextStyle(fontSize: 20, color: Colors.blue),
);
}
}
在这个示例中,CustomText类继承自StatelessWidget,并重写了build方法。它接受一个字符串参数,并将其显示为蓝色文本。

  1. 继承StatefulWidget并访问父类的约束
    接下来,我们将创建一个更复杂的Widget,继承自StatefulWidget,并访问父类的约束与状态。我们将使用一个计数器示例,演示如何在子类中获取和使用父类数据。

import 'package:flutter/material.dart';

class CounterWidget extends StatefulWidget {
@override
_CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State {
int _count = 0;

void _increment() {
setState(() {
_count++;
});
}

@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Count: $_count'),
ElevatedButton(
onPressed: _increment,
child: Text('Increment'),
),
],
);
}
}

在上面的代码中,CounterWidget是一个可以维护状态的Widget, _CounterWidgetState类负责管理状态和构建UI。在build方法中,我们通过_count变量显示当前计数,并使用一个按钮来增加计数。

  1. 继承其他自定义Widget并获取数据
    我们可以进一步扩展,将CustomText Widget与CounterWidget结合起来,以显示计数值。以下是一个示例:

class DisplayCounter extends StatelessWidget {
final int count;

DisplayCounter(this.count);

@override
Widget build(BuildContext context) {
return CustomText('Current count: $count');
}
}

class CounterWidget extends StatefulWidget {
@override
_CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State {
int _count = 0;

void _increment() {
setState(() {
_count++;
});
}

@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
DisplayCounter(_count),
ElevatedButton(
onPressed: _increment,
child: Text('Increment'),
),
],
);
}
}

在这个例子中,DisplayCounter类被用来显示当前的计数值。它通过构造函数接收计数值,并在build方法中调用CustomText来显示该值。

写在最后
通过继承Widget,我们可以轻松创建自定义的Flutter组件,并在子类中访问父类的属性和方法。这种方式不仅促进了代码重用,还提高了我们的应用程序结构化和模块化程度。

在实际应用中,使用继承和组合是构建复杂UI的常见策略。希望通过本篇文章,您能够更深入地理解Flutter中Widget的继承和构建机制,并在项目中灵活应用。
————————————————

                        版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
AI 代码解读

原文链接:https://blog.csdn.net/lbcyllqj/article/details/143030882

目录
打赏
0
8
8
0
99
分享
相关文章
【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画(ohos.animator)书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画(ohos.animator)书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
45 5
【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画(ohos.animator)书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
HarmonyOS NEXT开发-ArkUI六
本文介绍了颜色渐变(线性渐变和径向渐变)与阴影效果的应用,通过具体代码示例展示了如何在组件中实现这些视觉效果,帮助开发者提升界面美观度。君志所向,一往无前,欢迎一起探索! 简介字数:239
13 0
HarmonyOS NEXT开发-ArkUI六
HarmonyOS NEXT开发-ArkUI八
本文介绍了Harmony OS开发中的线性布局技巧,包括交叉轴对齐、自适应缩放及综合实践案例,帮助开发者轻松掌握相关技能。每天学习一个知识点,一起加油!
14 0
HarmonyOS NEXT开发-ArkUI八
HarmonyOS NEXT开发-ArkUI十二
网格布局(Grid)适用于由多行列组成的复杂界面,支持固定行列、合并单元格及滚动效果。其应用场景广泛,如文件管理、购物列表等。通过设置`columnsTemplate`和`rowsTemplate`可定义行列比例,使用`GridItem`组件实现内容展示。此外,还能通过自定义滚动条优化用户体验。代码示例展示了如何创建固定行列、合并单元格以及实现滚动效果的网格布局。 关注程序员Feri,了解更多实用技术与搞钱技巧,一起在编程道路上不断前行!
16 0
HarmonyOS NEXT开发-ArkUI十二
HarmonyOS NEXT开发-ArkUI十一
本文介绍Swiper组件,它用于滑动轮播显示,支持自动播放、纵向滑动、自定义导航点等特性。通过设置尺寸、内容及属性,可实现丰富的轮播效果。示例代码展示了基本用法和综合实践,帮助开发者快速上手。
21 0
HarmonyOS NEXT开发-ArkUI十一
HarmonyOS NEXT开发-ArkUI十
本文介绍了布局实践、定位(绝对与相对)、通用属性(多态样式和动画)及图形变换(平移、缩放、旋转),帮助开发者掌握前端布局技巧和交互效果优化。君志所向,一往无前!
25 0
HarmonyOS NEXT开发-ArkUI十
HarmonyOS NEXT开发-ArkUI九
本文介绍了弹性布局(Flex)、商品列表展示及层叠布局(StackLayout)的基本概念与实际应用,通过代码示例详细讲解了这些布局方式的使用方法和效果。希望在搞钱的路上有你相伴!君志所向,一往无前!
HarmonyOS NEXT开发-ArkUI九
|
2月前
flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
23 1
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
163 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
123 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈

热门文章

最新文章

  • 1
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
    17
  • 2
    APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
    11
  • 3
    EMAS 性能分析全面适配HarmonyOS NEXT,开启原生应用性能优化新纪元
    6
  • 4
    鸿蒙开发:了解@Builder装饰器
    3
  • 5
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
    7
  • 6
    【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画(ohos.animator)书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
    45
  • 7
    HarmonyOS使用系统图标
    15
  • 8
    鸿蒙原生应用再添新丁!北京广电、充电管家、有我帮 入局鸿蒙
    1
  • 9
    【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
    7
  • 10
    【02】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-准备工具安装-编译器DevEco Studio安装-arkts编程语言认识-编译器devco-鸿蒙SDK安装-模拟器环境调试-hyper虚拟化开启-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
    7