Flutter基础知识-基础篇

目录结构

• android/：android平台相关代码
• ios/：ios平台相关代码
• lib/：flutter相关代码，主要在这个文件夹下开发
• test/：存放测试代码
• pubspec.yaml/：配置文件，一般存放一些第三方库的依赖

基础

• 每个flutter项目的lib/目录下都有一个main.dart文件，这个文件就是flutter项目的入口文件

• lib/main.dart文件中有个main()方法，这个方法就是入口方法

• 文件中都需要引入import 'package:flutter/material.dart';

• 所有的组件类都是Widget，继承自StatelessWidget/StatefulWidget。如果想改变页面中的数据，需要用StatefulWidget

• 在vscode中，如果某个组件不知道有什么属性，或者属性是什么类型等。可以按住Ctrl键，点击对应的组件，进入该组件的源代码查看

StatelessWidget

• 无状态组件，状态不可变的widget

StatefulWidget

• 有状态组件，持有的状态可能在widget生命周期改变

• 使用setState改变数据，这样在视图中能更新

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

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int countNum = 0;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        SizedBox(height: 200,),
        Chip(
          label: Text("${this.countNum}"),
        ),
        SizedBox(height: 20,),
        RaisedButton(
          child: Text('button'),
          onPressed: (){
            setState(() { // 只有有状态组件才有
              this.countNum++;
            });
          },
        )
      ],
    );
  }
}

生命周期

initState

• 初始化的生命周期函数

@override
void initState() {
  super.initState();
  // do something ...
}

dispose

• 组件销毁时触发的生命周期函数

@override
void dispose() {
  super.dispose();
  // do something ...
}

相关文章

• Dart基础知识
• Flutter基础知识-环境搭建
• Flutter基础知识-基础篇
• Flutter基础知识-布局篇
• Flutter基础知识-路由篇
• Flutter基础知识-动画篇