Flutter相关文档
1、官方文档
2、官方Demo(Github地址)
常用基础控件
不管在哪个前端平台，常用的基础控件都一样，大致包括：文本、图片、按钮、输入框、进度条、单选框和复选框、开关切换(Switch)、提示窗、对话框；布局用的控件(Layout)基本包含：横向布局、纵向布局、格子布局、重叠布局、各类包含不同约束条件的特定布局(内外间距，靠边居中，相对位置等)；然后是一些根据常用程度封装的控件包括：列表控件、滑动控件(横纵方向)，下拉刷新，抽屉(Drawer)等。
在Flutter中，控件分为StatefulWidget和StatelessWidget(有状态控件和无状态控件)，无状态控件是死的，不会动态更新，所以实际使用的时候大多数情况下都是封装自己的StatefulWidget，StatefulWidget的状态存储在对应的State类里面，需要更新的时候可以通过调用setState()方法来刷新页面。
StatefulWidget基本代码模板如下:
class DemoStatefulWidget extends StatefulWidget{
@override
State<StatefulWidget> createState() {
return DemoState();
}
}
class DemoState extends State<DemoStatefulWidget>{
var data;
@override
Widget build(BuildContext context) {
return Text(data);
}
void onDataChanged(newData){
setState(() {//刷新控件
data = newData;
});
}
}
接下来，按照上面梳理出的常用控件，我们一个一个来看。
文本 Text
Widget build(BuildContext context) {
retur Text(
"A text in container",
style: new TextStyle(
color: Color(0xFF0000CD), fontStyle: FontStyle.normal, fontSize: 15),
);
}
图片 Image
Image官方文档
基本使用
Widget build(BuildContext context) {
return Image.network(//图片来自网络
imageUrl,
width: 200.0,
height: 150.0,
);
/// Image.asset(name);//图片来自项目内的资源
/// Image.file(file);//图片来自文件
/// Image.memory(bytes);//图片来自内存
}
按钮 TextButton
Widget build(BuildContext context) {
return TextButton(
child: const Text('这是个按钮'),
onPressed: () {},
);
}
