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

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

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 5
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
  • 6
    零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
  • 7
    flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 9
    【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 10
    flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
  • 1
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    28
  • 2
    零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
    59
  • 3
    flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
    42
  • 4
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    144
  • 5
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    38
  • 6
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
    73
  • 7
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    124
  • 8
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    75
  • 9
    flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
    18
  • 10
    【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    29