当先锋百科网

首页 1 2 3 4 5 6 7

flutter 官网

网址:https://flutterchina.club/setup-macos/

配置环境变量

  • 将flutter下载完成之后, 打开终端命令行 ( 在所下载的文件上一级 )
  • 使用vim进行配置环境变量 vim ~/.bash_profile
  • 在打开的文件里增加一行代码,意思是配置flutter命令在任何地方都可以使用。
    export PATH=/app/flutter/bin:$PATH ( 注意: 此处的 ‘/app/flutter/bin’ 要添我们下载下来对应flutter里面bin的路径 )
  • 配置完成后,需要用source命令重新加载一下 source ~/.bash_profile
  • 完成这部以后,就算我们flutter的安装工作完成了,但是这还不能进行开发。可以使用命令来检测一下,是否安装完成了。
    flutter -h

检查开发环境

flutter doctor

Android Studio

下载地址:http://www.android-studio.org/

brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-deploy
brew install cocoapods
pod setu

安装完 Android SDK后

  • 第一步要作的是允许协议(android-licenses)
    flutter doctor --android-licenses
  • 完成后,我们再使用flutter doctor进行检测,会看到还是有很多x, 可以进行相应的下载.
  • 打开Android Stuido 软件,然后找到Plugin的配置,搜索Flutter插件。在这里插入图片描述

Android studio新建Flutter项目

打开Andorid Studio ,我们选择第二项,新建Flutter项目。
建立完项目后可以去 vscode里面进行编写, 在扩展程序中, 下载flutter

Dart语法

Dart是面向对象的语言,即使是函数也是对象,并且属于Function类型的对象。这意味着函数可以分配给变量或作为参数传递给其他函数。当然你也可以像JavaScript一样,调用一个函数。
( Dart里一切皆对象,包括数字和函数 )
在这里插入图片描述

  • 创建完成之后, 我们可以如上图写一个小demo
  • void main() =>runApp(MyApp()); 因为这个函数体里只有一行代码,所以可以直接使用=>来省略{},只有函数 体里只有一行时,才可以使用,否则请使用大括号。
  • StatefulWidget 和 StatelessWidget
    StatefulWidget : 具有可变状态的窗口部件,也就是你在使用应用的时候就可以随时变化,比如我们常见的进度条,随着进度不断变化。
    StatelessWidget:不可变状态窗口部件,也就是你在使用时不可以改变,比如固定的文字(写上后就在那里了,死也不会变了)。
import 'package:flutter/material.dart'; // 是Flutter实现Material Design设计风格的基础包,,里面有文本输入框(Text)、图标(Icon)、图片(Image)、行排列布局(Align)、列排列布局(Column)、Decoration、异步、动画等等控件,大家可以理解为网页中的按钮、标题、选项框呀等等控件库吧。

void main()=> runApp(new MyApp()); // main()函数是Dart程序的入口
// 继承(关键字 extends)
class MyApp extends StatelessWidget { // StatelessWidget 无状态类. 当你想展现的内容只需要改动控件本身的配置信息就可以实现的.(例如:文本、图片)
  @override // 继承 StatelessWidget,必须要重写build的方法
  Widget build(BuildContext context) { // 窗口Widget以树形结构组织。 build 方法会携带一个 BuildContext 参数. 可以把Widget想象成一种可视化组件,或者应用中可以与可视化组件进行交互的模块。
    return MaterialApp(  // 返回一个material类的组件对象
      title:'Flutter bottomNavigationBar', // 这个不在窗口中显示
      theme:ThemeData.light(), // ThemeData 是MaterialDesign Widget库的主题数据,Material库的Widget需要遵守相应的涉及规范。 这些涉及规范可自定部分都定义在ThemeData,所以我们可以通过ThemeData来自定义应用主题。 通过Theme.of方法来获取当前的ThemeData. Material Design设计规范中有些是不能自定义的,如导航栏高度,ThemeData只包含了可自定义部分。
      home:BottomNavigationWidget()
    );
  }
}

在这里插入图片描述

在vsCode中跑flutter项目

跑项目: flutter run

r 键:点击后热加载,也就算是重新加载吧。(每次修改完代码后, 需要在终端命令行输入 r )
p 键:显示网格,这个可以很好的掌握布局情况,工作中很有用。
o 键:切换android和ios的预览模式。
q 键:退出调试预览模式。

如果嫌以上方法麻烦也可以直接用Debug模式, 实现我们保存,效果立即就会改变, 如下图.
在这里插入图片描述

生命周期

在这里插入图片描述