Flutter第六节-----Flutter部分基础组件解析到自定义组件-云帆数科

一. 启动文件说明-runApp和WidgetrunApp函数是Flutter内部提供的一个函数启动一个Flutter应用就是从调用这个函数开始的Widget表示控件、组件、部件的含义Flutter中万物皆Widget二.Flutter的默认Material库●Material是Google公司推行的一套设计风格有很多的设计规范如颜色、文字排版、动画等。●目的Material为Android、Web、iOS、HarmonyOS多个平台提供统一的交互和视觉体验。三.基础组件-MaterialApp特性整个应用被MaterialApp包裹方便我们对整个应用的属性进行整体设计void main(ListString args) { runApp( MaterialApp( title: Flutter组件初体验, theme: ThemeData(scaffoldBackgroundColor: Colors.blue), home: Scaffold(), ), ); }常见属性title/theme/homettle:用来展示窗口的标题内容可以不设置theme:用来设置整个应用的主题home:用来展示窗口的主体内容四.基础组件-Scaffold组件●Scaffold:用于构建Material Design风格页面的核心布局组件提供标准、灵话配置的页面骨架void main(ListString args) { runApp( MaterialApp( title: Flutter组件初体验, //theme: ThemeData(scaffoldBackgroundColor: Colors.blue), home: Scaffold( appBar: AppBar( //appbar用于给Scaffold声明顶部导航栏Appbar用来构造顶部导航栏的具体样式内容 title: Text(头部区域), //title:设置标题 centerTitle: true //居中标题 ), body: Container( //给body放置一个容器 child: Center( //给这个容器放置一个布局容器center child: Text(中部区域) //给这个center容器里再放一个child组件 ) ), bottomNavigationBar: Container( //声明底部导航栏方便切换页面 height: 80, child: Center(child: Text(底部区域)), ), ), ), ); }注意一个容器里面可以放一个child不能放两个但可以在child里面再放容器容器中再放child。五.Flutter自定义组件-无状态组件和有状态组件1.无状态组件-statelessWidget●定义根据自己特定的需求创建自己的Widget●分类Flutter分为无状态组件和有状态组件示例无状态组件首先创建类利用构造函数runApp初始化我们的MainPage类继承statelessWidge把官方StatelessWidget里面已经写好的底层代码全部拿过来复用。继承之后MainPage自动获得 Widget 必备的能力然后重写buildStatelessWidget父类里规定所有子类必须实现build方法框架渲染页面时会自动调用这个方法获取你要绘制的组件。最后在MainPage类中return了一个MaterialApp。void main(ListString args) { runApp(MainPage()); } class MainPage extends StatelessWidget { override Widget build(BuildContext context) { // TODO: implement build return MaterialApp( title: Flutter组件的初体验, home: Scaffold( appBar: AppBar(title: Text(头部区域), centerTitle: true), body: Container(child: Center(child: Text(中部区域))), bottomNavigationBar: Container( height: 80, child: Center(child: Text(底部区域)), ), ), ); } }2.有状态组件-statefulWidget●定义有状态组件是构建动态交互界面的核心能够管理变化的内部状态当状态改变时组件会更新显示内容●实现1创建两个类第一个类继承Statefulwidget类主要接收和定义最终参数核心作用是创建State对象●实现2第二个类继承State第一个类名负责管理所有可变的数据和业务逻辑并实现ouild构建方法●要点build方法需要返回一个Widget●需求将之前骨架组件换成有状态组件示例void main(ListString args) { runApp(MainPage()); } class MainPage extends StatefulWidget { override StateStatefulWidget createState() { // TODO: implement createState return _MainPageState(); } } class _MainPageState extends StateMainPage { override Widget build(BuildContext context) { // TODO: implement build return MaterialApp( title: Flutter组件的初体验, home: Scaffold( appBar: AppBar(title: Text(头部区域), centerTitle: true), body: Container(child: Center(child: Text(中部区域))), bottomNavigationBar: Container( height: 80, child: Center(child: Text(底部区域)), ), ), ); } }

企业数字化 ERP 产品动态

相关推荐

使用Warp11/Warp进行S3版本控制性能测试：实战案例分析

使用Warp11/Warp进行S3版本控制性能测试：实战案例分析【免费下载链接】warp S3 benchmarking tool 项目地址: https://gitcode.com/gh_mirrors/warp11/warp Warp11/Warp是一款强大的S3基准测试工具，能够帮助用户全面评估S3存储系统在各种场景下的… · 2026/11/14 16:55:12

2026年中小微适用AI数字人供应商 TOP5 推荐：兼顾成本与服务履约稳定性

打开短视频平台，满屏都是数字人在讲产品、做直播，但真正适合微企业的方案并不多。有人花几千块买了套系统，结果功能鸡肋、售后失联、用了两个月就弃用。微企业预算有限、团队精简，选错一套系统浪费的不仅是钱，还有一两… · 2026/9/18 2:22:53

挑战一周学会ROS(第三天)

ROS中的程序实现：1、先创建一个工作空间2、再创建一个功能包3、编辑源文件4、编辑配置文件5、编译并执行例如：mkdir -p demo01_ws/src 创建一个工作空间下面带一个子目录src切换到 cd demo01_ws/catkin_make 编译创建功能包cd srccatkin_create_pkg hell… · 2026/9/20 7:51:17

电工证能查询到图片吗考前押题助你轻松过实操考试

电工证能查询到图片吗考前押题助你轻松过实操考试实操考试心里没底怕挂科？很多人在备考电工证的时候，最担心的就是考试现场的操作环节，尤其是一些关键步骤如果不熟练，就很容易出错。特别是电工证能查询到图片吗… · 2026/11/14 16:54:53

电工证登高证复审在哪考？焦作人找工作别踩坑

电工证登高证复审在哪考？焦作人找工作别踩坑急需特种作业证才能上岗找工作，很多焦作人心里都明白这一点，但面对【电工证登高证复审】这样的关键词，还是有很多人不清楚到底该去哪儿考、怎么考、考完怎么复审。这篇文章就来帮你理清楚这些问题，别再因为证… · 2026/11/14 16:54:53

怎么出租电工证考电工证实操考试心里没底怕挂科怎么办

怎么出租电工证考电工证实操考试心里没底怕挂科怎么办实操考试心里没底怕挂科，这是很多想报考电工证的朋友最真实的心声。尤其是现在，电子证书… · 2026/11/14 16:54:53

厂里的电工证被扣？2026河南最新政策这样应对

厂里的电工证被扣？2026河南最新政策这样应对证书过期了不知道怎么复审延期，这事儿在咱们河南，特别是驻马店、南阳、商丘这些工业大市，简直太常见了。电工证一旦被扣，不仅影响日常工作，还可能面临企业处罚，甚至被辞退。现在2026河南最新政策对… · 2026/11/14 16:54:53

报考电工证多久开班在哪考最省事

报考电工证多久开班在哪考最省事实操考试心里没底怕挂科？很多河南的应届工程类毕业生在报考电工证时都担心自己是否能一次性通过考试，尤其是实操部分。如果你也在为“报考电工证多久开班”和“在哪考”这些问题发愁，那么这篇文章就是为你准备的。下面我们… · 2026/11/14 16:54:53

苏州打印电工证通过率揭秘：工地太忙根本没时间复习考试怎么办？

苏州打印电工证通过率揭秘：工地太忙根本没时间复习考试怎么办？工地太忙根本没时间复习考试，这几乎是所有特种作业人员的真实写照，尤其是像电工证这种必须通过考试才能上岗的证书。你是不是也经常因为工地任务紧，根本腾不出时间去准备考试？别急，苏州打… · 2026/11/14 16:53:53

电工证丢失还能补吗？千万别踩坑，丢了证等于失业

电工证丢失还能补吗？千万别踩坑，丢了证等于失业你正在找工作，但手里的电工证突然丢了，这下怎么办？别急，先别慌，电工证丢失还能补吗？答案是肯定的，但千万别踩坑，补办流程如果不了解，可能会耽误你上岗、甚至影响到你的收入。… · 2026/11/13 22:30:50

电力电缆作业证直播报名入口与办理流程良心建议

电力电缆作业证直播报名入口与办理流程良心建议你是不是也担心学历不高报不了名？别急，今天就给你讲讲电力电缆作业证直播的报名流程和那些你必须知道的干货，良心建议在这里，别错过。电力电缆作业证直播报名需要什么条件？… · 2026/11/14 13:23:47

英德电工证报考费多少钱，怕考不过白交培训费？看完这篇别再踩坑

英德电工证报考费多少钱，怕考不过白交培训费？看完这篇别再踩坑怕考不过白交培训费？英德电工证报考费多少钱，你真的了解吗？现在市面上培训机构五花八门，价格参差不齐，很多人一不小心就花了冤枉钱，结果还考不过。别急，今天就来给你说清楚英德电工证的… · 2026/11/14 13:20:59

有初级电工证怎么工作 2026河南最新政策怎么应对

有初级电工证怎么工作 2026河南最新政策怎么应对之前考的证在外省能不能转过来？这个问题我每天被问上百次。2026年河南最新政策对证书跨省转移有了明确说明，特别是南阳市的从业者，需要特别关注。… · 2026/11/14 0:00:31

电工证过期了不知道怎么复审？考电工证自学书+官方报名入口全攻略

电工证过期了不知道怎么复审？考电工证自学书+官方报名入口全攻略证书过期了不知道怎么复审延期？很多人遇到这种情况，要么是工作太忙没时间处理，要么是不知道具体流程，导致证书失效，影响工作和项目进展。其实复审并不难，关键是要找准官方报名入口，掌… · 2026/11/14 0:00:31

为什么要低压电工证实操考试考什么

为什么低压电工证值不值得考？别再被中介骗了你是不是也经常看到网上有人在问“低压电工证到底值不值得考”？或者在找报名点时，担心被中间人骗钱？这些问题，我懂，我也经历过。作为一名在应急管理行业摸爬滚打多年的从业者，我深知低压电工证不仅是一个从… · 2026/11/14 0:00:31

双极步进电机控制实战：DRV8818PWPR与PIC18F86K22驱动调试

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/13 6:12:21

STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析

DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案

Flutter第六节-----Flutter部分基础组件解析到自定义组件

相关推荐

了解更多？预约专属演示