Flutter
- 一、介绍
- 二、开发环境配置
-
* hello world- dart开发环境配置
- 三、dart
-
* 1.变量与常量- 2.数据类型
- 3.Function
- 4.类与继承
- 5.mixin与抽象类
- 6.库
- 7.异步处理
- 四、widgets
-
* 1.文本和字体- 2.按钮
- 3.图片和图标
- 4.下拉框
- 5.单选框和多选框
- 6.输入框
- 五、布局
-
* 1.线性布局- 2.弹性布局
- 3.定位
- 4.流式布局
- 六、容器
-
* 1.内边距padding- 2.布局限制类容器
- 3.装饰容器
- 4.变换transform
- 5.Container
- 6.可滚动widgets
- 七、脚手架Scaffold
-
* 1.topBar和底部导航- 2.TabBar
- 3.抽屉drawer
- 八、事件
-
* 1.指针事件- 2.手势事件
- 九、网络请求
-
* 1.http请求
一、介绍
- Flutter是Google推出并开源的移动应用开发框架，主打跨平台、高保真、高性能。开发者可以通过Dart语言开发App，一套代码同时运行在iOS和Android平台。Flutter提供了非常丰富的组件、接口，开发者可以很快地为Flutter添加native扩展。同时Flutter还使用Native引擎渲染视图，为用户提供良好的体验。
- 特点：
跨平台自绘引擎
高性能
二、开发环境配置
-
获取Flutter SDK并解压缩
官网地址：
docs.flutter.dev/release/arc…
也可以从官方的github上下载：
github.com/flutter/flu… -
设置环境变量
在path中添加flutter\bin的全路径 -
运行flutter doctor命令，检查环境是否有未安装的依赖
hello world
- 为android studio添加Flutter插件
- 使用android studio开发第一个Flutter应用
dart开发环境配置
三、dart
1.变量与常量
void main(){
//var声明
var username="quan";
username="good";
// dynamic a="good job";
// Object b="good job";
// print(a.length);
// print(b.length);
// final psw="good";
// psw="job";
//
// const psw="good";
// psw="job";
}
2.数据类型
void main(){
// num: int and double
int abc=110;
int a=int.parse('119');
double cde=220.111;
double b=double.parse('111.222');
//String
String good=123.toString();
String job=123.22322.toStringAsFixed(2);
print(job);
//bool
//bool result=123>110;
bool result=1=='1';
print(result);
//List 数据类型
List list=[1,3,5,7,9];
//List newList=new List();-------已弃用
//newList.add(2);
//newList.addAll([4,6,8,10]);//将数组中的所有元素添加进数组中
//print(newList);
//print(newList.length);
//print(newList.first);
//print(newList.last);
//print(newList[2])
//Map 对象类型
Map obj={
'x':1,
'y':2,
'z':3
};
// Map obj2=new Map();------已弃用
// obj2['x']=1;
// obj2['y']=2;
print(obj);
//print(obj2);
print(obj.containsKey('x'));//是否包含某个key
print(obj.containsKey('a'));
obj.remove('y');
print(obj);
}
3.Function
void main(){
String username=getUserName();
String userInfo=getPersonInfo(111);
print(userInfo);
int age=addAge(111);
print(age);
int age2=addAge2(age1:119);
print(age2);
var list=["abc","cde","def"];
//匿名函数
list.forEach((str) {
print(str);
});
}
String getUserName(){
return "hello world";
}
String getPersonInfo(int userId){
Map userInfoObj={
"111":"zhangsan",
"222":"lisi"
};
return userInfoObj[userId.toString()];
}
//可选参数
int addAge(int age1,[int age2=0]){
return age1+age2;
}
//默认值
int addAge2({int age1=0,int age2=0}){
return age1+age2;
}
4.类与继承
void main(){
var p=new Person(23,"zhangsan");
// p.age=123;
print(p.age);
print(p.name);
p.sayHello();
var w=new Worker(18, "lisi", 3500);
w.sayHello();
}
//类
class Person{
int age=0;
String name="";
//构造函数
Person(int age,String name){
this.age=age;
this.name=name;
}
void sayHello(){
print("my name is:"+this.name);
}
}
//继承
class Worker extends Person{
//Worker(super.age, super.name);
int salary=0;
//扩展
Worker(int age,String name,int salary):super(age,name){
this.salary=salary;
}
//重写
@override//告诉编译器/程序员这是一个重写方法
void sayHello(){
super.sayHello();
print("my salary is:"+this.salary.toString());
}
}
5.mixin与抽象类
void main(){
var p=new Person(18,"zhangsan");
p.eat();
p.sleep();
p.sayHello();
}
mixin Eat{
void eat(){
print("eat");
}
// void sayHello(){
// print("say Hello in eat");
// }
}
mixin Sleep{
void sleep(){
print("sleep");
}
// void sayHello(){
// print("say Hello in sleep");
// }
}
//抽象类，不能被实例化
abstract class Animal{
//抽象方法，需在实例中实现
void have_a_baby();
}
//类
class Person extends Animal with Eat,Sleep{
int age=0;
String name="";
//构造函数
Person(int age,String name){
this.age=age;
this.name=name;
}
//混合里如果有同名方法，先找自身类的方法，后找混合的最后一个类的方法
void sayHello(){
print("my name is:"+this.name);
}
@override
void have_a_baby() {
print("have a baby");
}
}
6.库
外部库需要在pubspec.yaml文件中写明加载依赖，然后在终端执行pub get
外部库网址：pub.dev
dependencies:
http: ^0.13.3
//自写库
import 'pkg/Calc.dart';
//外部库
import 'package:http/http.dart' as http;
//dart自身库 延时加载
import 'dart:math' deferred as math;
// 如果pub get总是下载失败的话，可以使用国内的镜像
// 设定环境变量：PUB_HOSTED_URL=https://pub.flutter-io.cn
void main () async {
int result = add(3,4);
print(result);
var m=new Calc(10, 5);
m.minus();
// var url = Uri.https('example.com', 'whatsit/create');
// var response = await http.post(url, body: {'name': 'doodle', 'color': 'blue'});
// print('Response status: ${response.statusCode}');
// print('Response body: ${response.body}');
//
// print(await http.read(Uri.https('www.baidu.com')));
// var r=new Random();
// print(r.nextInt(10));
await math.loadLibrary();
var r=new math.Random();
print(r.nextInt(10));
}
7.异步处理
void main() async {
print("sat Hello");
await Future.delayed(new Duration(seconds: 5),(){
print("chibaole");
});
print("play game");
// Future.wait([
// Future.delayed(new Duration(seconds: 1),(){
// print("001");
// });
// Future.delayed(new Duration(seconds: 3),(){
// print("002");
// });
// Future.delayed(new Duration(seconds: 2),(){
// print("003");
// });
// ]).then((List results){
// print("all over");
// });
await Future.delayed(new Duration(seconds: 1),(){
print("001");
});
await Future.delayed(new Duration(seconds: 3),(){
print("002");
});
await Future.delayed(new Duration(seconds: 2),(){
print("003");
});
}
四、widgets
1.文本和字体
@override
Widget build(BuildContext context) {
const styles=TextStyle(
color: const Color(0xffff0000),//十六进制颜色前两位为透明度，后六位为颜色//Colors.yellow
fontSize: 20,
fontFamily: "yahei",
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.dashed
);
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Column(
children: <Widget>[
Text("hello worldhello worldhello worldhello worldhello worldhello worldhello world",
textAlign: TextAlign.center,
maxLines: 1,
overflow: TextOverflow.ellipsis,
textScaleFactor: 1.4,
),
Text("样式测试",
style: styles,
),
Text.rich(TextSpan(
children: [
TextSpan(text:"主页：",
style: TextStyle(
fontSize: 30
)
),
TextSpan(text:"https://www.baidu.com",
style: TextStyle(
color: Colors.blue,
fontSize: 25
)
)
]
))
],
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
2.按钮
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Column(
children: <Widget>[
ElevatedButton(
child:Text("RaisedButton"),
onPressed:()=>{
print("RaisedButton pressed")
}
),
TextButton(
child:Text("FlatButton"),
onPressed:()=>{
print("FlatButton pressed")
}
),
OutlinedButton(
child:Text("OutlinedButton"),
onPressed:()=>{
print("OutlinedButton pressed")
}
),
TextButton(
onPressed:()=>{
print("FlatButton pressed")
},
style:ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.blue),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0), // 设置圆角半径
),
)
),
child:Text("FlatButton自定义"),
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
3.图片和图标
- 加载本地资源
@override
Widget build(BuildContext context) {
const style = TextStyle(
color:const Color(0xffff0000),//Colors.yellow
fontSize:20,
fontFamily:'yahei',
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.dashed
);
return Scaffold(
appBar: AppBar(
title: Text('Hello world!'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.shopping cart),
tooltip: 'Open shopping cart',
onPressed: () {
print('Shopping cart opened')
},
),
],
),
body:Column(
children: <Widget>[
Image.asset(static/pircture/mvp.png,
width:200,
)//放图片路径,可以右击文件然后新建一个文件夹放图片
]
)
)
}
- 加载网络资源
//network代表要使用网络资源
Image.network("http://......",
width:150)
//控制图片填充效果
fit:BoxFit.cover
//设定颜色混合(拿别的颜色混到图片里去)
color:Color.pink,
colorBlendMode:BlendMode.difference,
- 图标
使用icon这个类
如果图标不够用了,想使用一个新的图标,可以支持icon font(淘宝的矢量图标库)
解压缩包,找到ttf文件,就是我们要使用库
在pubspec中引入
新建一个文件fonts来引入路径
定义一个自己的图标库,在lib中定义一个Dart File文件叫Myicon.dart
import 'package:flutter/material.dart';
class MyIcon [
static const IconData huawei = const IconData(
0xe82e,
fontFamily:'myGoodIcon',
matchTextDirection: true
);
static const IconData oppo = const IconData(
0xe82d,
fontFamily:'myGoodIcon',
matchTextDirection: true
);
static const IconData xiaomi= const IconData(
0x832,
fontFamily:'myGoodIcon',
matchTextDirection: true
);
]
写完上面代码后,到main.dart文件中引入
import 'MYIcon.dart'
可以设置颜色
Icon(MyIcon.huawei,color:Color.yellow)
pub里面报错的话,可能是缩进问题
4.下拉框
下拉框里面有选项,有选项的话还需要知道选的是第几个,这才是一个真正的下拉框
class MyDropDownButton extends StatefulWidgets {
@override
State<StatefulWidget> createState() {
return _MyDropDownButton();
}
}
class _MyDropDownButton extends State<MyDropDownButton> {
List getCityList() [
List<DropdownMeunItem> cityList = new List();
cityList.add(DropdownMenuItem(child: new Text("上海"), value:"shanghai"));
cityList.add(DropdownMenuItem(child: new Text("北京"), value:"beijing"));
cityList.add(DropdownMenuItem(child: new Text("广州"), value:"guangzhou"));
cityList.add(DropdownMenuItem(child: new Text("深圳"), value:"shenzhen"));
return cityList;
]
@override
Widget build(BuildContext context) {
return new Column(
children:<Widget>[
new DropdownButton(
items:getCityList(),
hint: new Text("请选择城市"),
onChanged: null
)
]
)
}
}
想要它显示出来,在Scaffold里面添加
还需要写一个变量来存选中的city
class MyDropDownButton extends StatefulWidgets {
@override
State<StatefulWidget> createState() {
return _MyDropDownButton();
}
}
class _MyDropDownButton extends State<MyDropDownButton> {
List getCityList() [
List<DropdownMeunItem> cityList = new List();
cityList.add(DropdownMenuItem(child: new Text("上海"), value:"shanghai"));
cityList.add(DropdownMenuItem(child: new Text("北京"), value:"beijing"));
cityList.add(DropdownMenuItem(child: new Text("广州"), value:"guangzhou"));
cityList.add(DropdownMenuItem(child: new Text("深圳"), value:"shenzhen"));
return cityList;
]
var selectedCity;
@override
Widget build(BuildContext context) {
return new Column(
children:<Widget>[
new DropdownButton(
items:getCityList(),
hint: new Text("请选择城市"),
value: selectedCity,
onChanged: (val) {
setState(() {
this.selectedCity = val;//把值赋给临时变量
});
}
)
],
);
}
}
5.单选框和多选框
单选框
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('Single Selection Example'),
),
body
