flutter Widget初步了解与学习_flutter everything is a

flutter Widget初步了解与学习

flutter的核心设计思想是 Everything is a Widget。即一些都是Widget。在flutter世界里，views,view controllers,layouts等在内的概念都建立在Widget之上。
所以widget是flutter的抽象描述，一切都是widget，进而避免不了一切都是widget的嵌套。

例如

Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(“Sample App”),
),
body: new Center(
child: new Text(‘Hello’),
),
);
}
Scaffold 实现了基本的Material Design的布局结构。有AppBar，body(Widget)等、

1、Text

• Text的配置属性是很丰富的,属性主要分为两个部分一个是对齐&显示控制相关的在Text类的属性中，另一类是样式相关的属性使用单独的类TextStyle进行控制。

如

2、image

flutter中的图片缩放是fit字段缩放的，

2.1

默认的Image组件不能直接显示图片，他需要一个ImgaeProvider来提供具体的图片资源。在Image类中目前提供了一下几个实现好的ImageProvider，基本能满足常见的需求。

image也支持GIF图片
对于网络请求
imageCashe是ImageProvide默认使用的图片缓存。默认可以存储1000张图片。如果觉得缓存太大，可以通过设置ImageCache的maximumSize属性来控制缓存图片的数量。也可以通过设置maximumSizeBytes来控制缓存的大小（默认缓存大小10MB）。
CDN优化，如果想使用CDN优化，可以通过url增加后缀的方式实现。

2.2 FadeInImage

考虑到图片的加载速度可能不能达到预期。所以希望能增加渐入效果&增加placeHolder的功能，
如：
Image.asset(“lib/images/005.png”,
fit: BoxFit.contain,
width: 250,
height: 150),
FadeInImage.assetNetwork(
placeholder: “lib/images/003.png”,
image: “https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583410763363&di=232c6492b879e25cd7d96586b3fd11ac&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F68%2F61%2F300000839764127060614318218_950.jpg”,)

3 Container

Flutter 的设计思想就是完全widget化。这也就是说连最基本的padding,Center 都是Widget。Container本身也是一个Widget，提供了对基础widget
的封装，提高了UI的基础的装饰能力的表达效率

3.1 Decoration

Decoration是对Container进行装饰的描述，一般实际场景中会使用他的子类BoxDecoration。BoxDecoration提供了对背景色，边框，

圆角，阴影和渐变等功能的定制。

• BoxDecoration的image属性相当于设置的是背景图。但是image会绘制在color 和gradient之上。
• image是需要一个DecorationImage类的实现。DecorationImage的属性和Image组件比较类似，可以复用Image组件中的ImageProvider。

3.2

BoxConstrains其实是对Container组件大小的描述，

4

手势操作
在flutter中手势识别也是一个widget，通常可以通过GestureDetector类来完成点击事件的处理。使用时只需要将GestureDetector包裹在目标
widget外面。在实现对应事件的函数即可。

5、布局

页面布局应该是UI编写最为根本的知识，其主要的描述是父子组件子子组件之间的位置关系。

将布局分为单孩子和多孩子是Flutter布局的一大特色，单孩子组件主要继承自SingleChildRenderObjectWidget。这些组件能提供丰富的装饰能力（例如container），也能提供部分特定的布局能力（例如center）。多孩子组件继承自MultiChildRenderObjectWidget，能提供更加丰富的布局能力（Flex,Stack,flow）,但几乎没有装饰的能力。下面介绍几个重点布局：

Flex
Flex布局在flutter中体现的是Row，Column。Row和Column差别的设置了不同的flex-direction

child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Container(
height: 30,
decoration: new BoxDecoration(color: Colors.grey), //decoration：绘制在child后面的装饰，设置了decoration的话，就不能设置color属性，否则会报错，此时应该在decoration中进行颜色的设置。
// color: Colors.red,
padding: EdgeInsets.all(5.0),
child: new Row(
children: [
Container(
margin: EdgeInsets.only(left: 10),
child: Text(“data”),
)
],
),
),
flex: 1,
),
Expanded(
child: Container(
color: Colors.yellow,
padding: EdgeInsets.all(5.0),
),
flex: 2,
),
Expanded(
child: Container(
color: Colors.blue,
padding: EdgeInsets.all(5),
),
flex: 1,
),
],
),
效果图

stack
在实际开发中，还是需要在一些Widgets的上面在覆盖上新的Widgets。这时候就需要层式布局了。这种布局在Native上，
在实际使用中Stack中的子Widgets分为两种

·positioned
是包裹在组件Positioned中的组件
可以通过Positioned属性灵活定位
·non-positioned
没有包裹在Positioned组件中
需要通过父Widget Stack的属性来控制布局
对于non-positioned chlidren.我们通过控制Stack的alignment属性来控制对齐方式。Positioned的布局方式类似于H5&weex中的position布局中的absolute布局方式。通过设置距离父组件上下左右的距离，Positioned对象能在Stack布局中更加灵活的控制view的展现方式。

Widget stackList = new Stack(
alignment: Alignment(0.6, 0.6),
children: [
new CircleAvatar(
backgroundImage: new AssetImage(‘lib/images/001.png’),
radius: 100.0,
),
new Container(
margin: EdgeInsets.only(bottom: 40),
child: Text(“小鸡”),
),
new Container(
decoration: BoxDecoration(
color: Colors.black45,
),
child: Text(
‘Mia B’,
style: new TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
),
Positioned(
left: 40.0,
top: 40,
child: new Container(
color: Colors.pink,
height: 20.0,
width: 85.0,
alignment: Alignment.center,
child: Text(“Positioned”),
),
)
],
);

6 Visibility

那么组件是否显示是怎样控制的呢？

6.1 删除法

核心将真实的widget或者widget树从renderTree中移除
具体到实践级别主要分为两个：
·单个组件“隐藏”自己。在build方法中返回一个空的Container

isVisible? Container(
height: 25,
margin: EdgeInsets.all(5),
child: RaisedButton(
child: Text(‘Text’),
onPressed: () => Navigator.push(context,
MaterialPageRoute(builder: (context) => Component())),
),
): Container(),
此时注意UI布局
·多个child
在父容器的childern字段list中，删除对应的cell

6.2 Offstate

Offstate是一个widget。Offstate的offstate属性设置为true。那么Offstate以及它的child将不会被绘制到界面上。
Offstage(
offstage: isVisible,
child: Row(),
)

6.3 透明度，

设置widget的透明度，使之不可见。但是这样的方法是副作用的。因为这个对应的widget树是已经经过了完整的layout&paint过程，成本高。同时设置透明度本身也要耗费一定的计算资源，造成了二次浪费。需要注意的是即便变透明了，占据的位置还在。大家慎重选择使用。

7

为什么widget都是immutable
提高渲染效率，组件描述的复用。widget可以以较低的成本进行复用，在一个真实的渲染树中可能存在同一个widget渲染树中不同节点的情况

widget 是view吗
widget是对页面UI的一种描述。widget在渲染的时候会转化成element，Element相比widget相比于widget增加了上下文的信息。。element是对应widget，在渲染树的实例化节点。由于widget是immutable的，所以同一个widget可以同时描述多个渲染树中的节点。
所以同一个widget可以同时描述多个渲染树中的节点。但是Element是描述固定在渲染书中的某一个特定位置的点。简单点说widget作为一种描述是可以复用的，但是element却跟需要绘制的节点一一对应。element绘制时会转化成rendObject。RendObject才是真正经过layout的paint并绘制在屏幕上的对象，在flutter中有三套渲染相关的tree，分别是widget tree element tree &rendObject tree。

那可能有人会问，为什么需要增增加中间这层的Element tree？

flutter是响应式的框架。在某一时刻页面的布局，可能受不同的输入源的影响。
Element这层实际上做了对某一时刻事件的汇总，在将真正需要修改的部分同步到真实的
rendObject tree上。

1.不需要直接操作UI，改为通过数据驱动视图。代码表达可以更加精炼。
2.最大层度降低对最终真实视图(rendObject tree)的修改，提高页面渲染效率。

StatelessWidget 和StatefulWidget的区别

StatelessWidget是状态不可变的widget。初始状态设置以后就不可变化，。如果需要变化需要重新创建，StatefulWidget可以保存自己的状态。那问题既然是widget都是immutable的，怎么保存状态呢？Flutter通过引入State来保存状态的，当State的状态改变的时候，能重新构建本节点以及孩子的Widget树来进行UI变化的。如果需要主动改动State的状态，需要通过setState()方法进行触发。单纯改变数据是不会引发UI改变的

Dart

1、健全的类型系统，同时支持静态类型检查和运行时类型检查
2、代码体积优化（Tree Shaking） 只保留运行时需要调用的代码（不允许反射这样的隐式引用），所以庞大的Widgets库不会造成发布体积过大。
3、富的底层库，Dart自身提供了非常多的库。
4、多生代无锁垃圾回收器，专门为UI框架中常见的大量Widgets对象创建和销毁优化。
5、跨平台，iOS和Android共用一套代码。
6、JIT & AOT运行模式，支持开发时的快速迭代和正式发布后最大程度发挥硬件性能。

基本概念
都继承自Object类
虽然Dart是强类型语言，但是显式变量类型声明是可选的，Dart支持类型推断。如果不想使用类型推断，可以用dynamic类型。
Dart支持泛型，List表示包含int类型的列表，List则表示包含任意类型的列表。
Dart支持顶层函数和类 class 成员函数，也支持嵌套函数和本地函数

Dart支持顶层变量和类成员变量

Dart 没有public protected private 使用下划线“_” 开头的变量或函数，表示只在库内可见。