深入理解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 版权协议,转载请附上原文出处链接和本声明。

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

目录
相关文章
|
18天前
|
安全 数据安全/隐私保护 Android开发
HarmonyOS 5.0 Next实战应用开发—‘我的家乡’【HarmonyOS Next华为公司完全自研的操作系统】
HarmonyOS NEXT是华为自研的鸿蒙操作系统的重要版本更新,标志着鸿蒙系统首次完全脱离Linux内核及安卓开放源代码项目(AOSP),仅支持鸿蒙内核和鸿蒙系统的应用。该版本引入了“和谐美学”设计理念,通过先进的物理渲染引擎还原真实世界的光影色彩,为用户带来沉浸式体验。应用图标设计融合国画理念,采用留白和实时模糊技术展现中式美学。 HarmonyOS NEXT强化了设备间的协同能力,支持无缝切换任务,如在手机、平板或电脑间继续阅读文章或编辑文件。系统注重数据安全和隐私保护,提供数据加密和隐私权限管理功能。此外,它利用分布式技术实现跨设备资源共
93 15
HarmonyOS 5.0 Next实战应用开发—‘我的家乡’【HarmonyOS Next华为公司完全自研的操作系统】
|
18天前
|
存储 JavaScript 开发工具
基于HarmonyOS 5.0(NEXT)与SpringCloud架构的跨平台应用开发与服务集成研究【实战】
本次的.HarmonyOS Next ,ArkTS语言,HarmonyOS的元服务和DevEco Studio 开发工具,为开发者提供了构建现代化、轻量化、高性能应用的便捷方式。这些技术和工具将帮助开发者更好地适应未来的智能设备和服务提供方式。
48 8
基于HarmonyOS 5.0(NEXT)与SpringCloud架构的跨平台应用开发与服务集成研究【实战】
|
8天前
|
存储 JSON 区块链
【HarmonyOS NEXT开发——ArkTS语言】购物商城的实现【合集】
HarmonyOS应用开发使用@Component装饰器将Home结构体标记为一个组件,意味着它可以在界面构建中被当作一个独立的UI单元来使用,并且按照其内部定义的build方法来渲染具体的界面内容。txt:string定义了一个名为Data的接口,用于规范表示产品数据的结构。src:类型为,推测是用于引用资源(可能是图片资源等)的一种特定类型,用于指定产品对应的图片资源。txt:字符串类型,用于存放产品的文字描述,比如产品名称等相关信息。price:数值类型,用于表示产品的价格信息。
31 5
|
8天前
|
开发工具 开发者 容器
【HarmonyOS NEXT开发——ArkTS语言】欢迎界面(启动加载页)的实现【合集】
从ArkTS代码架构层面而言,@Entry指明入口、@Component助力复用、@Preview便于预览,只是初窥门径,为开发流程带来些许便利。尤其动画回调与Blank组件,细节粗糙,后续定当潜心钻研,力求精进。”,字体颜色为白色,字体大小等设置与之前类似,不过动画配置有所不同,时长为。,不过这里没有看到额外的动画效果添加到这个特定的图片元素上(与前面带动画的元素对比而言)。这是一个显示文本的视图,文本内容为“奇怪的知识”,设置了字体颜色为灰色(的结构体,它代表了整个界面组件的逻辑和视图结构。
28 1
|
21天前
|
安全 API 数据安全/隐私保护
自学记录HarmonyOS Next DRM API 13:构建安全的数字内容保护系统
在完成HarmonyOS Camera API开发后,我深入研究了数字版权管理(DRM)技术。最新DRM API 13提供了强大的工具,用于保护数字内容的安全传输和使用。通过学习该API的核心功能,如获取许可证、解密内容和管理权限,我实现了一个简单的数字视频保护系统。该系统包括初始化DRM模块、获取许可证、解密视频并播放。此外,我还配置了开发环境并实现了界面布局。未来,随着数字版权保护需求的增加,DRM技术将更加重要。如果你对这一领域感兴趣,欢迎一起探索和进步。
83 18
|
19天前
|
人工智能 自然语言处理 API
自学记录HarmonyOS Next的HMS AI API 13:语音合成与语音识别
在完成图像处理项目后,我计划研究HarmonyOS Next API 13中的AI语音技术,包括HMS AI Text-to-Speech和Speech Recognizer。这些API提供了强大的语音合成与识别功能,支持多语言、自定义语速和音调。通过这些API,我将开发一个支持语音输入与输出的“语音助手”原型应用,实现从语音指令解析到语音响应的完整流程。此项目不仅提高了应用的交互性,也为开发者提供了广阔的创新空间。未来,语音技术将在无障碍应用和智慧城市等领域展现巨大潜力。如果你也对语音技术感兴趣,不妨一起探索这个充满无限可能的领域。 (238字符)
87 11
|
21天前
|
存储 API 计算机视觉
自学记录HarmonyOS Next Image API 13:图像处理与传输的开发实践
在完成数字版权管理(DRM)项目后,我决定挑战HarmonyOS Next的图像处理功能,学习Image API和SendableImage API。这两个API支持图像加载、编辑、存储及跨设备发送共享。我计划开发一个简单的图像编辑与发送工具,实现图像裁剪、缩放及跨设备共享功能。通过研究,我深刻体会到HarmonyOS的强大设计,未来这些功能可应用于照片编辑、媒体共享等场景。如果你对图像处理感兴趣,不妨一起探索更多高级特性,共同进步。
73 11
|
3月前
|
Android开发 iOS开发 容器
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
|
2天前
|
Dart 前端开发 架构师
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
|
1天前
|
JavaScript 前端开发 Linux
flutter开发-figma交互设计图可以转换为flutter源代码-如何将设计图转换为flutter源代码-优雅草央千澈
flutter开发-figma交互设计图可以转换为flutter源代码-如何将设计图转换为flutter源代码-优雅草央千澈