Flutter仿美团应用开发笔记-入门篇

川长思鸟来 2022-05-01 13:26 179阅读 0赞

# Flutter概览 #

**Flutter**是谷歌发布的跨平台开发框架（通过极少的改动即可运行在桌面端，web端，Android与IOS且UI具有高度一致性）并将作为谷歌新操作系统Fuchsia的UI框架。在移动端Flutter通过**skia**2D绘图引擎保证了各平台UI一致性的同时具有媲美原生应用的流畅度。因**Dart**语言同时支持JIT编译（Just in Time）和AOT编译（Ahead of Time）使得Flutter支持hot reload。在开发阶段可以帮助您在无需重新启动应用的情况下快速、轻松地进行测试、构建用户界面、添加功能以及修复错误。而在发布时又能获得极高的性能表现。想要了解更多Flutter相关内容请前往Flutter官网（需翻墙）：[flutter.dev/][flutter.dev] 中文镜像站 ： [flutter-io.cn/][flutter-io.cn]

## 环境配置 ##

Flutter安装建议参考中文镜像站里的安装教程，包含了配置国内镜像的内容。系统可以是Windows，Linus，macOS。集成开发环境可以选择Android Studio，IDEA， VS Code。

在安装完Flutter插件后新建项目时便会有Flutter项目的选项。Flutter基础项目如上图所示，android和ios文件夹为对应平台的配置文件和基础架构，lib目录存放编写的dart的文件，pubspec.yaml用来添加依赖库和图片等资源文件。lib目录下自动生成的main.dart文件包含了Flutter应用的入口，通过对该文件的解析可以大致了解Flutter应用结构。

## dart语言概览 ##

Flutter框架唯一支持的编程语言为dart。dart语言可以简单的看作Java和JavaScript的结合体，有过面向对象编程语言的小伙伴们都能快速上手。详细的教程参考 [官方文档][Link 1] 这里只介绍一些与其他编程语言的相差较大的部分：

1.  MyHomePage(title: 'Flutter Demo Home Page') 在定义方法时用大括号包裹住的参数为带名称的可选参数，参数前用 @required 注释表明该参数不可省。如：MyHomePage(\{Key key, this.title\}) ， this.title表示将传入的值直接赋给属性title。
2.  在dart中，new关键字永远是可省的，如 return MaterialApp(...)。 变量定义可以是
    
        String str;
        final str = ""
        const str = ""
        var str = ""
        dynamic str = ""
        复制代码
    
    final和const的区别在于final是只能被赋值一次的常量，可以用另一个变量初始化，而const不能被变量初始化，const的值必须在编译前就能被确定。
3.  传递方法
    
        () => _counter++;   //方法体为单行, 约定下划线开头的属性为私有
        (p1, ...) => ... ;
        () {}    //方法体为多行
        (p1, ...) { ... }    
        复制代码

## main.dart文件解析 ##

import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());   //dart中的入口函数，runApp方法启动Flutter应用程序
    
    class MyApp extends StatelessWidget {   //在Flutter中一切皆为控件，无论Activity还是布局等。
      @override
      Widget build(BuildContext context) {
        return MaterialApp(   //便捷创建app的控件，可以配置全局颜色主题，路由，国际化等。
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }
    //最常用的两大Widget之一。StatefulWidget，可以通过setState方法动态的改变界面
    class MyHomePage extends StatefulWidget {		
      MyHomePage({Key key, this.title}) : super(key: key);
    
      final String title;
    
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      int _counter = 0;
    
      void _incrementCounter() {
        setState(() {	//通过改变State中的属性动态的改变界面
          _counter++;
        });
      }
    
      @override
      Widget build(BuildContext context) {
      	//Scaffold控件提供了一个路由的基础结构，如appBar，body等。
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Center(	//使子控件居中
            child: Column(		//使children中的多个控件垂直排列
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.display1,
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(	//悬浮按钮
            onPressed: _incrementCounter,
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ), 
        );
      }
    }
    复制代码

转载于:https://juejin.im/post/5ceb97116fb9a07eab685edb

[flutter.dev]: https://link.juejin.im?target=https%3A%2F%2Fflutter.dev%2F
[flutter-io.cn]: https://link.juejin.im?target=https%3A%2F%2Fflutter-io.cn%2F
[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fdart.dev%2Fguides%2Flanguage%2Flanguage-tour