运行Demo

打开Android Studio菜单项选择Start a new Flutter project,进入选项选择默认即可。

进入项目把gradle配置镜像源,需要把google()jcenter替换成:

maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }

然后再进行gradle sync构建项目。

构建好可以在物理机或者虚拟机运行App了。

fltter project项目讲解

|flutter app
--|android/ # Android 环境源码
--|ios/ # iOS 环境源码
--|lib/ # 主要业务源码,我们重心在这开发
--|test/ # 测试环境
--|.gitignore # git上传忽略
--|.metadata # flutter元数据
--|.packages # 拉取依赖包信息
--|pubspec.lock # 依赖包锁
--|pubspec.yaml # 依赖说明

Hello World

删除lib/main.dart所有内容,并添加下面代码:

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

如果要格式化代码在右键单击Dart代码,然后选择 Reformat Code with dartfmt

从上述一段代码来看,风格倒是和现在主流编程风格差不多,都是面向对象编程过程。

  • void main() => runApp(MyApp());是程序进来第一步执行的函数,这个函数是MyApp()
  • MyApp()继承StatelessWidget方法并且注解解释重写该方法。
  • 返回是MaterialApp widget组件方法信息。

在Flutter设计理念是:一切皆为组件,即widget。

最小组件

根据上面描述的代码完全可以精简成最少的代码运行App:

import 'package:flutter/material.dart';
 
void main() {
  runApp(
    Center(
      child: Text(
        'Hello, world!',
          textAlign:TextAlign.right,
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

理解实例

Android Studio新建项目里面包含个简单的项目,来大概了解下项目运行过程:

// 导入 UI 包,Material是 Google Android 特色 UI 风格
import 'package:flutter/material.dart';
 
// 应用入口,Main方法 => 类似 es6 的箭头函数,方法同样可以写成下面一样
void main() => runApp(MyApp());
 
//void main() {
//  runApp(MyApp())
//}
 
/**
* 应用结构
* MyApp 继承 `StatelessWidget`这个类,并且重写相关方法
*/
class MyApp extends StatelessWidget {
  // 应用程序根节点
  @override
  Widget build(BuildContext context) {
    // MaterialApp 是 Material库中提供的Flutter APP框架,
    // 通过它可以设置应用的名称、主题、语言、首页及路由列表等。
    // MaterialApp 也是一个 widget。
    return MaterialApp(
      // 应用名称
      title: 'Flutter Demo',
      // 程序风格 蓝色
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // 程序首页 并且含有`title`参数
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
 
/**
* 首页页面
* 该组件为 状态管理组件,意味着包含状态值相关业务
*/
class MyHomePage extends StatefulWidget {
  // 接受参数
  MyHomePage({Key key, this.title}) : super(key: key);
 
  // 定义标题,并且未常量,不可再次赋值
  final String title;
 
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
 
/**
* MyHomePage 继承 StatefulWidget 其中的一个`State`状态类,该类用于程序监听状态来实现程序交互
*/
class _MyHomePageState extends State<MyHomePage> {
 
  // int 类型 的变量 `_counter` 初始化为 0
  int _counter = 0;
 
  // 叫`_incrementCounter`方法
  void _incrementCounter() {
    setState(() {
      // 如果触发`_incrementCounter`方法就自增`_counter`
      _counter++;
    });
  }
 
  // 构建 UI 界面
  @override
  Widget build(BuildContext context) {
    // Scaffold 是Material库中提供的页面脚手架,它包含导航栏和Body以及FloatingActionButton。
    return Scaffold(
      // 导航栏
      appBar: AppBar(
        // 导航栏标题 参数填入 上面`MyHomePage`带进来的参数
        title: Text(widget.title),
      ),
      // 程序正文,内容居中
      body: Center(
        // 布局组件 Column的作用是将其所有子widget沿屏幕垂直方向依次排列
        child: Column(
          // 控制主轴方向为居中
          mainAxisAlignment: MainAxisAlignment.center,
          // 子类组件,以 list 形式展示
          children: <Widget>[
            // 输出文本内容
            Text(
              'You have pushed the button this many times:',
            ),
            // 输出文本内容,`$+变量名`可以在字符串中显示,并且style定义输出字符串风格
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      // 页面右下角圆形按钮
      floatingActionButton: FloatingActionButton(
        // 点击按钮触发
        onPressed: _incrementCounter,
        // 提示,长按按钮出现悬浮窗提示字段
        tooltip: 'Increment',
        // 渲染加号的图标
        child: Icon(Icons.add),
      ),
    );
  }
}

当右下角的floatingActionButton按钮被点击之后,会调用_incrementCounter,在_incrementCounter中,首先会自增_counter计数器(状态),然后setState会通知Flutter框架状态发生变化,接着,Flutter会调用build方法以新的状态重新构建UI,最终显示在设备屏幕上。

尝试编写一个App

从编写这篇博文就有个写个App的计划,大概是Flutter功能展示方向的App,相信在Github有了一大堆轮子项目,且当对我来说是一个锻炼技术的项目吧,希望在这个项目过程中能够给自己带来App开发思考和设计理念。

在编写项目有必要了解下Dart语言和Flutter的规范:

Dart 文档:https://www.dartlang.org/guides/language/language-tour

Flutter 规范:https://github.com/alibaba/flutter-go/blob/develop/Flutter_Go%20%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83.md

video_20190712_093233_580

上面显示的是目前正在编写的 Flutter Demo App ,目前就简单的做了下,后面日子没事添加一些新的页面并且解释编写过程。

项目代码地址:Github Hi-Flutter

参考教程:Flutter Codelabs

可以跟着教程了解Flutter编写App过程,这里面包括页面编写、状态管理组件使用、页面路由等相关知识,结合文档掌握更快,在编写App我会把遇到的问题和解决问题分享到博客上。