flutter 小部件知多少?

简介: 了解小部件Flutter 应用程序的几乎每个元素都是一个小部件。小部件被设计为不可变的或不可更改的,因为使用不可变的小部件有助于保持应用程序 UI 的轻量级。您可以将小部件想象成可以说明 UI 外观的蓝图。不同的外观需要不同的蓝图。

了解小部件

Flutter 应用程序的几乎每个元素都是一个小部件。小部件被设计为不可变的不可更改的,因为使用不可变的小部件有助于保持应用程序 UI 的轻量级。您可以将小部件想象成可以说明 UI 外观的蓝图。不同的外观需要不同的蓝图。


您将使用两种基本类型的小部件:


  • Stateless:仅依赖于它们自己的配置信息的小部件,例如图像视图中的静态图像。
  • Stateful:需要维护动态信息的小部件。它们通过与 State 对象交互来实现。


每当 Flutter 框架告诉它们时,无状态和有状态小部件都会重绘。不同之处在于有状态小部件将它们的配置委托给一个State对象。

创建小部件

要制作自己的小部件,请转到 main.dart 的底部并开始输入 stful,这是“stateful”的缩写。这将为您提供类似于以下内容的弹出窗口:


image.png


回车键选择第一个选项。


VS Code 将帮助您使用多个游标填写名称。写 JGFlutter


import 'package:flutter/material.dart';
class JGFlutter extends StatefulWidget {  JGFlutter({Key? key}) : super(key: key);
  @override  _JGFlutterState createState() => _JGFlutterState();}
class _JGFlutterState extends State<JGFlutter> {  @override  Widget build(BuildContext context) {    return Container();  }}

复制代码


这里有一些注意事项:


  • 您已经创建了一个StatefulWidget名为JGFlutter.
  • 您正在重写createState以创建有状态小部件的状态对象。
  • _JGFlutterState是状态类的名称。前面的下划线_JGFlutterState表示这个类是文件私有的。它不能导入到其他文件中。
  • build是您构建小部件的主要位置。Container默认情况下,此当前返回空值。接下来你会用别的东西换掉它。


将整个build方法替换_JGFlutterState为以下内容:


注意const您有时会在小部件和变量前面看到的关键字表示编译时常量。添加 并不总是可能或必要const,但这样做可以让 Flutter 进行一些优化。

相关文章
|
容器
[flutter专题]详解AppBar小部件
AppBar 应用栏是各种应用程序中最常用的组件之一。它可用于容纳搜索字段、以及在页面之间导航的按钮,或者只是页面标题。由于它是一个如此常用的组件,因此 Flutter 为该功能提供了一个名为AppBar的专用小部件。
514 0
[flutter专题]详解AppBar小部件
|
前端开发 Android开发 iOS开发
Day07 - Flutter 小部件的布局
Day07 - Flutter 小部件的布局
108 0
Day07 - Flutter 小部件的布局
|
C++ 容器
flutter小部件知多少?
Flutter 应用程序的几乎每个元素都是一个小部件。小部件被设计为不可变的或不可更改的,因为使用不可变的小部件有助于保持应用程序 UI 的轻量级。您可以将小部件想象成可以说明 UI 外观的蓝图。不同的外观需要不同的蓝图。
109 0
|
移动开发
Flutter 无状态小部件中启动时调用函数
本文主要介绍如何在 Flutter 无状态小部件中启动时调用函数 有没有想过如何从无状态小部件在 Flutter 启动时调用异步函数? 移动开发中最常见的场景之一是在显示新视图时调用异步函数。在 Flutter 中,这可以使用有状态的小部件并在initState函数中调用您的代码来完成。
188 0
flutter创建可移动的stack小部件
本文主要介绍我为桌面和 Web 设计的一个超级秘密 Flutter 项目使用了画布和可拖动节点界面。本教程将展示我如何使用堆栈来使用小部件完成可拖动功能
111 0
flutter创建可移动的stack小部件
Flutter 应用程序中使用 GridTile 小部件
本文将带您了解在 Flutter 应用程序中使用 GridTile 小部件的几个示例 GridTile 可以帮助我们快速轻松地创建具有丰富内容(文本、图像和图标的组合)的磁贴。此小部件通常与 GridView 小部件一起使用,但它可以用作独立组件。
201 0
Flutter 应用程序中使用 GridTile 小部件
|
存储 Dart 前端开发
Flutter 中的一切都是一个小部件【Flutter 专题 5】
在本节中,我们将学习小部件的概念、如何创建它以及它们在 Flutter 框架中可用的不同类型。我们之前已经了解到 Flutter 中的一切都是一个小部件。 如果你熟悉 React 或 Vue.js,那么很容易理解 Flutter。
185 0
Flutter 中的一切都是一个小部件【Flutter 专题 5】
|
1天前
|
缓存 监控 前端开发
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
【4月更文挑战第30天】本文探讨了Flutter应用启动优化策略,包括理解启动过程、资源加载优化、减少初始化工作、界面布局简化、异步初始化、预加载关键数据、性能监控分析以及案例和未来优化方向。通过这些方法,可以缩短启动时间,提升用户体验。使用Flutter DevTools等工具可助于识别和解决性能瓶颈,实现持续优化。
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
|
1天前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
|
1天前
|
Dart 前端开发 测试技术
【Flutter前端技术开发专栏】Flutter开发中的代码质量与重构实践
【4月更文挑战第30天】随着Flutter在跨平台开发的普及,保证代码质量成为开发者关注的重点。优质代码能确保应用性能与稳定性,提高开发效率。关键策略包括遵循最佳实践,编写可读性强的代码,实施代码审查和自动化测试。重构实践在项目扩展时尤为重要,适时重构能优化结构,降低维护成本。开发者应重视代码质量和重构,以促进项目成功。
【Flutter前端技术开发专栏】Flutter开发中的代码质量与重构实践

热门文章

最新文章