太多教程繁琐、浪费时间,我们如果只从使用的角度出发,那么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)),
);
}),
);
}
}
暂时够用了,不够用时候再去查文档