flutter学习笔记（二）

方小川的前端博客 / 2023-06-04 / 原文

flutter一切皆widget

flutter和web前端的区别：

1.js语法变成dart

2.html标签变成组件widget

3.flutter里没有css，只有各种widget的属性来实现样式（比如绝对定位用Stack组件来实现）

1.dart语法接近js

2.flutter里也可以实现flex弹性布局，用Expanded来实现（Expanded只能为Row/Column/Flex的子组件）

3.状态管理类似react一样，有setState来设置状态，包含有状态组件StatefulWidget，无状态组件StatelessWidget

类型	作用特点
MaterialApp	一般作为APP顶层的主页入口，可配置主题，多语言，路由等
Scaffold	一般用户页面的承载Widget，包含appbar、snackbar、drawer等material design的设定。
Container	只有一个子 Widget。默认充满，包含了padding、margin、color、宽高、decoration 等配置。
Padding	只有一个子 Widget。只用于设置Padding，常用于嵌套child，给child设置padding。
Center	只有一个子 Widget。只用于居中显示，常用于嵌套child，给child设置居中。
Stack	可以有多个子 Widget。子Widget堆叠在一起。
Column	可以有多个子 Widget。垂直布局。
Row	可以有多个子 Widget。水平布局，只有一行，超出不会换行，会溢出报错，如需自动换行请用Wrap代替。
Expanded	只有一个子 Widget。在 Column 和 Row 中使用，会自动填满剩余位置。
ListView	可以有多个子 Widget。用于列表显示。
Text	显示文本，几乎都会用到，主要是通过style设置TextStyle来设置字体样式等。
TextField	文本输入框：`new TextField(controller: //文本控制器, obscureText: "hint文本");`
Image	加载本地图片：Image.asset("images/avatar.png",width: 100.0,); 加载网络图片：Image.network("https://avatars2.githubusercontent.com/u/20411648",width: 100.0);