Flutter Widget框架简单了解

介绍

Flutter Widget是响应式框架构，Flutter构架UI都是用Widget进行构建的。当widget 的状态发生改变的时候回进行重新的刷新界面。

实例

对于Android开发来说每一个控件都可以用widget来进行表示：

import 'package:flutter/material.dart';

void main() {
  runApp(
    new Center(
      child: new Text(
        'Hello, world!'
      ),
    ),
  );
}

widget有两种方式：有状态的方式StatefulWidget和无状态的StatelessWidget.Widgetde的主要工作实现就是有一个build函数进行实现的。可以参考一下这个流程图：

这一个简单的两种状态的差别。

Widgetde 基础组件

大体了解一下widget一些简单的组件内容。

Text

Text(
       'name',
        style: TextStyle(
        fontSize: 30.0,//大小
        color: Colors.blue //颜色
      ),

    );

很简单，自己敲一下就明白了。点进去看Text也能明白所有的属性。

Image

Image组件是不能直接显示图片的需要一个ImageProvider来提图片资源才可以进行显示。目前是提供了四种方法来后去图片的来源。

ImageProvider	途径
Image.asset	从asset资源文件获取
Image.network	网络获取
Image.file	从本地文件获取
Image.memory	从内存中获取

从网络获取

Image.network(
        "url地址",
      fit: BoxFit.contain,
      width: 200.0,
      height: 200.0,
    );

属性可以自己看源码。

transform 矩阵变换

new Container(
    child: new Container(
      color: Colors.purple,
      child: new Text("hello", style: new TextStyle(fontSize: 40.0)),
    ),
    alignment: Alignment.center,
    width: 200.0,
    height: 200.0,
    decoration: new BoxDecoration(
        gradient: const RadialGradient(
            colors: [Colors.lightBlue, Colors.greenAccent, Colors.purple
            ])),
    foregroundDecoration: new BoxDecoration(
      border: new Border.all(
          color: Colors.redAccent,
          width: 10.0,
          style: BorderStyle.solid),
    ),
    margin: const EdgeInsets.all(20.0),
    transform: new Matrix4.rotationZ(0.5)
));

先写这一丢丢，有事外出。1.1 后面补齐。

对Flutter Widget的理解（1.1）