Flutter基础

StatelessWidget基础组件: 内部没有需要改变的状态。

Container, Text, Icon, CloseButton关闭按钮, BackButton返回按钮,
Clip , Divider分割线, Card卡片(带有圆角、阴影边框等的卡片), AlertDialog弹框.

Clip：材料设计中，有趣的小组件。
[Clip介绍] (https://material.io/design/components/clips.html)

    Clip(
        avatar:Icon(Icons.people), label:Text('文本内容'),
    )
    Divider(
        height:10, // 分割线容器高度
        indent：10, // 左侧间距
        color：Colors.red,
    ) // 也可以用Container画一根线，作为分割线。
    AlertDialog(
        title:Text('标题'),
        content:Text('你个糟老头子坏得很！'),
    )

StatefullWidget 基础组件:

> MaterialApp, Scaffold, AppBar, BottomNavigationBar, RefreshIndicator,
> Image, TextField输入框, PageView左右滑动组件.

布局开发

Container。
RenderObjectWidget：
SingleChildRenderObjectWidget单节点布局组件
Opacity透明度，ClipOval裁剪圆角矩形，ClipRRect裁剪方形，
PhysicalModel将布局显示成不同的形状(给布局裁切圆角)，Align~Center，
Padding，SizedBox约束布局大小，FractionallySizedBox约束水平或垂直方向伸展。
MultiChildRenderObjectWidget多节点
Stack叠加效果，Flex(Column，Row)，Wrap(从左到右排列，会自动换行)，Flow。
ParentDataWidget：
Positioned，Flexible，Expanded拉伸布局。

CircleAvatar：圆形头像。

_clip(String label) {
    return Clip(
        label:Text(label),
        avatar: CircleAvatar(background: Colors.blue.shade900,
            child: Text(label.substring(0,1), style:TextStyle(fontSize: 10))
        ),
    );
}   

监听用户手势和点击行为：

GestureDetector（onTap,onLongPress,onDoubleTap,onTapCancel,
    onTapUp,onTapDown,onTabUpdate）
// 小球手指跟随移动。
Positioned(
    left:moveX, top:moveY,
    child: GestureDetector(
        onPanUpdate: (e) => _doMove(e),
        child: Container(
            width:90, height: 90,
            decoration: BoxDecoration(color: Colors.red,
                borderRadius: BorderRadius.circle(45),
            ),
        )
    )
)   
_doMove(DragUpdateDetails e){
    setState((){
        moveX += e.delta.dx;
        moveY += e.delta.dy;
    });
}