Flutter入门（二）Flutter初体验

我们通过下面几个方面来体验Flutter

• 1.创建一个Flutter工程
• 2.Flutter语法
• 3.Flutter工程初体验

1.创建一个Flutter工程

我们通过Android Studio创建一个Flutter工程
Andorid Studio主界面 -> New Flutter Project

解释下上面其他选项卡的功能

• 1.New Project:创建一个Android工程
• 2. Open:打开一个现有的文件
• 3. Customize: 自定义Android Studio设置
• 4. Plugins:Android Studio插件，比如我们的Flutter, Dart插件就能在这里看到

• 1.Project name: 项目名称这里首字母小写
• 2. Project location: 项目代码存在本地的位置
• 3. Description:项目的描述
• 4. Project type: 工程的类型，我们这里选择Application
• 5. Android language: 选择安卓系统的开发语言
• 6. iOS language: 选择iOS系统的开发语言
• 7. Platforms：平台

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

2.Flutter语法

一般编程语言语法分为两类：1.命令式 2.声明式

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

通过上述还是无法明白什么是命令式编程和声明式编程，我们通过下面两个例子说明下

首先看看命令式编程: Object-c

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

我们要告诉程序: view的frame是 self.view.frame，view的背景色是 redColor

再来看看声明式编程: Flutter

Container(
  height: 53,
  alignment: Alignment.centerLeft,
  child:Text('123'),
)

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

由上述两个例子能看出，两个模式的侧重点是完全不一样的

3.Flutter工程初体验

我们开始玩玩代码,首先默认工程你可能看懂代码,但是只是一层粗略的看,现在我们学习,不防一点一点来! 先干掉整个程序一些代码

//类似作用<UIKit/UIkit.h>
import 'package:flutter/material.dart';

//app的入口函数
void main() {
}

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

3.1 flutter 文本组件体验

//类似作用<UIKit/UIkit.h>
import 'package:flutter/material.dart';

//app的入口函数
// 应用程序运行的函数 类比: UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
// 因为在 Flutter 世界里面 都是各种部件
void main() {
  runApp(
    // 这里我们简单使用一下 Center 来写一个 文本
    const Center(
      //Center的子部件为Text（文本）类似于iOS中的UILabel
      child: Text(
        'Hello Flutter', //显示的文本内容
        textDirection: TextDirection.ltr, //设置对齐方式
        style: TextStyle(
          fontSize: 15, //字体大小
          color: Colors.red, //字体颜色
        ),
      ),
    )
  );
}

是不是感觉很简单, Flutter 本身在编写代码还是比较轻松的.

3.2 flutter 导航栏

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

class MyAppBar extends StatelessWidget {
  const MyAppBar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp( //我们引入的包
      home: Scaffold( //类似nav
        appBar: AppBar( //导航条
          title: const Text('Flutter Demo1'), //导航条title
        ),
        body: const DiyWidget(),
      ),
    );
  }
}

我们看下最终呈现的效果

为了更快捷更方便我们编写代码，下面介绍一些快捷键的使用

• command + option + l:格式化代码
• command + o:全局搜索
• command + l: 快速跳转代码
• command + -:折叠代码
• command + +:展开代码
• command + [ 代码返回
• command + ] 代码前进
• ctr + alt + I自动缩进对齐
• stless创建新的 StatelessWidget
• stful 创建新的 StatefulWidget

3.3 flutter 列表界面

import 'package:flutter/material.dart';

class ListViewDemo extends StatelessWidget {
  const ListViewDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: ListView.builder(
        itemBuilder: _itemForRow,
        itemCount: datas.length,
      ),
    );
  }

  Widget _itemForRow(BuildContext context, int index) {
    return Container(
      margin: const EdgeInsets.all(10),
      //上下布局
      child: Column(
        children: [
          //图
          Image(
            image: NetworkImage(
              //这里用到外部传入数据，需要解包 ！和Swift一致
              datas[index].imageUrl!,
            ),
          ),
          //间隔
          const SizedBox(height:10),
          //文字
          Text(datas[index].name!)
        ],
      ),
    );
  }
}

通过导航栏样式加载列表结构, 从而加载数据其实如果你跟着写到这里应该很容易可以感受到声明式语法的魅力! 只有你掌握这种写法 再加上以前对UI布局的理解就很容易写出应用.

我们来看下最终的效果

---

最后

通过以上的几个例子，完成了Flutter的初体验，虽然感受不强，但是没有关系，多多练习就会有感受了，通过上面的代码我们不难发现Flutter的代码的简洁性还是很强的，最后让我们慢慢爱上Flutter吧