从头学习Flutter(二) 生成项目

最新推荐文章于 2024-07-12 10:21:47 发布

ppqoppqh

最新推荐文章于 2024-07-12 10:21:47 发布

阅读量196

点赞数 1

分类专栏： Flutter

本文链接：https://blog.csdn.net/ppqoppqh/article/details/97926280

版权

Flutter 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用VsCode生成项目

上回已经把环境都配置好了，现在就要生成项目跑一下了
之前看了下攻略，因为有gradle这个东西，所以我们先改下flutter里的gradle下载库的地址

第一步：修改flutter.gradle
文件路径为:flutter>packages>flutter_tools>gradle>flutter.gradle, 找到

buildscript {
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.2.1'
    }
}

修改为

buildscript {
    repositories {
        // google()
        // jcenter()
        maven { url 'http://maven.aliyun.com/nexus/content/repositories/google' }
        maven { url 'http://maven.aliyun.com/nexus/content/repositories/jcenter' }
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.2.1'
    }
}

第二步：建立项目
在VsCode上点击查看=>命令面板，输入flutter，选择Flutter: New Project
输入一个名字，我输入的hello，然后选择建立项目的文件夹，等待

第三步: 查看项目

.idea---------------------------------------------------应该是配置信息啥的，先不去看这个
android-----------------------------------------------Android宿主
1. .gradle---------------------------------------- Android版本生成apk使用的插件
2. app---------------------------------------------Android代码
3. gradle------------------------------------------gradle编译工具
4. build.gradle-----------------------------------gradle配置文件
5. gradle.properties----------------------------gradle选项
6. gradlew----------------------------------------gradle运行工具
7. gradlew.bat-----------------------------------跟上面那个一组的
8. hello_android.iml----------------------------这个android项目的配置文件
9. local.properties------------------------------本地配置文件
10. settings.gradle-------------------------------android项目要编译的module
ios------------------------------------------------------苹果宿主
1. Flutter------------------------------------------IOS与flutter交互代码b
2. Runner-----------------------------------------我猜是运行时编译代码
3. Runner.xcodeproj---------------------------同上
4. Runner.xcworkspace-----------------------应该是Xcode相关的吧
lib--------------------------------------------------------Flutter内Dart代码
test------------------------------------------------------Flutter测试代码
.gitignore-----------------------------------------------git上传忽略列表
.metdata------------------------------------------------貌似是记录这个Flutter项目使用的是哪个版本的，不需要被修改
.paceages----------------------------------------------使用的flutter组件是从哪加载的
hello.iml-------------------------------------------------项目配置文件
pubspec.lock-------------------------------------------外部引用库，自动生成的文件不需要修改
pubspec.yaml------------------------------------------外部引用库配置文件
README.md-------------------------------------------说明文档

第四步：查看代码

先看Android里：在MainAcitivity内，调用了

GeneratedPluginRegistrant.registerWith(this);

应该是注册了什么东西
然后去看GeneratePluginRegistrant

    registry.registrarFor(key);

主要是这句话，这个registry是个接口，还是要看FlutterActivity。FlutterAcitivity内指到了FlutterActivityDelegate内。
然后又到了flutterView 内，因为FlutterActivity内返回的是null，所以这个FlutterView是新建的。
flutterView有三个参数，上下文，渲染类型，透明类型。默认渲染类型是surface，透明类型是不透明。
FlutterView调用FlutterRenderer，FlutterRenderer实现了TextureRegistry ，主要渲染是通过FlutterJNI 实现的，
FlutterJNI 通过JNI去实现的，感兴趣的可以去看看。
这里看到PlatformMessageHandler与dart相关，猜测应该是通过这个东西来在java与dart之间传递。
到这里不看JNI代码的话还是不知道是如何从dart渲染的View，先跳过这里继续教程上的东西吧。

查看build.gradle

apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"

相比普通android项目多了这一句，进去看看。
主要写了配置各种芯片的加载路径，各种选项等等。有兴趣可以研究。

查看main.dart

void main() => runApp(MyApp());

runApp 参数是Widget 作用是建立个界面并渲染
重复调用这个方法，将这个全屏部件提出来，显示在设置的位置。并与上一个比较，把不同的地方添加到什么tree里，这里没有细看，应该是渲染的逻辑，大致是有个队列然后，消费者去渲染。

MyApp 继承的是 StatelessWidget， StatelessWidget意思大致是无状态的小组件，有个build方法需要是实现，返回的Widget。

这里返回了一个MaterialApp，这个MaterialApp继承于StatefulWidget，
StatefulWidget与StatelessWidget相反是个有状态的小组件，
StatelessWidget里必须实现一个方法是createState返回的是State。

home: MyHomePage(title: 'Flutter Demo Home Page'),

MaterialApp内看到，

  /// {@macro flutter.widgets.widgetsApp.home}
  final Widget home;

MyHomePage就是自定义的StatefulWidget，实现了_MyHomePageState。
_MyHomePageState继承于State，返回一个Scaffold。
Scaffold内有AppBar，Center，Column，floatingActionButton这些都是Widget。
大体上就好像，界面上用Widget搭积木。

现在直接运行试试，按下F5：

Launching lib\main.dart on X98 Air III M5C5 in debug mode...
Built build\app\outputs\apk\debug\app-debug.apk.
E/flutter ( 1772): [ERROR:flutter/shell/gpu/gpu_surface_gl.cc(58)] Failed to setup Skia Gr context.
I/dalvikvm( 1772): Total arena pages for JIT: 11

白屏，貌似是Gpu不支持这个。。
找了下解决方法issues
在vscode项目内建立.vscode文件夹，新建launch.json文件

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Flutter",
            "request": "launch",
            "type": "dart",
            "args": [
                "--enable-software-rendering"
            ],
        }
    ]
}

停止项目，再次运行。
这时候应该显示出来了，随便修改个字符串，然后保存，界面修改了。

现在程序运行出来了，下次继续跟随教程，学习数据跟界面的关系。