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 进行一些优化。

相关文章
|
5月前
|
Dart 开发者
Flutter 中的 RenderObjectToWidgetAdapter 小部件:全面指南
Flutter 中的 RenderObjectToWidgetAdapter 小部件:全面指南
29 2
|
5月前
|
开发者
Flutter 中的 ChipTheme 小部件:全面指南
Flutter 中的 ChipTheme 小部件:全面指南
53 3
|
6月前
|
编解码 开发工具 开发者
Flutter 中的 WidgetInspector 小部件:全面指南
但它主要用于调试目的,在生产环境中应该谨慎使用。
50 2
|
容器
[flutter专题]详解AppBar小部件
AppBar 应用栏是各种应用程序中最常用的组件之一。它可用于容纳搜索字段、以及在页面之间导航的按钮,或者只是页面标题。由于它是一个如此常用的组件,因此 Flutter 为该功能提供了一个名为AppBar的专用小部件。
596 0
[flutter专题]详解AppBar小部件
|
前端开发 Android开发 iOS开发
Day07 - Flutter 小部件的布局
Day07 - Flutter 小部件的布局
140 0
Day07 - Flutter 小部件的布局
|
C++ 容器
flutter小部件知多少?
Flutter 应用程序的几乎每个元素都是一个小部件。小部件被设计为不可变的或不可更改的,因为使用不可变的小部件有助于保持应用程序 UI 的轻量级。您可以将小部件想象成可以说明 UI 外观的蓝图。不同的外观需要不同的蓝图。
131 0
flutter创建可移动的stack小部件
本文主要介绍我为桌面和 Web 设计的一个超级秘密 Flutter 项目使用了画布和可拖动节点界面。本教程将展示我如何使用堆栈来使用小部件完成可拖动功能
127 0
flutter创建可移动的stack小部件
Flutter 应用程序中使用 GridTile 小部件
本文将带您了解在 Flutter 应用程序中使用 GridTile 小部件的几个示例 GridTile 可以帮助我们快速轻松地创建具有丰富内容(文本、图像和图标的组合)的磁贴。此小部件通常与 GridView 小部件一起使用,但它可以用作独立组件。
255 0
Flutter 应用程序中使用 GridTile 小部件
|
存储 Dart 前端开发
Flutter 中的一切都是一个小部件【Flutter 专题 5】
在本节中,我们将学习小部件的概念、如何创建它以及它们在 Flutter 框架中可用的不同类型。我们之前已经了解到 Flutter 中的一切都是一个小部件。 如果你熟悉 React 或 Vue.js,那么很容易理解 Flutter。
216 0
Flutter 中的一切都是一个小部件【Flutter 专题 5】
|
移动开发
Flutter 无状态小部件中启动时调用函数
本文主要介绍如何在 Flutter 无状态小部件中启动时调用函数 有没有想过如何从无状态小部件在 Flutter 启动时调用异步函数? 移动开发中最常见的场景之一是在显示新视图时调用异步函数。在 Flutter 中,这可以使用有状态的小部件并在initState函数中调用您的代码来完成。
215 0