本文首要讲述新建一个Flutter项目的各个项目结构，并合作初始项目，来了解Flutter的各种状况，以及常用类解析

项目结构解析，以及各个文件的作用

新创立一个Flutter项目，项目接口如下图所示

Flutter 项目结构 初始项目 分析

  • .drat_tool 是Flutter工具运用的一个暂时目录，包括了一些工具生成的配置和构建输出。一般不需求开发者去修正，由Flutter主动生成
  • .idea idea的配置信息，不用管
  • android 寄存Android渠道相关的代码和配置文件，一般需求修正的是AndroidManifest.xml，用来配置权限和注册文件的
  • build 编译文件 不用管
  • ios 这个目录是用于寄存iOS渠道相关的代码和配置文件的
  • lib 这个目录是首要的Dart目录，用来寄存运用程序的逻辑和界面代码，大部分隔发会在这个目录下进行
  • linux 这个目录是用于寄存Linux渠道相关的代码和配置文件的。它包括了一个Linux项目的结构，其中包括CMake构建脚本和其他与Linux相关的资源和配置文件。
  • macos 这个目录是用于寄存macOS渠道相关的代码和配置文件的。
  • test 编写测验文件
  • web 这个目录是用于寄存Web渠道相关的代码和配置文件的
  • windows 这个目录是用于寄存Windows渠道相关的代码和配置文件的
  • .gitignore 配置git上传的
  • .metadata 文件是由Dart编译器生成的元数据文件。它包括有关项目的编译和依靠信息。遇到meadata报错怎么办，嗯，删掉，让Dart从头编译
  • analysis_options.yaml 配置静态代码剖析工具，能够在这儿界说代码风格，金庸或启用特定的正告和错误检查之类
  • pubspec.ymal 配置文件，用于声明项目的依靠关系、资源我呢见、版别号信息等，类似于Android的build文件
  • ubspec.lock 主动生成，确认项目的依靠关系

其中pubspec.yaml是必需的，用于配置项目的依靠和资源，而pubspec.lock和analysis_options.yaml是依据需求主动生成的辅佐文件，所以详细说一下pubspec.yaml文件

pubspec.yaml文件解析

这一段需求合作 着代码看

name: untitled   #项目名称
description: A new Flutter project.   #项目描绘
publish_to: 'none'    #避免上传到pub.dev   这个类似与maven
version: 1.0.0+1    #版别号  前面是版别名字 +1是第一个版别
environment:
  sdk: '>=3.0.1 <4.0.0'   # 设置最低和最高版别
dependencies: #依靠文件 外部包
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  http: ^1.0.0   #把http 1.0.0版别导入项目
dev_dependencies: #开发时期的依靠包 一般是测验结构之类
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0
flutter: #包括Flutter特定字段   ，比方配置
  uses-material-design: true
  assets:
    - assets/

这一段把创立项目的注释去掉 翻译一下大约便是这个意思，值得注意的是flutter这个内容下uses-material-design的意思是是 是否运用了Material Design 风格,assets下面这个表明把assets这个文件夹加载进去，一般便是系统资源，比方本地图片，如果在运用，必须先加载，我这儿是把一个文件夹都加载了进去，当然也能够一个以额添加，途径copy上去就能够

初始项目解析

在创立Flutter项目的时分有一个默许的计数器的Demo，咱们就以此Demo来看一下他们别离有什么用

void main() {
  runApp(const MyApp());
}

一个运用的进口，能够了解为Activity + 多Fragment方式，MyApp就相当于第一个Fragment，然后进入执行了MyApp一个类

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.orange),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

为什么要继承StatelessWidget我其时也思索一段时刻，也合作了文档和材料总结了一下，以下是我的了解： 常用的一般有StatelessWidget和StatefulWidget用来构建用户界面

  • StatelessWidget 是一个不可变部件，它的外观和交互在构建期间就确认了，不会发生改变，适用于那些不需求管理可变状况的部件，一般用于显现静态内容、接收用户输入并触发回调等简略场景。
  • StatefulWidget 是一个可变部件，它能够依据内部的状况数据来改变外观和交互，适用于那些需求动态更新、管理状况的部件，例如表单输入、列表视图等。 也便是说首要看页面需不需求和用户互动，需求就用StatefulWidget，不需求就用StatelessWidget 然后MaterialApp是一个页面结构，能够设置主题，相当于Android的Theme，以及运用运用Material3

然后Home现在了一个MyHomePage，这儿又出现了一个const什么意思呢，从经历来说一个常量，为什么要用常量来修饰小组件呢，由于小组件是不可变的，也就告诉编译器说这个小组件运转是不会发生改变，在从头渲染的时分能够直接运用，那MyHomePage里边或许会有改变啊，这儿指的改变是不会从MyHomePage变成其他的Page

好的 来看下一段

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Image.asset('assets/icon.png'),
            ),
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

这儿就相当于是显现的中心，等等为什么要分两个类写，我写个匿名内部类不完了吗，这儿分隔写的解释为最重要的一点性能问题，如果都写到一起，协程匿名内部类，当状况发生改变时，所有的外观和交互逻辑都会被从头结构和渲染，带来性能问题，分隔写其他的好处便是，解耦啦，可读性啦，可重用性啦…..

剖析完结之后学习以下控件吧

  • Scaffold 一个模板，就他把款式位置给你调整好，你写参数就完事
  • Center 显现到界面中心 类似于Android FrameLayout 的gravity
  • Column 竖直盘列小组件 类似于Android LinearLayout 的vertical
  • padding 设置内边距 这个和Android的View不同，需求单独加一个小组件，而不是直接对View设置
  • Text 用来显现文本，相当于TextView 没什么好说的
  • FloatingActionButton 便是右下角的按钮 Android也有类似的，这儿注意的是 定位是Scaffold赋予它到这个位置的，然后点击时刻为onPressed 和 onClick相同，这儿和Kotlin的点击回调很类似啊，调用了一个_incrementCounter办法

这儿需求说一句 _incrementCounter 办法里边有一个setState 的办法 然后由于要告诉Flutter我这个页面发生改变了，setState便是这样的作用

总结

这一章算是学习了一下Flutter的基础示例项目，由于自己也是Android开发工程师，最近也是闲暇时刻比较多，所以有了学习Flutter的念头，其中有问题的地方，费事大佬指出来，方便及时修正，在这儿感激不尽，还有一个便是学习方式的问题，我或许比较喜欢合作着官方的示例项目一个一个来看，然后不懂了看文档，看别人写的文章，所以每一会儿把小组件介绍完，那样我也记不住，别的Dart语音和Java很类似，又有一些Kotlin的小玩意，由于自己是都学习还能够，所以不太吃力语言方面，不会的能够找Dart语法看一看