2024年Flutter零基础极速入门到进阶实战
xia栽の地止：
lexuecode.com/7365.html
快速上手Flutter开发
Android开发者如何快速上手Flutter开发
LinearLayout 在Flutter中等价于什么(Android)？ 在Android中，使用LinearLayout来使你的控件呈水平或垂直排列。在Flutter中，你可以使用Row或Column widget来实现相同的结果：
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Row One'),
Text('Row Two'),
Text('Row Three'),
Text('Row Four'),
],
);
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Column One'),
Text('Column Two'),
Text('Column Three'),
Text('Column Four'),
],
);
}
要了解有关构建线性布局的更多信息，可参考区贡献的媒体文章Flutter For Android Developers : How to design LinearLayout in Flutter?。
RelativeLayout 在Flutter中等价于什么(Android)？ RelativeLayout用于使widget相对于彼此位置排列。在Flutter中，有几种方法可以实现相同的结果
您可以通过使用Column、Row和Stack的组合来实现RelativeLayout的效果。您可以为widget构造函数指定相对于父组件的布局规则。
推荐参考在StackOverflow上的一个在Flutter中构建RelativeLayout的例子。
如何使用widget定义布局属性? 在Flutter中，布局主要由专门设计用于提供布局的小部件定义，并结合控件widget及其样式属性。
例如, 列 和 行 widgets 控制一个数组中的条目 并且 分别垂直和水平对齐它们。 Container widget 控制一个布局的样式和属性, 并且 Center widget 负责居中它的子widget。
// Flutter
Center(
child: Column(
children: <Widget>[
Container(
color: Colors.red,
width: 100.0,
height: 100.0,
),
Container(
color: Colors.blue,
width: 100.0,
height: 100.0,
),
Container(
color: Colors.green,
width: 100.0,
height: 100.0,
),
],
),
)
Flutter在其核心widget库中提供了各种布局小部件
iOS开发者如何快速上手Flutter开发
-
布局方式：iOS中的布局主要依赖于约束和自动布局，而Flutter中的布局则是通过Widget的嵌套和组合来实现的。Flutter提供了丰富的Widget来构建各种布局，如Row、Column、Stack等。
-
灵活性：由于Flutter的布局是基于组合的，因此它在布局上更加灵活。你可以将多个Widget嵌套在一起，以任意的方式组合和排列。这使得Flutter可以更容易地实现复杂的布局和交互效果。
-
响应式布局：Flutter中的布局是响应式的，可以自动适应不同屏幕尺寸和设备方向的变化。通过使用Flutter的弹性容器和自适应布局，你可以轻松实现响应式的UI设计。
-
布局约束：在Auto Layout中，使用约束条件来定义视图之间的关系和相对位置。而在Flutter中，可以使用各种布局Widget来指定子Widget的位置和尺寸，如Align、Padding和Expanded等。
-
动画和过渡效果：在iOS中，你可以使用Core Animation来创建动画和过渡效果。而在Flutter中，动画和过渡效果是作为Widget的一部分来实现的，你可以使用Flutter提供的动画库和过渡效果来创建丰富的动画效果。
React Native 开发者如何快速上手Flutter开发
像React Native一样, Flutter使用反应式视图.然而,相比于RN转换原生控件,Flutter则编译为原生代码. Flutter控制屏幕上的每个像素,这避免了由于需要JavaScript桥接而导致的性能问题
Dart是一种易于学习的语言，并提供以下功能:
提供用于构建Web的开源，可伸缩编程语言， 服务器和移动应用程序。 提供使用C风格的面向对象的单继承语言AOT编译成本机的语法。 可选地转换为JavaScript。 支持接口和抽象类。 下面描述了JavaScript和Dart之间差异的一些示例。
入口点 JavaScript没有预定义的入口函数 - 您可以定义入口点.
// JavaScript
function startHere() {
// Can be used as entry point
}
在Dart中，每个app都必须有一个顶级的main（）函数作为应用程序的入口点。
// Dart
main() {
}
尝试一下 DartPad.
打印到控制台
要在Dart中打印到控制台，请使用print。
// JavaScript
console.log("Hello world!");
// Dart
print('Hello world!');
变量 Dart是类型安全的 - 它使用静态类型检查和运行时的组合,检查以确保变量的值始终与变量的静态值匹配 类型。尽管类型是必需的，但某些类型注释是可选的，因为 Dart执行类型推断。
创建和分配变量 在JavaScript中，无法定义变量类型。
在 Dart中, 变量必须是明确的 类型或系统能够解析的类型。
// JavaScript
var name = "JavaScript";
// Dart
String name = 'dart'; // Explicitly typed as a string.
var otherName = 'Dart'; // Inferred string.
// Both are acceptable in Dart.
默认值 在JavaScript中，未初始化的变量是 undefined。
在Dart中，未初始化的变量的初始值为“null”。因为数字是Dart中的对象，所以只要是带有数字类型的未初始化变量 的值都是“null”。
// JavaScript
var name; // == undefined
// Dart
var name; // == null
int x; // == null
检查null或零 在JavaScript中，1或任何非null对象的值被视为true。
// JavaScript
var myNull = null;
if (!myNull) {
console.log("null is treated as false");
}
var zero = 0;
if (!zero) {
console.log("0 is treated as false");
}
在Dart中，只有布尔值“true”被视为true。
// Dart
var myNull = null;
if (myNull == null) {
print('use "== null" to check null');
}
var zero = 0;
if (zero == 0) {
print('use "== 0" to check zero');
}
尝试一下 DartPad.
Functions
Dart和JavaScript函数通常类似。主要区别是声明。
// JavaScript
function fn() {
return true;
}
// Dart
fn() {
return true;
}
// can also be written as
bool fn() {
return true;
}
异步编程 Futures 与JavaScript一样，Dart支持单线程执行。在JavaScript中，Promise对象表示异步操作的最终完成（或失败）及其结果值
Dart使用 Future 对象提交到这里.
// JavaScript
_getIPAddress = () => {
const url="https://httpbin.org/ip";
return fetch(url)
.then(response => response.json())
.then(responseJson => {
console.log(responseJson.origin);
})
.catch(error => {
console.error(error);
});
};
// Dart
_getIPAddress() {
final url = 'https://httpbin.org/ip';
HttpRequest.request(url).then((value) {
print(json.decode(value.responseText)['origin']);
}).catchError((error) => print(error));
}
