暂无图片
暂无图片
暂无图片
暂无图片
暂无图片

Flutter入门及实战之HelloWorld

一盎司科技 2021-11-26
1359

在准备好Flutter开发环境之后,就可以着手开发应用程序了。后续我们将主要以Android为主作介绍,也会展示Windows桌面版运行的效果,当然代码是同一份。


环境

操作系统:Windows10

Flutter版本:2.2.2 stable

Dart版本:2.13.3

开发工具:Android Studio Arctic Fox | 2020.3.1、 Visual Studio Code 1.58.2、Visual Studio 2019


接下来的操作将在Android Studio中进行,也可以在更为轻便的Visual Studio Code中进行,看个人喜好而定。


步骤

1.安装插件:搜索Dart和Flutter插件,然后安装即可。


2.创建Flutter工程:点击Project,在弹出的对话框中选择Create New Flutter Project,然后根据提示创建工程即可。


3.代码实现:工程添加完成后会自动生成示例代码,此处重点要关注的是lib文件夹下面的main.dart文件,也就是程序的主文件,当然也包括主函数main。


代码解读

1.main函数:类似Java或者C/C++等编程语言中的主函数,是程序的入口。其中调用的runApp函数,入参是一个Widget,也就是一个组件,用于展示界面效果。可以类比Android中的组件概念。


2.MyApp类:根组件,继承于StatelessWidget组件,所谓的无状态组件,主要用于绘制界面。


3.MyHomePage:页面组件,继承于StatefulWidget组件,即有状态组件,顾名思义是包含状态的组件。譬如,包含计数器变量,可以通过按钮点击改变其值。


4._MyHomePageState:页面组件的状态类,继承于State状态类,主要包含界面构建以及数据构建。一般通过页面组件的重载函数createState来关联。


运行

选择运行的设备,可选择Web版、桌面版或者模拟器,还可以真机联调,与Android类似。此处选择桌面版,点击运行:


右上角的调试提醒文本可以去掉,在MyApp类中的MaterialApp增加一个参数debugShowCheckedModeBanner,设置为false即可。


由于Flutter是热加载的方式,所以保存代码后可以立即看到效果。对于开发而言,这也是非常友好的,所见即所得。


延伸

对于一个Flutter应用而言,主要包括main函数,MyApp主类,然后在主类中添加其他页面展示,包括路由,语言,主题等等都可以在主类中设置。譬如,要修改标题,直接修改MyApp类build函数中的MaterialApp类中的title参数即可;修改主题,设置ThemeData相关参数即可。


Flutter应用中设置状态的操作,在其他语言中其实也有类似的处理,此处的setState函数,很容易联想到微信小程序中setData的操作。


Flutter应用默认使用Material Design设计,Android原生中有类似的效果,也可以根据需要自行设计风格。社区有丰富的图标和插件可以使用,对于一般的开发而言,已经够用。

Flutter应用的主配置文件是pubspec.yaml,主要包括工程名,版本号,本地资源文件以及插件依赖等,后续我们将逐步介绍。


说明

以上示例代码,我们会更新到githubgitee,可根据需要下载,具体路径如下:

github:https://github.com/iounce/flutter-demo

gitee:https://gitee.com/iounce_admin/flutter-demo


文章转载自一盎司科技,如果涉嫌侵权,请发送邮件至:contact@modb.pro进行举报,并提供相关证据,一经查实,墨天轮将立刻删除相关内容。

评论