您现在的位置是：首页 >技术教程 >三天快速学习flutter（一）网站首页技术教程

   太多教程繁琐、浪费时间，我们如果只从使用的角度出发，那么flutter的学习曲线可以缩短很多，一、布局，二、事件，三、动画

  布局解决能看到什么东西，事件决定能做什么事情，动画让布局和事件拥有更好的体验。搞定这三样，就可以从事基本的开发了。

  一、布局：单子布局、多子布局和列表。

1、单子布局：顾名思义就是单个控件的布局模式，有很多但是我们只认识一个container，其他的单子布局，只需要知道它们的简单特性，在需要用到时，才去了解。

container：

Container({
    Key? key,
    this.alignment, //对齐方式
    this.padding,//内边距
    this.color,// 背景色
    this.decoration,// 背景装饰
    this.foregroundDecoration,//前景装饰
    double? width,//容器的宽度
    double? height,//容器的高度
    BoxConstraints? constraints,//容器大小的限制条件
    this.margin,//外边距，不属于decoration的装饰范围
    this.transform,
    this.transformAlignment,
    this.child,//变换
    this.clipBehavior = Clip.none,
  }) 

Container(
      color: Color.red,
      width: 100,
      height: 100,
      child: Icon(
        Icons.pets,
        size: 30,
      ),
    )

Align：居左居右居中等对齐方式

Center：居中，实际上Center也是继承Align,是将alignment设置为Alignment.center。

Padding：通常用于设置子Widget到父Widget的边距（你可以称之为是父组件的内边距或子Widget的外边距）

Positioned：绝对布局

2、多子布局：将多个Widget放在一起进行布局，比如水平方向、垂直方向排列，甚至有时候需要他们进行层叠，比如图片上面放一段文字等；这个时候我们需要使用多子布局组件。

Row、Column：水平、垂直线性布局，没什么好说的

Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.end,
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Expanded(
          flex: 1,
          child: Container(color: Colors.red, height: 60),
        ),
        Container(color: Colors.blue, width: 80, height: 80),
        Container(color: Colors.green, width: 70, height: 70),
        Expanded(
          flex: 1,
          child: Container(color: Colors.orange, height: 100),
        )
      ],
    )

Stack：堆叠布局，如果需要控件重叠的，就用Stack

3、列表：ListView和GridView

ListView.builder(
      itemCount: 100,
      itemExtent: 80,
      itemBuilder: (BuildContext context, int index) {
        return ListTile(title: Text("标题$index"), subtitle: Text("详情内容$index"));
      }
)

class GridCountDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // GridView构造函数
    return GridView(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3, // 交叉轴的item个数，简单来说就是多少列
            mainAxisSpacing: 10, // 主轴的间距
            crossAxisSpacing: 10, // 交叉轴的间距
            childAspectRatio: 1.0 // 子Widget的宽高比
        ),
        children: List.generate(100, (index) {
          return Container(
            color: Colors.purple,
            alignment: Alignment(0, 0),
            child: Text("item$index", style: TextStyle(fontSize: 20, color:Colors.white)),
          );
        }),
      );
  }
}

暂时够用了，不够用时候再去查文档