Dbbefcca5f74e7a370d3d37db9d4ac4c
Flutter-从入门到项目 03: Flutter初体验

Flutter 专栏目录直通车

Flutter-从入门到项目 01: Flutter重要性

Flutter-从入门到项目 02: 环境配置

Flutter-从入门到项目 03: Flutter初体验

Flutter-从入门到项目 04:Dart语法快速掌握(上)

Flutter-从入门到项目 05:Dart语法快速掌握(下)

Flutter-从入门到项目 06: 微信项目搭建

Flutter-从入门到项目 07: 微信项目-发现页面

🎅一、创建一个Flutter 工程🎅

下面我们通过 Android Studio 安装的 Flutter插件 创建 Flutter 工程

Android Studio 主界面 -> Create Flutter Project

说明: 👆上面截图的四个功能

  • Flutter Application : 创建一个 Flutter 应用工程
  • Flutter plugin : 这是为了给 AndroidiOS 提供插件应用(暴露的借口)的时候使用
  • Flutter Package : 创建一个 Dart组件 发布到 pub 来提供便捷开发 类似一些三方库
  • Flutter Module : 一般用来做混合开发,嵌入到 AndroidiOS 工程当中!

创建完毕我们就可以初体验运行一下 感受一下 Flutter 经典默认页面

🎅二、Flutter 声明式语法🎅

  • 命令式编程:命令“机器”如何去做事情(how),这样不管你想要的是什么(what),它都会按照你的命令实现。
  • 声明式编程:告诉“机器”你想要的是什么(what),让机器想出如何去做(how)。

可能你这里通过这个还是无法明白什么是 命令式编程 什么是 声明式编程 我们以一个视图UI 做为🌰说明一下

首先我们看看 命令式编程 的代表 : Object-C

    UIView *view = [[UIView alloc] init];
    view.frame   = self.view.bounds;
    view.backgroundColor = [UIColor orangeColor];

我们要告诉“机器”: view的布局是 self.view.bounds view的背景色是 orangeColor
如果需要改变视图,你通常需要使用选择器 findViewById 或类似函数获取到 ViewB 的实例 view 和所有权,并调用相关的修改的方法(并隐式的使其失效)

   view.backgroundColor = [UIColor blueColor];

由于 UI 真实的来源可能比实例 view 本身的存活周期更长,你可能还需要在 view 的构造函数中复制此配置

在声明式风格中,视图配置(如 FlutterWidget )是不可变的,它只是轻量的“蓝图”。要改变 UIwidget 会在自身上触发重建(在 Flutter 中最常见的方法是在 StatefulWidgets 组件上调用 setState())并构造一个新的 Widget 子树。

// Declarative style
return ViewB(
  color: red,
  child: ViewC(...),
)

很明显两个模式侧重的点是完全不一样的! 如果还有不太理解的, 不妨都看两遍就会有感觉了!!!

🎅三、Flutter 工程初体验🎅

对上面声明式语法有一定的理解之后,我们开始玩玩代码,首先默认工程你可能看懂代码,但是只是一层粗略的看,现在我们学习,不防一点一点来! 先干掉整个程序一些代码,留下👇

接下来我们开始编写一个简单的代码

🎄① flutter 文本组件体验🎄

// 导入系统包 : 作用类似 #import <UIKit/UIKit.h>
import 'package:flutter/material.dart';

// 程序运行的 main 函数 (入口0
void main() {
  // 应用程序运行的函数 类比: UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
  // 因为在 Flutter 世界里面 都是各种部件
  // 这里我们简单使用一下 Center 来写一个 文本
  runApp(Center(
      child: Text(
    '和谐学习,不急不躁', // 文本
    textDirection: TextDirection.ltr, // 对齐方式
    style: TextStyle(
      fontSize: 40.0, // 字体大小
      color: Colors.red, // 红色字体
      fontWeight: FontWeight.w400, // 字体的粗细
    ),
  )));
}

是不是感觉很清爽, Flutter 本身在编写代码还是比较轻松的, 毕竟有没有发现这样的语法结构越来越趋于 大前端一统...

🎄② flutter 导航栏体验🎄

top Created with Sketch.