Flutter 框架、基础介绍

Flutter 是由零散的组件组成的，组件就和平时Android开发中看见的控件是一样的，相当于ImageView\TextView 等，在使用Flutter 之前，有必要了解Flutter的组件，

上一篇Mac pro 搭建Flutter 开发环境和第一个Flutter程序在项目路径下的lib文件夹下的main.dart文件就是我们要写Flutter代码文件，

import 'package:flutter/material.dart'; //导包
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialAp
}

material 包是Flutter实现Material Design 设计风格的基础包，包含Text、Icon、Image等等基础组件，还有一些布局组件，每个项目中的lib/下的main.dart文件就是程序的入口，确切的说是main.dart文件中的main()函数 void main() => runApp(new MyApp());
这句代码，

控件

widget 是Flutter构建UI的基本模块是统一的对象模型（就是其他的框架可能是视图和控制器都是可以分离的）不能分离

在Dart代码中，如果定义类时继承了StatelessWidget或StatefulWidget抽象类，说明该类是StatelessWidget或StatefulWidget抽象类的子类，即Flutter控件类。在Flutter框架中，控件类又细分为有状态控件类（继承StatefulWidget抽象类）和无状态控件类（继承StatelessWidget抽象类），两者的差别在于是否有状态。
这里写图片描述

StatelessWidget 无状态的组件
其控件是不携带状态的（就像一个人脸上的五官的位置是没有携带可变的状态的）只是用来展示等功能，

使用方式，用自定义的组件去继承StatelessWidget
下面是一个展示背景颜色为红色的组件代码

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new Container(
    title:'hello flutter',
      color: Colors.red,
    );
  }
}

Container 容器

一个无状态的组件

有状态的组件

StatefulWidget ：有状态就是可以动态改变其中的值等

案例：点击添加傍边的text组件显示增加

定义一个类继承StatefulWidget

class Counter extends StatefulWidget {
  @override
  raisedButtonState createState() => new raisedButtonState();
}

class raisedButtonState extends State<Counter> {
  int _counter = 0;
  void _increment() {
            //在Flutter的反应风格框架中，调用setState()触发器调用build()State对象的方法，从而导致对UI的更新
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Row(
      children: <Widget>[
        new RaisedButton(
          onPressed: _increment,
          child: new Text('添加'),
        ),
        new Text('Count: $_counter'),
      ],
    );
  }
}

setState : 在Flutter的反应风格框架中，调用setState()触发器调用build()State对象的方法，从而导致对UI的更新

运行一下：
这里写图片描述

点击添加组件中的值改变

下一篇介绍点击事件（书写方式和文件的归类在之后做项目的时候慢慢记录）

转载请注明图你怀中安稳https://blog.csdn.net/qq_32648731/article/details/80021199

我学习的整个过程的项目地址 https://github.com/kongxiaoan/flutter_app

Flutter 框架、基础介绍

控件

有状态的组件

猜你喜欢