Flutter入门1

  • Flutter结构

Android目录:Android的资源文件

Build目录:运行项目的时候生产的编译目录

Ios目录:ios的项目目录

Lib目录:写代码的目录

Test目录:放测试文件

Pubspec.yaml是项目的配置文件。配置了项目的名称、项目的描述、以及项目所需的各种依赖。

(注意:在创建项目和包的时候都要用小写,不然就不符合dart的语法报一下错误Invalid module name: 'Caroline_app01' - must be a valid Dart package name (lower_case_with_underscores).)

此外,如果需要使用第三方库,需要在pubspec里面配置第三方库,位置如下

 这里会自动执行一个putget的操作,包括输出过程中也会执行一个flutter packages get的操作把远程的库下载到本地。

  • flutter入口方法

在lib目录中的main.dart就是flutter的 入口文件。写自己的文件的时候先将原有的代码清空。

  1. 输入fim,f就是flutter,i表示import,m表示material.dart。按下回车之后自动生产
  2. 定义main方法
  3. 调用runApp方法                                                                                                                     在runApp方法中就可以调用flutter里面的组件。在flutter中所有的组件都是类。类的首字母是大写

   上面就是一个简单的代码,Ctrl+s保证之后在终端输入flutter run运行。之后对内容有修改可以在终端直接输入R,即shift+r重新编译运行。

  将鼠标放到类上可以看见此类的使用方法。

   如果出现一些警告,如下图,就是因为没有定义class的MyApp导致的,因为这个版本可以会建议使用自定义组件实现功能。先不用管(其他报错也可能是因为语法使用稍有不同引起的)能运行就行,不用着急完善。

  • 自定义组件

  因为到时候做软件Center组件的内容肯定很多,放在主函数中肯定不合理。所以需要我们自定义组件,在flutter内自定义组件就是创一个类。这个类需要继承StatelessWidget或者StatefulWidget。

  StatelessWidget是无状态组件,状态不可变的widget

  StatefulWidget是有状态组件,持有的状态可能在widget生命周期改变 

1.首先将鼠标放在MyApp上,点击快速修复,选择Create 1 missing override就好自动填充。

2.然后return Center类。                                                                                                             里面的方法可以自行去学习,这里不在赘述。 

 这样主函数里面只用调用MyApp方法就行。

上面代码的显示效果如下:

  • 给APP加导航和背景

需要使用flutter中提供的MaterialApp和Scaffold组件。

【Flutter学习】之MaterialApp和Scaffold组件使用详解 - 梁飞宇 - 博客园 (cnblogs.com)

实例代码如下:

运行结果如上

Ps.包括上一篇文章都是【Dart Flutter教程_Dart Flutter2入门实战视频教程-第15讲以后是Flutter教程-2021年6月更新-哔哩哔哩】 https://b23.tv/apk5F9C

大地老师课程的总结,如有侵权立删。

Guess you like

Origin blog.csdn.net/m0_61686427/article/details/122463615