Flutter学习之旅
安装/配置
请看官网：
遇到问题
配置创建第一工程过程中，可能会回到一步在卡在gradle这一步：
Running 'gradle assembleDebug
解决方案
语法
入口函数
方式一
main(){
}
方式二
void main(){
}
变量
dart是一门强大的脚步类语言，可以不预先定位变量的类型，会自动推断类型
var s1 = ‘hello’
String s2 = ‘hello’
注：var后不要加类型，写了类型就不要加var
类里的变量加上下划线(_)可以使之变为私有的，如同private关键字
命名规则
- 变量命名必须有数字、字母、下划线和美元符号($)组成
- 标识符开头不能是数字
- 标识符不能是保留字和关键字
- 变量名字是区分大小写的
常量
final(运行时变量)
开始可以不赋值，只赋值一次
const(编译是变量)
值不变，一开始就赋值
数据类型(常用)
- Number(数值)
int
double - String(字符)
String，单引号，双引号，三个单引号(适用于多行)，三个双引号(适用于多行)
拼接使用 符 号 、 + 号 ， 如 S t r i n g s 1 = ′ h e l l o ′ ; S t r i n g s 2 = ′ w o r l d ′ ; S t r i n g s 3 = ′ 符号、+号，如 String s1 = 'hello'; String s2 = 'world'; String s3 = ' 符号、+号，如Strings1=′hello′;Strings2=′world′;Strings3=′s1 $s2’ //hello world
String s4 = s1 + s2 //hello world - Booleans
bool - List(数组)
Dart中，数组是列表对象 - Maps(字典)
map初始化方式一
var map1 = {
“key1”:“value1”,
“key2”:“value2”,
“key3”:“value3”
}初始化方式二
var map2 = new Map()
map2[‘key1’] = ‘value1’;
map2[‘key2’] = ‘value2’;
map2[‘key3’] = ‘value3’;
map2.keys;//获取所有的key
map.values;//获取所有的value
类型判断(is)
var s1 = ‘hello’;
if(s1 is String){
}
运算符(与java基本类似)
赋值运算符 = ??=
String s1;
s1 ??= ‘hello’;//表示如果s1为空的话，把’hello’赋值给s1
for循环
- (var i = 0;i < length;i++){}
- for(var item in list){}
- list.forEach((value){});
- map.forEach((key,value){});
- newList = list.map((value){//返回原集合中个元素*2的组成新的集合
return value * 2;
}) - newList = list.where((value){//返回原集合中大于10的元素组成新的集合
return value > 10;
}) - newList = list.any((value){//判断原集合中的元素是否有大于10的
return value > 10;
}) - newList = list.every((value){//判断原集合中的元素是否都大于10
return value > 10;
})
函数(方法)
- 函数内部可以嵌套函数
- 可选参数使用中括号，如
void func(int a,[int b=1,int c]){} //其中，b,c为可选参数
3.命名参数使用大括号，如
void func(int a,{int b,int c}){} //其中，b,c为命名参数
调用
func(1,b=2,c=4)
闭包
概念：函数嵌套函数，嵌套的函数会调用外部函数的变量或参数，变量或参数不会被系统回收
写法：函数嵌套函数，并return里面的函数，这样就形成闭包
类
？条件运算符(同kotlin),如：
Object ob;
ob?.toString()
as 类型转换
is 类型判断
… 级联操作(连缀)
class User{
int age;
String name;
}
User user = new User();
user..age=10
..name="Tim";
初始化列表(执行构造函数前执行)
class User{
int age;
String name;
User()in age=11,name='Tim'{
}
}
class SubUser extend User{
SubUser():supter(){}
}
复写
@override可写可不写
类似多继承(mixins)
class B{}
class C{}
class A with B,C{
}
注:使用mixins时，B、C类不能有构造函数，B、Clei不能继承其他类
网络请求
async: 让方法变成一部
void test() async {}
await 等待异步方法执行完成
只有在使用async时，才能使用await
getDataFromSever() async {
var httpClient =new HttpClient();
var uri = new Uri.http("http:xxxx");
var request = await httpClient.getUrl(uri);
var respone = await request.close();
return respone.transForm(utf8.decoder).join();
}
第三方模块
托管：统一托管在pub上，如
dev/packages
fluter-io
dartlang
flutter工程
目录
程序入口
main(){
runApp(myApp())
}
或
main() => runApp(myApp())
组件
Widget
对应Android中的View
MaterialApp
作为Widget的顶层组件
home(主页)
title(标题)
color(颜色)
theme(主题)
routes(路由，相当Activity)
Scaffold 是Meterial Design的布局的基本实现
有以下几个属性
appBar
显示在界面顶部的AppBar
body
当前界面所显示的主要内容 Widget
drawer
抽屉菜单类型
…
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text(
'我是标题栏'
),
),
body: MyCenter(),
),
theme: ThemeData(
primarySwatch:Colors.red //主题颜色
),
);
}
}
class MyCenter extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text(
'hello',
textDirection: TextDirection.ltr,
style: TextStyle(
color: Colors.red,
fontSize: 32
),
)
);
}
}
//class MyApp extends StatelessWidget {
//
// @override
// Widget build(BuildContext context) {
// return new MaterialApp(
// title: 'my First flutter',
// home: new Scaffold(
// appBar: new AppBar(
// title: new Text('I am appBar 哈哈233'),
// ),
// body: new Center(
// child: new Text('Hello World！！！2'),
// ),
// ),
// );
// }
//}
//void main() {
// runApp(
// new Center(
// child: new Text(
// 'Hello, world!',
// textDirection: TextDirection.ltr,
// ),
// ),
// );
//}
Container(容器)
也是集成与StateLessWidget
Image
本地图片 Image.asset
- 先在工程目录下创建存放图片的目录，如：
images根目录为标准图片
images/2.0x为2.0倍
images/3.0x为3.0倍
以上三个目录比配放置图片 - 在pubspec.yaml配置该图片路径
assets:
- images/bg.png
- images/2.0x/bg.png
- images/3.0x/bg.png
- 最后引用
Image.asset('images/bg.png');
网络图片 Image.network(picUrl)
圆角及圆形图片
圆形
- 利用Container的borderRadius
Container(
width: 400,
height: 400,
decoration: BoxDecoration(
color: Colors.yellow,
// borderRadius: BorderRadius.all(Radius.circular(60))
borderRadius: BorderRadius.circular(60),
image: DecorationImage(
image: NetworkImage('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581422031471&di=df2254ecbc97fc0cae3396a670511021&imgtype=0&src=http%3A%2F%2Fimg2018.cnblogs.com%2Fblog%2F1762823%2F201911%2F1762823-20191104112732371-1699453123.jpg'),
fit: BoxFit.cover
))
- 利用Container的ClipOval属性
child: ClipOval(
child: Image.network(
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581422031471&di=df2254ecbc97fc0cae3396a670511021&imgtype=0&src=http%3A%2F%2Fimg2018.cnblogs.com%2Fblog%2F1762823%2F201911%2F1762823-20191104112732371-1699453123.jpg',
fit: BoxFit.cover,
width: 300,
height: 300,),
),
ListView
ListView内部不能嵌套ListView
ListView(
padding: EdgeInsets.all(15.0),
scrollDirection: Axis.vertical,
children: [
ListTile(
leading: Icon(Icons.ac_unit,color: Colors.red,size: 44,),
trailing: Icon(Icons.ac_unit,color: Colors.red,size: 44,),
title: Text('要安装并运行Flutter，您的开发环境必须满足以下最低要求:'),
subtitle: Text('要安装并运行Flutter，您的开发环境必须满足以下最低要求:')
),
//或者其他Widget
],
);
ListView.builder
import 'package:flutter/material.dart';
class MyListView extends StatelessWidget {
var list = new List();
MyListView(){
for(var i = 0;i < 20;i++){
list.add('第$i条数据');
}
}
@override
Widget build(BuildContext context) {
// return ListView(
// padding: EdgeInsets.all(15.0),
// scrollDirection: Axis.vertical,
// children: _getStaticData(),
// );
return ListView.builder(
itemCount: this.list.length,
itemBuilder: (context,index){
return ListTile(
title: Text(this.list[index]),
);
}
);
}
}
List _getStaticData(){
return [
ListTile(
leading: Icon(Icons.ac_unit,color: Colors.red,size: 44,),
trailing: Icon(Icons.ac_unit,color: Colors.red,size: 44,),
title: Text('要安装并运行Flutter，您的开发环境必须满足以下最低要求:'),
subtitle: Text('要安装并运行Flutter，您的开发环境必须满足以下最低要求:')
),
ListTile(
leading: Icon(Icons.accessibility),
title: Text('要安装并运行Flutter，您的开发环境必须满足以下最低要求:'),
subtitle: Text('要安装并运行Flutter，您的开发环境必须满足以下最低要求:')
),
ListTile(
leading: Image.asset('images/bg.png',width: 44,height: 44,),
title: Text('要安装并运行Flutter，您的开发环境必须满足以下最低要求:'),
subtitle: Text('要安装并运行Flutter，您的开发环境必须满足以下最低要求:')
)
];
}
GridView
实现方式
GridView.count
GridView.count(
scrollDirection: Axis.vertical,//方向
crossAxisCount: 3, //一行几列
crossAxisSpacing: 8,//水平间隔
mainAxisSpacing: 8,//垂直间隔
children: _getStaticData(),
)
GridView.builder
GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 5,
mainAxisSpacing: 5
),
itemCount: this.list.length,
itemBuilder: (context,index){
return Container(
// height: 120,
child: Image.network(
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581422031471&di=df2254ecbc97fc0cae3396a670511021&imgtype=0&src=http%3A%2F%2Fimg2018.cnblogs.com%2Fblog%2F1762823%2F201911%2F1762823-20191104112732371-1699453123.jpg",
fit: BoxFit.cover),
);
}
)
Padding、 Row Column、Expanded
Padding–间距组件
Row–水平组件
Row(
mainAxisAlignment: MainAxisAlignment.end,//主轴(水平)排列方式
children: [
Image.network(
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581422031471&di=df2254ecbc97fc0cae3396a670511021&imgtype=0&src=http%3A%2F%2Fimg2018.cnblogs.com%2Fblog%2F1762823%2F201911%2F1762823-20191104112732371-1699453123.jpg',
fit: BoxFit.cover,
width: 50,
height: 50,),
Image.network(
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581422031471&di=df2254ecbc97fc0cae3396a670511021&imgtype=0&src=http%3A%2F%2Fimg2018.cnblogs.com%2Fblog%2F1762823%2F201911%2F1762823-20191104112732371-1699453123.jpg',
fit: BoxFit.cover,
width: 50,
height: 50,),
Image.network(
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581422031471&di=df2254ecbc97fc0cae3396a670511021&imgtype=0&src=http%3A%2F%2Fimg2018.cnblogs.com%2Fblog%2F1762823%2F201911%2F1762823-20191104112732371-1699453123.jpg',
fit: BoxFit.cover,
width: 50,
height: 50,),
Image.network(
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581422031471&di=df2254ecbc97fc0cae3396a670511021&imgtype=0&src=http%3A%2F%2Fimg2018.cnblogs.com%2Fblog%2F1762823%2F201911%2F1762823-20191104112732371-1699453123.jpg',
fit: BoxFit.cover,
width: 50,
height: 50,)
],
)
Column–垂直组件
Column(
mainAxisAlignment: MainAxisAlignment.end,//主轴(垂直)排列方式
children: [
Image.network(
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581422031471&di=df2254ecbc97fc0cae3396a670511021&imgtype=0&src=http%3A%2F%2Fimg2018.cnblogs.com%2Fblog%2F1762823%2F201911%2F1762823-20191104112732371-1699453123.jpg',
fit: BoxFit.cover,
width: 50,
height: 50,),
Image.network(
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581422031471&di=df2254ecbc97fc0cae3396a670511021&imgtype=0&src=http%3A%2F%2Fimg2018.cnblogs.com%2Fblog%2F1762823%2F201911%2F1762823-20191104112732371-1699453123.jpg',
fit: BoxFit.cover,
width: 50,
height: 50,),
Image.network(
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581422031471&di=df2254ecbc97fc0cae3396a670511021&imgtype=0&src=http%3A%2F%2Fimg2018.cnblogs.com%2Fblog%2F1762823%2F201911%2F1762823-20191104112732371-1699453123.jpg',
fit: BoxFit.cover,
width: 50,
height: 50,),
Image.network(
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581422031471&di=df2254ecbc97fc0cae3396a670511021&imgtype=0&src=http%3A%2F%2Fimg2018.cnblogs.com%2Fblog%2F1762823%2F201911%2F1762823-20191104112732371-1699453123.jpg',
fit: BoxFit.cover,
width: 50,
height: 50,)
],
)
Expanded
类似web中的flex布局
Row(
children: [
Expanded(
flex: 2,
child: Image.network(
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581422031471&di=df2254ecbc97fc0cae3396a670511021&imgtype=0&src=http%3A%2F%2Fimg2018.cnblogs.com%2Fblog%2F1762823%2F201911%2F1762823-20191104112732371-1699453123.jpg',
fit: BoxFit.cover,
height: 100,),
),
Expanded(
flex: 1,
child: Image.network(
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581422031471&di=df2254ecbc97fc0cae3396a670511021&imgtype=0&src=http%3A%2F%2Fimg2018.cnblogs.com%2Fblog%2F1762823%2F201911%2F1762823-20191104112732371-1699453123.jpg',
fit: BoxFit.cover,
height: 100,)
)],
)
Stack
页面层叠组件,类似于RelativeLayout布局
属性
alignment 配置所有子元素显示的位置
Stack(
children: [
Align( //相对位置
alignment: Alignment(0,0.5),//(0.0)为中心
child: Icon(Icons.home,size:60,color: Colors.red),
),
Align(
alignment: Alignment.bottomLeft,
child: Icon(Icons.save,size:60,color: Colors.yellow),
),
Positioned(//绝对位置）
left: 0,//左上角
// top: 0,
// right: 0,
bottom: 100,
child: Icon(Icons.settings,size:60,color: Colors.yellow),
)
],
)
注意：(0.0)为中心
position
children 子组件
Positioned(//绝对位置）
left: 0,//左上角
// top: 0,
// right: 0,
bottom: 100,
child: Icon(Icons.settings,size:60,color: Colors.yellow),
)
Container(
height: 400,
width: 400,
color: Colors.blue,
alignment: Alignment(0,1),
child: new Stack(
children: [
Align( //相对位置
alignment: Alignment(0,0.5),//(0.0)为中心
child: Icon(Icons.home,size:60,color: Colors.red),
),
Align(
alignment: Alignment.bottomLeft,
child: Icon(Icons.save,size:60,color: Colors.yellow),
),
Positioned(//绝对位置）
left: 0,//左上角
// top: 0,
// right: 0,
bottom: 100,
child: Icon(Icons.settings,size:60,color: Colors.yellow),
)
],
),
)
AspectRadio、Card
AspectRadio
作用：可以设置调整child子元素的宽高比
AspectRatio(
aspectRatio: 2/1,//宽/高
child: Container(
color: Colors.blue
),
)
Card
属性
- margin 外边距
- child 子组件
- shape 卡片的阴影效果，默认是圆角的长方形
Card(
margin: EdgeInsets.all(10),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
child: Column(
children: [
AspectRatio(
aspectRatio: 16/9,
child: Image.network(
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581422031471&di=df2254ecbc97fc0cae3396a670511021&imgtype=0&src=http%3A%2F%2Fimg2018.cnblogs.com%2Fblog%2F1762823%2F201911%2F1762823-20191104112732371-1699453123.jpg',
fit: BoxFit.cover),
),
ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581422031471&di=df2254ecbc97fc0cae3396a670511021&imgtype=0&src=http%3A%2F%2Fimg2018.cnblogs.com%2Fblog%2F1762823%2F201911%2F1762823-20191104112732371-1699453123.jpg"),
),
title: Text('name'),
subtitle: Text('subContent'),
)
],
)
)
RaisedButton
child
onPressed
Wrap
实现流布局，相对于FloxBoxLayout
import 'package:first_flutter_app/MyRaisedButton.dart';
import 'package:flutter/material.dart';
class MyWrap extends StatelessWidget {
var list = new List();
MyWrap(){
for(var i = 0;i < 20;i++){
list.add('第$i条数据');
}
}
@override
Widget build(BuildContext context) {
return Wrap(
direction: Axis.horizontal,//方向
spacing: 5,//主轴间距
runSpacing: 5,//副轴间距
alignment: WrapAlignment.center,//主轴方向对其方式
children: _getWidgets()
);
}
List _getWidgets(){
return list.map((value) {
return MyRaisedButton(value);
}).toList();
}
}
StatefulWidget
有状态组件
关键点
- MyWidget 继承 StatefulWidget
- 并继承State
- 改变状态是，在state类里调用setState函数
import 'package:flutter/material.dart';
class MySatefulWidget extends StatefulWidget {
@override
_MySatefulWidgetState createState() {
return _MySatefulWidgetState();
}
}
class _MySatefulWidgetState extends State{
int count = 0;
@override
Widget build(BuildContext context) {
return Column(
children: [
SizedBox(
height: 10,
),
Text('Hi ${this.count}'),
SizedBox(
height: 10,
),
RaisedButton(
child: Text('click'),
onPressed: (){
setState(() {
this.count++;
});
},
)
],
);
}
}
BottomNavigationBar
自定义底部导航条
属于Scaffold
常见属性
- items 底部导航条按钮组合(List)
- iconSize
- currentIndex
- onTap 选中变化回调的函数
- fixedColor 选中的颜色,如果不设置，默认跟主题颜色一样
- type
1).BottomNavigationBar.fixed
2).BottomNavigationBar.shifting
Scaffold(
appBar: AppBar(
title: Text('我是标题栏'),
),
body: this._pages[this._currentIndex],
bottomNavigationBar:BottomNavigationBar(
currentIndex: this._currentIndex,
iconSize: 22.0,//icon大小
fixedColor:Colors.blue, //选中的颜色，如果不设置，默认跟主题颜色一样
type: BottomNavigationBarType.fixed, //解决多个tabItem时，不显示的配置
onTap: (int index) {
setState(() {
this._currentIndex = index;
});
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('首页')
),
BottomNavigationBarItem(
icon: Icon(Icons.message),
title: Text('消息')
),
BottomNavigationBarItem(
icon: Icon(Icons.departure_board),
title: Text('发现')
),
BottomNavigationBarItem(
icon: Icon(Icons.people),
title: Text('我的')
),
// BottomNavigationBarItem(
// icon: Image.asset('/images/bg.png'),
// title: Text('发现')
// )
],
))
路由
也就是页面跳转，通过navigator来管理路由导航，并提供了堆栈的管理方法，如,Navigator.push()–跳转下一级,Navigator.pop()，返回上一级
配置方式
基本路由
跳转
RaisedButton(
child: Text("去搜索"),
onPressed: (){
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => SearchPage()//目标页
)
);
},
)
返回
Navigator.of(context).pop()
命名路由
定义在MaterialApp里，相当于Android的manifest文件里配置的Activity
调用步骤
- 先在MaterialApp注册页面信息
MaterialApp(
//注册里一个搜索，一个设置页面
routes: {
'/search':(context) => SearchPage(),
'/setting':(context) => SettingPage(),
},
)
- 在点击跳转的时候执行
Navigator.pushNamed(context, "/search");
或
Navigator.pushNamed(context, "/setting");
传值
//配置页面，类似Androd里Manifest.xml配置的Activity
final _routes = {
'/search':(context,{arguments}) => SearchPage(arguments: arguments,),
'/setting':(context,{arguments}) => SettingPage(arguments: arguments)
};
//传值固定配置函数
Route onGenerateRoute(RouteSettings settings) {
final String name = settings.name;//点击跳转是输入的name//Navigator.pushNamed(context, "/search");name为"/search"
final Function pageBuilder = _routes[name];//跳转的函数//(context,{arguments}) => SearchPage(arguments: arguments,)
if (pageBuilder != null) {
if (settings.arguments != null) {
// 如果透传了参数
return MaterialPageRoute(
builder: (context) =>
pageBuilder(context, arguments: settings.arguments));
} else {
// 没有透传参数
return MaterialPageRoute(builder: (context) => pageBuilder(context));
}
}
return null;
}
路由替换
页面1→页面2→页面3 点击返回到→页面1，
在页面2点击跳转的时候，执行以下跳转方法
Navigator.pushReplacementNamed(conext,name)
返回根路由
//相当于跳转到根页面，然后把之前的栈清空
Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(builder: (context) => RootPage()),
(route) => route = null);
跳转方式
- 路由直接跳转到下一个页面
Navigator.pushNamed(context,"/nextPage");
2. 跳转的下一个页面，替换当前的页面Navigator.of(context).pushReplacementNamed('/nextPage')
3. 返回上一个页面Navigator.of(context).pop()
4. 返回到指定的页面(指定的页面必须已经在栈里)
Navigator.of(context).popUntil(ModalRoute.withName(MyRoute.TABS))
5. 跳转新页面并清空堆栈路由或者返回指定的路由Navigator.of(context).pushAndRemoveUntil( new MaterialPageRoute(builder: (context) => new MyTextFiled()), (route) => route == null //rootRoute()指定返回的路由 );
AppBar
顶部导航
属性
| 属性 | 描述 |
|---|---|
| leading | 标题前的一个控件，通常首页显示应用的logo，其他页面显示返回键 |
| title | 标题 |
| actions | 通常使用IconButton表示，可以放置按钮组 |
| buttom | 通常放tabBar，标题下面显示一个Tab 导航栏 |
| comTheme | 图标样式 |
| titleTheme | 文字样式 |
| centerTitle | 标题是否居中显示 |
| backgroundColor | 背景栏颜色 |
Scaffold(
appBar: AppBar(
title: Text('myAppbar'),
centerTitle: true,//标题是否居中
backgroundColor: Colors.black,
// leading: Icon(Icons.accessibility),//标题左边，没有点击事件的
leading: IconButton(
icon: Icon(Icons.beach_access),
onPressed: () {
Navigator.pop(context);
},
), //标题左边，有点击事件的
actions: [ //导航右侧图标
Icon(Icons.settings),
Icon(Icons.departure_board)
],
),
body: Center(
child: Text('内容'),
),
)
AppBar里的TabBar
常见属性
| 属性 | 描述 |
|---|---|
| tabs | 显示的标签内容,一般用Tab对象，也可以用其他Widget |
| controller | TabController对象 |
| isScrollable | 是否可以滚动 |
| indicatorColor | 指示器(下划线)颜色 |
| indicatorSize | 指示器长度 |
| label | 选择文字的颜色 |
DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(text: '热门',),
Tab(text: '推荐',),
],
),
title: Text('myAppbar'),
centerTitle: true,//标题是否居中
backgroundColor: Colors.black,
// leading: Icon(Icons.accessibility),//标题左边，没有点击事件的
leading: IconButton(
icon: Icon(Icons.beach_access),
onPressed: () {
Navigator.pop(context);
},
), //标题左边，有点击事件的
actions: [ //导航右侧图标
Icon(Icons.settings),
Icon(Icons.departure_board)
],
),
body: TabBarView(
children: [
Text('热门内容'),
Text('推荐内容')
],
),
),
)
切换
- 代码配置
body: TabBarView(
children: [
Text('热门内容'),
Text('推荐内容')
],
),
2.TabContoller
import 'package:flutter/material.dart';
class MyTabBarCtrlPage extends StatefulWidget {
@override
State createState() {
return _MyTabBarCtrlPageState();
}
}
class _MyTabBarCtrlPageState extends State with SingleTickerProviderStateMixin{
TabController _tabController;
@override
void initState() {
super.initState();
_tabController = TabController(
vsync:this,
length:3
);
_tabController.addListener(() {
print('index= ${_tabController.index}');
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('MyTabBarCtrlPage'),
bottom: TabBar(
controller: this._tabController,//注意，必须要加
tabs: [
Tab(text: '热门'),
Tab(text: '推荐'),
Tab(text: '更多')
],
),
),
body: TabBarView(
controller: this._tabController,//注意，必须要加
children: [
Center(
child: Text('热门内容'),
),
Center(
child: Text('推荐内容'),
),
Center(
child: Text('更多内容'),
)
],
),
);
}
}
Drawer
抽屉组价、侧边栏
左侧栏
Drawer()
右侧栏
endDrawer()
侧栏普通头部
DrawerHeader
侧栏用户头部
UserAccountsDrawerHeader()
caffold(
appBar: AppBar(
title: Text('MyDrawer'),
),
body: Center(
child: Text('内容'),
),
drawer: Drawer(
child: Column(
children: [
DrawerHeader(
child: Text('左侧标题'),
),
Divider(),
Text('左侧边栏内容'),
],
)
),
endDrawer: Drawer(
child: Center(
child: Text('右侧边栏内容'),
),
),
)
按钮组件
| 名称 | 描述 |
|---|---|
| RaisedButton | 凸起按钮 |
| FlatButton | 扁平化按钮 |
| OutlineButton | 线框按钮 |
| IconButton | 图标按钮 |
| ButtonBar | 按钮组 |
| FlatingActionButton | 浮动按钮 |
表单
TextFiled
文本框组件(Editext)
TextField(
obscureText: true,//密码框
maxLines: 1,
decoration: InputDecoration(
icon: Icon(Icons.people),
hintText: '请输入内容',
labelText: '用户名',//显示在输入框左上角
border: OutlineInputBorder(),//变边框的
),
)
获取TextFiled里的值
监听onChanged()方法
TextField(
// obscureText: true,//密码框
maxLines: 1,
decoration: InputDecoration(
icon: Icon(Icons.people),
hintText: '请输入内容',
labelText: '用户名',//显示在输入框左上角
border: OutlineInputBorder(),//变边框的
),
onChanged: (value){
},
)
CheckBox
Checkbox(
value: this._checkFlag,
onChanged: (value) {
setState(() {
this._checkFlag = value;
});
},
activeColor: Colors.yellow,//选择的颜色
)
CheckBoxListTile
CheckboxListTile(
value: this._checkFlag,
title: Text('标题'),
subtitle: Text('内容'),
secondary: Icon(Icons.settings),//左侧加图片
onChanged: (value) {
setState(() {
this._checkFlag = value;
});
},
)
Radio
Radio(
value: 1,
onChanged: (v){
setState(() {
this._radioValue = v;
});
},
groupValue: this._radioValue,//radio组选择的值
)
RadioListTile
类似RadioListTile的用法
本地化语言设置
- 引入依赖
在pubspec.yaml文件中配置
dependencies:
flutter_localizations:
sdk: flutter
- 在入口处
MaterialApp(
//配置本地化
localizationsDelegates: [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate
],
supportedLocales: [
const Locale('zh', 'CH'),
const Locale('en', 'US')
],
）
日期组件
官方控件
日期
showDatePicker(
context: context,
initialDate: _nowDate,
firstDate: DateTime(1970),
lastDate: DateTime(2021)
).then((result){
})
时间
showTimePicker(
context: context,
initialTime: TimeOfDay.now()
).then((result){
});
Swiper(第三方轮播图组件)
轮播图组件
new Swiper(
itemCount: 3,
itemBuilder: (BuildContext context,int index){
return Image.network(
'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2628977794,1833531909&fm=26&gp=0.jpg',
fit: BoxFit.cover,);
},
pagination: SwiperPagination(),//指示器(点下。。。)
control: SwiperControl(),//配置左右箭头
),
)
AlertDialog
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text('标题'),
content: Text('内容'),
actions: [
FlatButton(
child: Text('取消'),
onPressed: (){
Navigator.pop(context);
},
),
FlatButton(
child: Text('确定'),
onPressed: (){
Navigator.pop(context);
},
),
],
)
SimpleDialog
showDialog(
context: context,
builder: (context) {
return SimpleDialog(
title: Text('标题'),
children: [
SimpleDialogOption(
child: Text('option 1'),
onPressed: (){},
),
SimpleDialogOption(
child: Text('option 2'),
onPressed: (){},
),
SimpleDialogOption(
child: Text('option 3'),
onPressed: (){
Navigator.pop(context,'3');//其中参数'3'可以当结果返回
},
),
],
);
ShowBottomSheet
showModalBottomSheet(
context: context,
builder: (context){
return Container(
height: 160,
child: Column(
children: [
Text('选项一'),
Divider(),
Text('选项二'),
Divider(),
Text('选项三'),
Divider(),
Text('选项四'),
],
),
);
},
);
Toast(FlutterToast)
第三方库
Fluttertoast.showToast(
msg: 'hello toast',
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
backgroundColor: Colors.black,
timeInSecForIos: 1,// only iOS
textColor: Colors.white,
fontSize: 15,
);
自定义Dialog
步骤
- 写一个组件extend Dialog
import 'package:flutter/material.dart';
class MyCustomDialog extends Dialog{
@override
Widget build(BuildContext context) {
return Material(//注意点
type: MaterialType.transparency,//设置透明
child: Center(
child: Container(
height: 180,
width: 320,
color: Colors.white,
child: Text('自定义dialog'),
)
)
);
}
}
- 调用的地方
showDialog(
context: context,
builder: (context){
return MyCustomDialog(); //此处
}
);
网络请求
Json数据与Map类型的转换
需要引入 import ‘dart:convert’
Map转Json字符串
Map map = {
'年龄':'21',
'性别':'男',
'地址':'xxxx',
};
String jsonStr = json.encode(map);
print('jsonStr= $jsonStr');
Json.encode(Map)
Json字符串转Map
Json.decode(jsonStr)
String jsonStr2 = '{"年龄":"21","性别":"男","地址":"xxxx"}';
Map map2= json.decode(jsonStr2);
print('map2[年龄]= ${map2["年龄"]}');
get请求
String url = 'https://suggest.taobao.com/sug?code=utf-8&q=%E5%8D%AB%E8%A1%A3';
http.Response respone = await http.get(url);//异步请求
print('http_code= ${respone.statusCode}');
if (respone.statusCode == 200) {
print('http_body= ${respone.body}');
setState(() {
this._result = respone.body;
});
Map map = convert.jsonDecode(respone.body);//转换为map
}
post请求
print('http_getData');
String url = 'https://suggest.taobao.com/sug?code=utf-8&q=%E5%8D%AB%E8%A1%A3';
http.Response respone = await http.post(url,body:this._map);//异步请求
print('http_code= ${respone.statusCode}');
if (respone.statusCode == 200) {
print('http_body= ${respone.body}');
setState(() {
this._result = respone.body;
});
Map map = convert.jsonDecode(respone.body);//转换为map
}
Flutter与原生的混合集成
主要有以下两种
| 源码集成 | AAR(andriod),framework（iOS）集成 | |
|---|---|---|
| 优点 | 1. 简单快捷 2. 和原生交互较多或需要依赖原生的数据环境时，使用该方式调试方便 | 1. 不影响原生项目 2. 不参与Flutter开发的人员处于无感状态 3. 无需对先原生环境做修改 |
| 缺点 | 1. 团队所有人需要安装Flutter环境 2. 需要对现在编译发布体现做修改 | 1. 复杂度较高 2. 与原生调试不是很方便 |
源码集成
- 在原APP Native工程项目里，添加flutter_module
- 安装flutter相关开发插件
AAR集成
- 创建单独的flutter工程并创建flutter_module
- 开发完成，打包成aar
执行flutter builde aar完成后，控制台会提示配置以下信息
1. Open /app/build.gradle
2. Ensure you have the repositories configured, otherwise add them:
repositories {
maven {
url '/Users/wangpingtao/yuxun/exitApp/flutter_module/build/host/outputs/repo' //new
}
maven {
url 'http://download.flutter.io' //new
}
}
3. Make the host app depend on the Flutter module:
dependencies {
debugImplementation 'exit.wpt.com.flutter_module:flutter_debug:1.0 //new
profileImplementation 'exit.wpt.com.flutter_module:flutter_profile:1.0 //new
releaseImplementation 'exit.wpt.com.flutter_module:flutter_release:1.0 //new
}
4. Add the `profile` build type:
android {
buildTypes {
profile { //new
initWith debug //new
} //new
}
}
- 在app/build.gralde文件配置aar相关信息：配置aar相关信息