最近开发需要,要接触移动端一些东西,所以看一下flutter。 因为移动端经常是要做一样事情就是即要有android平台,又要有ios平台,所以,选择了Flutter。 为什么不是React Native?因为,Flutter字比较少,而且不用打空格,我喜欢。
一、安装
- 下载
- 解压
- 设置path
- 开始
二、概念
- Flutter 一切都是widget,一个页面基本就是一根大树。
- Flutter的机制类似React或者Vue,所以,开发起来比较容易,只需要改数据即可,UI会根据数据的变更而变更,这一点是我喜欢的。
三、Widget类型
widget 有两种类型:
- 实际显示类型,一般有文字、图片等
- 布局类型,主要是看不见的,用于设置实际显示类型widget布局属性的widget,例如padding和margin。举个例子,一个实际显示类型的widget是不能直接加到树里的,它需要外包一个布局类型的widget,用于控制其布局。
弄清楚上面两种类型的widget之后,就很容易明白怎么布局UI了,按照这个套路制作各种复杂的界面。
四、一些小技巧
1. 一个控件如查平铺整个屏幕宽度?
Container(
// 这里把width改成double.infinity即可
width: double.infinity,
child: <Widget>[ ... ]
)
2. 使用Material式的自定义按钮
/// Icon widget
/// author: kut@sanlea.cn
///
class IconWidget extends StatelessWidget {
final IconData icon;
final String text;
final GestureTapCallback onTap;
IconWidget({this.icon, this.text, this.onTap});
@override
Widget build(BuildContext context) {
return Material(
color: Colors.black12,
borderRadius: BorderRadius.circular(10),
child: Ink(
child: InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(10),
child: Container(
width: 80,
padding: EdgeInsets.symmetric(vertical: 20),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
icon,
color: Colors.blueAccent,
textDirection: TextDirection.ltr,
),
Container(
margin: EdgeInsets.only(top: 5),
child: Text(text,
textAlign: TextAlign.center, textDirection: TextDirection.ltr, style: TextStyle(color: Colors.blueAccent)),
)
],
),
),
)
),
);
}
}