Flutter学习笔记

前言

做了4年多Android原生开发了，由于项目需要，需要用Flutter开发，之前没有接触过Flutter，现在开始恶补一下。接触了2天Flutter，虽然开发环境和之前一样，都是用的Android Studio，但是还是不熟悉Flutter的Dart语法和基本的组件，按照UI图，不能做出那种效果。于是开始从基础组件再学习一遍，顺便记录下。

Flutter基础教程

学习教程目前是参考Dart语言教程，学习Dart基本语法，然后参考Flutter中文网，根据文档一步步，从搭建环境到写出第一个Flutter Demo，到这里对Flutter基本有了一个了解，但是widget组件用的不多，还需要学习其他的组件。
由于刚接触，没有经验，从腾讯课堂找了些免费的Flutter视频教程。亢少军的教程，《Flutter开发之组件大全（学习版）》和《Flutter女装商城实战（学习版）》。

Flutter组件

Align对齐组件

// Align定义
const Align({Key key,this.alignment = Alignment.center,this.widthFactor,this.heightFactor,Widget child,})// 使用方法
Scaffold(appBar: AppBar(title: Text('Flutter组件'),),body: Container(color: Colors.red,child: Align(//对齐方式//alignment: Alignment.centerLeft,// 对齐方式使用x,y来表示，范围是-1.0到1.0alignment: Alignment(-1.0, 1.0),//父容器未指定宽高时，widthFactor设置父容器是子容器的大小的几倍widthFactor: 2.0,heightFactor: 2.0,child: Container(width: 100,height: 50,color: Colors.blue,child: Text('Align组件',style: TextStyle(color: Colors.white, fontSize: 20.0),),),),),);

AppBar组件

	AppBar(backgroundColor: Colors.blue,//背景颜色leading: Icon(Icons.home),//左侧图标centerTitle: true,//居中标题title: Text('产品'),actions: <Widget>[IconButton(tooltip: '搜索',icon: Icon(Icons.search,color: Colors.white,),onPressed: () {print('点击事件');},),//右侧菜单按钮PopupMenuButton<String>(itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[//菜单项PopupMenuItem<String>(value: 'friend',child: Text('分享到朋友圈'),),PopupMenuItem<String>(value: 'download',child: Text('下载到本地'),),],),],)

BottomAppBar

底部应用栏

	Scaffold(floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,floatingActionButton: FloatingActionButton(onPressed: null,child: Icon(Icons.add),),bottomNavigationBar: BottomAppBar(notchMargin: 10.0,color: Colors.green,child: Row(mainAxisSize: MainAxisSize.max,mainAxisAlignment: MainAxisAlignment.spaceBetween,children: <Widget>[IconButton(icon: Icon(Icons.menu),onPressed: () {},),IconButton(icon: Icon(Icons.search),onPressed: () {},),],),),);

ButtonBar

dialog 确定、取消

Center(//末端按钮对齐的容器child: ButtonBar(//对齐方式 默认为末端endalignment: MainAxisAlignment.center,//child大小mainAxisSize: MainAxisSize.min,children: <Widget>[RaisedButton(child: Text('按钮1'),color: Colors.blue,onPressed: () {},),RaisedButton(child: Text('按钮2'),color: Colors.blue,onPressed: () {},),RaisedButton(child: Text('按钮3'),color: Colors.blue,onPressed: () {},),],),);