三天快速学习flutter（一）

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

  基础是语法，布局解决能看到什么东西，状态是机制，事件决定能做什么事情，网络是数据，动画让布局和事件拥有更好的体验。搞定这几样，就可以从事基本的开发了。

一、基本语法

下面是Dart语言的基本语法、变量、数据类型、条件语句、循环语句等的举例说明：

变量定义和赋值：

var name = 'Alice'; // 定义一个字符串类型的变量
var age = 25; // 定义一个整数类型的变量
var isStudent = true; // 定义一个布尔类型的变量

数据类型：Dart支持多种数据类型，包括基本数据类型和复杂数据类型。

var num = 3.14; // 浮点数类型
var str = 'Hello, world!'; // 字符串类型
var bool = true; // 布尔类型
var void = null; // 空类型
var numList = [1, 2, 3]; // 列表类型
var map = {'name': 'Alice', 'age': 25}; // 映射类型

条件语句：Dart支持if语句和三元运算符用于条件判断。

var num = 10;
if (num > 0) {
  print('正数');
} else if (num < 0) {
  print('负数');
} else {
  print('零');
}

// 三元运算符
var num = 5;
var result = num > 0 ? '正数' : num < 0 ? '负数' : '零';
print(result);

循环语句：Dart支持for循环、while循环和do-while循环。

// for循环
for (var i = 0; i < 10; i++) {
  print(i);
}

// while循环
var i = 0;
while (i < 10) {
  print(i);
  i++;
}

// do-while循环
var i = 0;
do {
  print(i);
  i++;
} while (i < 10);

列表推导式：Dart支持使用列表推导式来快速创建新的列表。

var numList = [1, 2, 3, 4, 5];
var squaredList = [num * num for num in numList]; // 计算每个数字的平方
print(squaredList); // 输出 [1, 4, 9, 16, 25]

方法：Dart中的方法类似于其他编程语言中的函数，可以接受参数并返回值。

// 定义一个方法，计算两个数字的和
int add(int a, int b) {
  return a + b;
}// 调用方法并输出结果
var num1 = 3;
var num2 = 5;
var sum = add(num1, num2);
print(sum); // 输出 8

异常处理：Dart支持使用try-catch语句来捕获和处理异常。

try {
  // 尝试执行可能会抛出异常的代码
  var result = division(8, 0); // 这里会抛出一个除以零的异常
  print(result);
} catch (exception) {
  // 捕获异常并处理
  print('发生了异常：$exception');
}

类和对象：Dart支持面向对象编程，可以使用类和对象来创建自定义的数据结构和行为。

class Person {
  String name;
  int age;

  Person(this.name, this.age); // 构造函数

  void sayHello() { // 一个方法
    print('Hello, my name is $name and I am $age years old.');
  }
}

// 创建一个Person对象并调用它的方法
var person = Person('Alice', 25);
person.sayHello(); // 输出 "Hello, my name is Alice and I am 25 years old."

继承和多态：Dart支持通过继承和接口实现多态。

class Animal {
  void makeSound() {
    print('动物发出声音');
  }
}

class Cat : Animal {
  void makeSound() {
    print('猫发出喵喵的声音');
  }
}

void main() {
  var animal = Animal();
  var cat = Cat();  animal.makeSound(); // 输出 "动物发出声音"
  cat.makeSound(); // 输出 "猫发出喵喵的声音"
}

匿名函数和闭包：Dart支持使用匿名函数和闭包来创建可变的函数和变量。

// 匿名函数
var add = (a, b) => a + b;
var sum = add(3, 5);
print(sum); // 输出 8

// 闭包
var counter = 0;
var increment = () => counter++;
increment(); // 调用闭包，输出 1
increment(); // 再次调用闭包，输出 2

这些是Dart语言的一些基本语法和特性。Dart是一种功能强大且易于学习的编程语言，适用于开发各种类型的应用程序，包括Web应用程序、移动应用程序和桌面应用程序。
 

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

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)),
          );
        }),
      );
  }
}

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