flutter开发总结-基础

2020-03-30

使用flutter到现在也有一年多的时间了，从边学边做开始从开发到维护了一个app项目一年。开始对这一年做一些总结，也在这个过程中发现现有项目的不足。

Dart

flutter使用Dart语言进行开发，Dart对于前端开发来说还是很好上手的，与JS有不少相似之处。

基本类型

Dart属于强类型语言，但是可以使用var来声明变量，Dart会推导出数据类型，但我习惯确定类型的话就还是主动声明类型，这样也可以在静态检查中提前发现问题，发挥出强类型的优势。

Dart同时也算半个动态类型语言，支持闭包；dynamic表示动态类型，被编译后实际是一个object类型，在编译期不进行类型检查，而是在运行期进行类型检查。

number类型分为int和double。

只有bool类型可用于if判断，不同于JS。

string类型.. 没什么好说的

变量

Dart可以使用var声明变量。使用final和const声明一个常量，const的值在编译期就确定，而final的值要在运行时才能确定。

类

Dart中没有public、private等修饰符，_开头命名的变量代表private。

class A {
    String name;
    String tag;

    A(this.name, this.tag);

    // 多构造函数
    A.empty();

    A.fromName(this.name);
}

异步

这部分和JS十分相像了。

Future对象，和Promise的用法基本一致，通过.then链式调用。

async/await是语法糖，最终还是编译为Future对象，之后通过.then进行下一步。

Future request() async {
    await http.get();
    return 'ok';
}
request.then(...)
await request() ...

Flutter

在flutter中一切都是Widget，Widget是一切的基础，利用响应式进行渲染。

Widget分为有状态和无状态一种，有状态会比无状态多一个State对象，用于刷新界面时数据的保存。

StatelessWidget

实现一个StatelessWidget很简单，继承StatelessWidget，重写build方法返回自己的布局。

class TestWidget extends StatelessWidget {
    final String str;
    TestWidget(this.str);
    @override
    Widget build(BuildContext context) {
        return Container();
    }
}

在StatelessWidget中的变量必须是final的，不然会有一个警告，StatelessWidget不会保存状态，所以在其中放置一个变量也是没有意义的。

StatefulWidget

StatefulWidget需要创建管理的是主要是 State

在State中有initState、dispose等声明周期方法。

class TestWidget extends StatefulWidget {
  TestWidget({Key key}) : super(key: key);

    // 创建一个State
  @override
  _TestWidgetState createState() => _TestWidgetState();
}

class _TestWidgetState extends State<TestWidget> {
  @override
  void initState() {
    // 初始化、只会执行一次
    super.initState();
  }

  @override
  void dispose() {
    // 销毁时
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Container(
       child: child,
    );
  }
}

类型	作用特点
MaterialApp	一般作为APP顶层的主页入口，可配置主题，多语言，路由等
Scaffold	一般用户页面的承载Widget，包含appbar、snackbar、drawer等material design的设定。
Appbar	一般用于Scaffold的appbar ，内有标题，二级页面返回按键等，当然不止这些，tabbar等也会需要它。
Text	显示文本，几乎都会用到，主要是通过style设置TextStyle来设置字体样式等。
RichText	富文本，通过设置`TextSpan`，可以拼接出富文本场景。
TextField	文本输入框：`new TextField(controller: //文本控制器, obscureText: "hint文本");`
Image	图片加载: `new FadeInImage.assetNetwork( placeholder: "预览图", fit: BoxFit.fitWidth, image: "url");`
FlatButton	按键点击: `new FlatButton(onPressed: () {},child: new Container());`
Row	Row(children: []) 横向排列布局，相当于横向的Flex
Column	Column(children: []) 纵向排列布局，相当于纵向的Flex

向.