【Flutter】基础入门:Widgets

在 Flutter 中,Widget 是应用程序构建块的基础。几乎所有的对象都是一个 Widget,不论是显示在屏幕上的 UI 元素,还是一些功能性组件(例如用于手势检测的 GestureDetector,或用于传递应用主题数据的 Theme),它们都是 Widget。与原生开发中“控件”仅指 UI 元素不同,Flutter 的 Widget 概念更加广泛,它涵盖了界面显示、布局、手势检测、状态管理等多个层面。本文将深入讲解 Flutter 中的 Widget,帮助你从概念到实践掌握它们。

什么是 Widget

Widget 是 Flutter 应用的核心概念。万物皆 Widget,这是开发 Flutter 时需要牢记的一点。无论是屏幕上展示的文字、图片、按钮,还是布局的容器、手势检测器,甚至主题和动画控制,它们都以 Widget 的形式存在。你可以将 Widget 理解为 UI 元素的描述或一个函数,在输入某些参数时返回一个特定的用户界面。

Flutter 中的 Widget 分类

Flutter 中的 Widget 大体上可以分为两类:

  1. 有状态的 Widget (StatefulWidget)
  2. 无状态的 Widget (StatelessWidget)

无状态的 Widget (StatelessWidget)

StatelessWidget 是静态的,它们在生命周期中不发生变化。简单的文本、图标和图片等不需要交互的组件通常是无状态的。

示例:

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {Widget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('StatelessWidget Example')),body: Center(child: Text('Hello, Flutter!')),),);}
}

在上面的代码中,MyApp 是一个 StatelessWidget,它只需要简单地显示一行文字。

有状态的 Widget (StatefulWidget)

StatefulWidget 可以管理和更新状态。它们能够根据用户的交互或内部事件(如计时器或动画)来动态更新界面。每个 StatefulWidget 都有一个对应的 State 对象,负责管理 Widget 的状态。

示例:

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatefulWidget {_MyAppState createState() => _MyAppState();
}class _MyAppState extends State<MyApp> {int _counter = 0;void _incrementCounter() {setState(() {_counter++;});}Widget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('StatefulWidget Example')),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text('You have pressed the button this many times:'),Text('$_counter', style: Theme.of(context).textTheme.headline4),],),),floatingActionButton: FloatingActionButton(onPressed: _incrementCounter,tooltip: 'Increment',child: Icon(Icons.add),),),);}
}

在这个例子中,点击按钮会触发 _incrementCounter 函数,更新 State 中的计数器值,随后通过 setState() 通知 Flutter 重新构建 UI 以反映最新的状态。

常见的基础 Widget

文本 Widget (Text)

Text 是用于显示简单文本的 Widget。它可以通过 style 属性自定义文字的字体、颜色和大小。

示例:

Text('Hello, Flutter!',style: TextStyle(fontSize: 24, color: Colors.blue),
)

图片 Widget (Image)

Image 用于加载和显示图片。它支持多种方式加载图片,如网络图片、文件图片、资源图片等。

示例:

Image.network('https://example.com/sample-image.jpg')

图标 Widget (Icon)

Icon 是用于显示图标的 Widget,Flutter 提供了丰富的内置图标库,如 Material Icons。

示例:

Icon(Icons.favorite, color: Colors.red, size: 40)

容器 Widget (Container)

Container 是最常用的布局 Widget,它可以包含子组件,并支持设置大小、边距、填充、对齐方式等。

示例:

Container(padding: EdgeInsets.all(10),margin: EdgeInsets.all(20),color: Colors.blue,child: Text('Container example'),
)

列 Widget (Column) 与 行 Widget (Row)

ColumnRow 是用于垂直和水平排列子组件的 Widget。它们常用于构建基本的布局。

示例:

Column(children: <Widget>[Text('Item 1'),Text('Item 2'),Text('Item 3'),],
)

按钮 Widget (ElevatedButton)

按钮是常见的交互元素,Flutter 提供了多种按钮组件,如 ElevatedButtonTextButtonIconButton

示例:

ElevatedButton(onPressed: () {},child: Text('Click Me'),
)

布局 Widgets

Flutter 提供了丰富的布局 Widgets,帮助开发者构建灵活且强大的 UI 布局。

Padding

Padding 用于给组件增加内边距。

示例:

Padding(padding: EdgeInsets.all(16.0),child: Text('Padded Text'),
)

Center

Center 将子 Widget 居中显示。

示例:

Center(child: Text('Centered Text'),
)

Stack

Stack 是一个叠加布局 Widget,允许将多个 Widget 叠加显示。常用于实现浮动按钮或重叠布局。

示例:

Stack(children: <Widget>[Container(color: Colors.blue, width: 200, height: 200),Positioned(left: 50,top: 50,child: Text('Stacked Text'),),],
)

Expanded

Expanded 用于在 RowColumn 中扩展子组件,分配剩余的空间。

示例:

Row(children: <Widget>[Expanded(child: Container(color: Colors.red)),Expanded(child: Container(color: Colors.green)),],
)

Widget 的生命周期

StatefulWidget 中,Widget 的生命周期主要有以下几个阶段:

  • createState():创建状态对象,这个对象会保持 Widget 的状态。
  • initState():初始化状态,只调用一次。
  • build():构建 Widget 的 UI,每次状态改变时都会调用。
  • setState():当需要更新 UI 时调用此方法。
  • dispose():当 Widget 被销毁时调用,用于清理资源。

总结

在 Flutter 中,Widget 是应用程序构建的核心,涵盖了所有的 UI 组件、布局和功能模块。无论是无状态还是有状态的 Widget,都通过嵌套和组合的方式来构建复杂的用户界面。掌握基础的 Widget,如 TextImageIcon,以及常用的布局 Widget,如 ColumnRowPaddingExpanded,是学习 Flutter 的基础。通过理解 Widget 的使用方式和它们的生命周期,开发者能够灵活构建高效、可维护的应用。

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

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

相关文章

TCP simultaneous open测试

源代码 /*************************************************************************> File Name: common.h> Author: hsz> Brief:> Created Time: 2024年10月23日 星期三 09时47分51秒**********************************************************************…

转录组上游分析流程(三)

环境部署——数据下载——查看数据(非质控)——数据质控——数据过滤(过滤低质量数据) 测序得到的原始序列含有接头序列和低质量序列&#xff0c;为了保证信息分析的准确性&#xff0c;需要对原始数据进行质量控制&#xff0c;得到高质量序列(Clean Reads)&#xff0c;原始序列…

Linux系统块存储子系统分析记录

1 Linux存储栈 通过网址Linux Storage Stack Diagram - Thomas-Krenn-Wiki-en&#xff0c;可以获取多个linux内核版本下的存储栈概略图&#xff0c;下面是kernel-4.0的存储栈概略图&#xff1a; 2 存储接口、传输速度 和 协议 2.1 硬盘 《深入浅出SSD&#xff1a;固态存储核心…

(二十三)Java反射

1.反射概念 反射允许对成员变量&#xff0c;成员方法和构造方法的信息进行编程访问&#xff0c;通俗理解就是允许从类里面拿东西&#xff0c;用途有提示词等&#xff0c;如下所示都是通过反射实现的 所以&#xff0c;学习反射就是学习从字节码class文件中获取成员信息并且对其…

AndroidAppWidget相关

特殊情况记录 OPPO FIND N Android14 当桌面已经存在AppWidget实例&#xff0c;如果应用处于杀死状态下&#xff0c;此时再创建相同的AppWidget实例不会触发AppWidget的更新。 创建不同的AppWidget对应的实例时才会一下子触发多个AppWidget示例的更新。

stable diffusion WEBUI Brief summary

1&#xff0c;rembg(去除背景-》蒙版) import rembg from PIL import Image, ImageOps import numpy as np# 打开图像 input_path "./p_6258838.jpg" input_image Image.open(input_path)# 移除背景&#xff0c;得到带有透明背景的图像 output_image rembg.remove…

Markdown语法详解及常见的使用场景

Markdown语法详解 Markdown概念一、标题二、段落三、字体样式四、列表五、链接和图片六、代码八、分隔线九、引用十、删除线和下划线十一、脚注十二、任务列表十三、高级技巧十四、目录生成 Markdown的应用场景 Markdown概念 Markdown是一种轻量级标记语言&#xff0c;以其简洁…

利用大模型进行复杂决策制定:PlanRAG技术的研究

人工智能咨询培训老师叶梓 转载标明出处 有效的决策制定对于组织的成功至关重要。传统的决策支持系统虽然在数据分析和决策辅助方面取得了一定的进展&#xff0c;但在处理需要复杂数据分析的决策问题时仍显不足。为了解决这一问题&#xff0c;来自韩国高等科学技术院&#xff…

fpga系列 HDL: 竞争和冒险 01

卡诺图是一种逻辑化简工具&#xff0c;用来在布尔函数的最小项和形式中&#xff0c;找到冗余项并实现逻辑化简。也可用于HDL中竞争和冒险的判断。 最小项 任何一个逻辑函数都能化简为最小项的和的形式对于 n 个变量的布尔表达式&#xff0c;每个变量都必须以原变量&#xff0…

JVM的内存模型是什么,每个区域的作用是什么,以及面试题(含答案)

JVM&#xff08;Java 虚拟机&#xff09;内存模型定义了 Java 程序在运行时如何分配、管理和优化内存。JVM 内存模型主要分为几个关键区域&#xff0c;每个区域有特定的作用&#xff1a; JVM 内存模型 堆内存&#xff08;Heap&#xff09;&#xff1a; 作用&#xff1a;用于存…

VS2022搭建FFMPEG + Opencv开发环境 + 如何打包项目让程序也能独立跑在其他人的电脑上?

VS2022搭建FFMPEG Opencv开发环境 如何打包项目让程序也能独立跑在其他人的电脑上&#xff1f; 前言 本文的名字应该是我所写过的博客当中最长的&#xff0c;但内容以精简且保证实用为原则&#xff01; 正文 首先是ffmpeg 环境搭建流程如下&#xff1a; 在网上下载已经被…

Zabbix企业级分布式监控环境部署

“运筹帷幄之中&#xff0c;决胜千里之外”。在IT运维中&#xff0c;监控占据着重要的地位&#xff0c;按比例来算&#xff0c;说占30%一点也不为过。对IT运维工程师来说&#xff0c;构建一个真正可用的监控告警系统是一项艰巨的任务。在监控系统的开源软件中&#xff0c;可供选…

山东科技大学 PTA (数据结构)7-5 银行业务队列简单模拟

设某银行有A、B两个业务窗口&#xff0c;且处理业务的速度不一样&#xff0c;其中A窗口处理速度是B窗口的2倍 —— 即当A窗口每处理完2个顾客时&#xff0c;B窗口处理完1个顾客。给定到达银行的顾客序列&#xff0c;请按业务完成的顺序输出顾客序列。假定不考虑顾客先后到达的时…

基于模型划分的云边协同推理算法

摘要 在网络状态和任务需求的动态变化下&#xff0c;为减少模型推理时延和计算成本&#xff0c;在软件定义网络( Software Defined Network&#xff0c;SDN) 中提出了一种基于模型划分的云边协同推理算法。通过构建复杂度预测器分配任务执行环境&#xff0c;采用深度Q网络(Dee…

国产标准数字隔离器的未来---克里雅半导体

标准数字隔离器是电信号隔离技术的重要组成部分&#xff0c;近年来取得了重大进展。随着工业自动化、汽车电子和电信等行业对更高性能的需求不断增长&#xff0c;国内数字隔离器制造商正在稳步赶上全球标准。本文讨论了数字隔离器技术的新兴趋势、材料创新的影响&#xff0c;以…

网站建设中需要注意哪些安全问题?----雷池社区版

服务器与应用安全指南 1. 服务器安全 1.1 操作系统安全 及时更新补丁&#xff1a;确保操作系统始终安装最新补丁&#xff0c;以防范系统漏洞。例如&#xff0c;Windows Server 定期推送安全更新&#xff0c;修复如远程代码执行等潜在威胁。优化系统服务配置&#xff1a;关闭不…

一家医药企业终止,收入依赖阿里健康,学术推广费快赶上净利润

知原药业终止原因如下&#xff1a;知原药业报告期三年的推广费用超3亿元&#xff0c;快赶上这三年累计3.68亿元的净利润了&#xff0c;交易所质疑其学术推广费单价合理性、是否存在销售返利。并且&#xff0c;公司研发费用率低于行业平均水平&#xff0c;在电商平台营销主要依赖…

pytorh学习笔记——cifar10(三)模仿VGGNet创建卷积网络

VGG16是由牛津大学视觉几何组&#xff08;Visual Geometry Group&#xff09;提出的一种深度卷积神经网络模型。 VGGNet 探索了卷积神经网络的深度与其性能之间的关系&#xff0c;成功地构筑了 16~19 层深的卷积神经网络&#xff0c;同时拓展性又很强&#xff0c;迁移到其它图片…

【LeetCode】11.盛最多水的容器

思路&#xff1a; 利用双指针法进行移动&#xff0c;一个在头一个在尾&#xff0c;此时宽度最宽&#xff0c;当宽度缩小时&#xff0c;高度发生变化&#xff0c;从而可以找到最大值。 代码&#xff1a; int maxArea(int* height, int heightSize) {int* left height;int* …

仿真学习 | Fluent版本迭代一览及选择指南

在计算机辅助工程&#xff08;CAE&#xff09;领域&#xff0c;软件版本的更新迭代&#xff0c;影响了工程师的工作效率、工作习惯和仿真精度&#xff0c;“如何选择软件版本”也永远是摆在每个初学者面前的第一个难题。 计算流体动力学&#xff08;CFD&#xff09;领域的领军…