移动端开发Flutter入门学习 - Powered by Discuz! Archiver

魏晓东 发表于 2024-12-19 02:07:47

Flutter入门学习

一、先容

[*]Flutter是Google推出并开源的移动应用开发框架，主打跨平台、高保真、高性能。开发者可以通过Dart语言开发App，一套代码同时运行在iOS和Android平台。Flutter提供了非常丰富的组件、接口，开发者可以很快地为Flutter添加native扩展。同时Flutter还使用Native引擎渲染视图，为用户提供精良的体验。
[*]特点：
跨平台自绘绘擎
高性能
二、开发情况配置

[*]获取Flutter SDK并解压缩
官网地址：
https://docs.flutter.dev/release/archive?tab=windows#windows
也可以从官方的github上下载：
https://github.com/flutter/flutter/releases
[*]设置情况变量
在path中添加flutter\bin的全路径
[*]运行flutter doctor下令，检查情况是否有未安装的依赖
hello world

[*]为android studio添加Flutter插件
[*]使用android studio开发第一个Flutter应用
dart开发情况配置

下载网址：https://gekorm.com/dart-windows/
或https://dart.dev/get-dart/archive
三、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=;

//List newList=new List();-------已弃用
//newList.add(2);
//newList.addAll();//将数组中的所有元素添加进数组中
//print(newList);
//print(newList.length);
//print(newList.first);
//print(newList.last);
//print(newList)

//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;
}

//可选参数
int addAge(int age1,){
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与抽象类

dart无法多继承
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
外部库网址：https://pub.dev
https://i-blog.csdnimg.cn/blog_migrate/acae1548f1b1c38047831c36da756291.png
//自写库
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,
)//放图片路径,可以右击文件然后新建一个文件夹放图片
]
)
)
}

这边要解开
https://i-blog.csdnimg.cn/direct/1f359838f05e415da963f8a88cf5d75f.png

[*]加载网络资源
//network代表要使用网络资源
Image.network("http://......",
width:150)
//控制图片填充效果
fit:BoxFit.cover
//设定颜色混合(拿别的颜色混到图片里去)
color:Color.pink,
colorBlendMode:BlendMode.difference,

[*]图标
使用icon这个类
https://i-blog.csdnimg.cn/direct/6c24ad08f7644d06b8cb2ce648550c62.png
如果图标不敷用了,想使用一个新的图标,可以支持icon font(淘宝的矢量图标库)
解压缩包,找到ttf文件,就是我们要使用库
https://i-blog.csdnimg.cn/direct/3036258e549a4890966a2fa565078b12.png
在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里面添加
https://i-blog.csdnimg.cn/direct/879c8406fe5946578c70104b1679adfa.png
还必要写一个变量来存选中的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: SingleSelectionWidget(),
   ),
);
}
}

class SingleSelectionWidget extends StatefulWidget {
@override
_SingleSelectionWidgetState createState() => _SingleSelectionWidgetState();
}

class _SingleSelectionWidgetState extends State<SingleSelectionWidget> {
String selectedFruit = '';

@override
Widget build(BuildContext context) {
return Column(
   children: <Widget>[
   RadioListTile(
      title: Text('Apple'),
      value: 'apple',
      groupValue: selectedFruit,
      onChanged: (value) {
         setState(() {
         selectedFruit = value;
         });
      },
   ),
   RadioListTile(
      title: Text('Banana'),
      value: 'banana',
      groupValue: selectedFruit,
      onChanged: (value) {
         setState(() {
         selectedFruit = value;
         });
      },
   ),
   ],
);
}
}

多选框
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('Multiple Selection Example'),
   ),
   body: MultipleSelectionWidget(),
   ),
);
}
}

class MultipleSelectionWidget extends StatefulWidget {
@override
_MultipleSelectionWidgetState createState() => _MultipleSelectionWidgetState();
}

class _MultipleSelectionWidgetState extends State<MultipleSelectionWidget> {
List<String> selectedFruits = [];

@override
Widget build(BuildContext context) {
return Column(
   children: <Widget>[
   CheckboxListTile(
      title: Text('Strawberry'),
      value: selectedFruits.contains('strawberry'),
      onChanged: (value) {
         setState(() {
         if (value) {
            selectedFruits.add('strawberry');
         } else {
            selectedFruits.remove('strawberry');
         }
         });
      },
   ),
   CheckboxListTile(
      title: Text('Mango'),
      value: selectedFruits.contains('mango'),
      onChanged: (value) {
         setState(() {
         if (value) {
            selectedFruits.add('mango');
         } else {
            selectedFruits.remove('mango');
         }
         });
      },
   ),
   ],
);
}
}

使用RadioListTile和CheckboxListTile小部件来创建单选框和多选框。通过修改value属性以及处理惩罚onChanged回调函数，您可以实现单选和多选的功能。
6.输入框

在Flutter中，可以使用TextField小部件来创建输入框，让用户可以在应用程序中输入文本。TextField提供了各种属性和回调函数，以答应您自界说输入框的外观和行为
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('Text Input Example'),
   ),
   body: TextInputWidget(),
   ),
);
}
}

class TextInputWidget extends StatefulWidget {
@override
_TextInputWidgetState createState() => _TextInputWidgetState();
}

class _TextInputWidgetState extends State<TextInputWidget> {
TextEditingController _textEditingController = TextEditingController();

@override
Widget build(BuildContext context) {
return Padding(
   padding: EdgeInsets.all(16.0),
   child: TextField(
   controller: _textEditingController,
   decoration: InputDecoration(
      labelText: 'Enter your text here',
      border: OutlineInputBorder(),
   ),
   ),
);
}

@override
void dispose() {
_textEditingController.dispose();
super.dispose();
}
}

五、布局

1.线性布局

body: Row(
crossAxisAlignment: CrossAxisAligment. start,
children: <Widget>[
Container(
width: 200,
height: 300,
color: Colors. red.
).
Container(
width: 200,
height: 400,
color: Colors. blue,
)
]
body: Column(
crossAxisAlignment: CrossAxisAligment. start,
children: <Widget>[
Container(
width: 200,
height: 300,
color: Colors. red.
).
Container(
width: 200,
height: 400,
color: Colors. blue,
)
]
2.弹性布局

body: Flex(
direction: Axis. horizontal,//horizontal改成vertical,就是垂直方向了
children: <Widget>[
Container(
width: 50,
height:300,
color:Color.black
),//这个标识黑颜色固定宽度为50,剩下的空间再给Expanded按份数分
Expanded(    //一个Expanded,每一个都是一份
flex: 1,
child: Container(
height: 300,
color: Colors. red,
)
),
Expanded(
flex: 1,
child: Container(
height: 300,
color: Colors. blue,
)
),
Expanded(
flex: 1,//如果这边改成2的话,就是他站1/2的位置
child: Container(
height: 300,
color: Colors. yellow,
)
),
]
3.定位

body: SizedBox(
height: 400,
width: 400,
child: Stack(
alignment:Alignment.topRight,//alignment可以设置左对齐或右对齐
children: <Widget>[
Positioned(
left: 15,
right:20,
top: 30,
child: Container(
heipht: 100,
width: 100,
color: Colors. red

),
),
Positioned(
right: 100,
top: 100,
child: Container(
width: 200,
height: 200,
color: Colors. blue
),
),
]
),
)
4.流式布局

body: Wrap(
children: <Widget>[
Container(
width: 150,
height: 150,
color: Colors. red.
).
Container(
width: 150,
height: 150,
color: Colors. blue,
).
Container(
width: 150,
height: 150,
color: Colors. black,
)
]
六、容器

1.内边距padding

body: Container(
width: 400,
height: 400,
color: Colors.red,
child: Padding(
padding: EdgeInsets.only(top:100),
child: Container(
color: Colors. blue
),
),
)
2.布范围制类容器

body: ConstrainedBox(
constraints: BoxConstraints. expand().//编辑剩余空间
constraints: BoxConstraints(
minWidth: double.infinity,
minHeipht: 200,
maxHeight: 300
),
child: Container(
width: 1,
color: Colors.red
)
)
);

3.装饰容器

body: DecoratedBox(decoration: BoxDecoration(
gradient: LinearGradient (colors: ),
borderRadius: BorderRadius. all(Radius. circular(3. 0)),
boxShadow: [
BoxShadow(
color: Colors. black,
offset: Offset(3, 3),
blurRadigs: 4.0
)
]
),
child: FlatButton(onPressed: null, child: Text ('test button')))

4.变换transform

Container(
margin: const EdgeInsets.fromLTRB(20, 100, 20, 20),
color: Colors.green,
child: Transform(
alignment: Alignment.bottomRight, //原点
transform: Matrix4.skewY(0.5), //沿Y轴倾斜0.5弧度
child: Container(
   padding: const EdgeInsets.all(10),
   color: Colors.brown,
   child: Text("Flutter NB"),
),
),
width: 100,
height: 50,
),
Text("平移"),
DecoratedBox(
decoration: BoxDecoration(color: Colors.purple),
child: Transform.translate(
//原点为左上角往右平移 50往下平移10
offset: Offset(50, 10),
child: Text("谁是最可爱的人?"),
),
),
Container(
margin: const EdgeInsets.only(top: 50),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
   Text("旋转"),
   DecoratedBox(
   decoration: BoxDecoration(color: Colors.purple),
   child: Transform.rotate(
      angle: pi / 2,
      child: Text("是他是他就是他"),
   ),
   ),
],
),
),
Container(
margin: const EdgeInsets.only(left: 100, top: 50),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
   Text("缩放"),
   DecoratedBox(
   decoration: BoxDecoration(color: Colors.purple),
   child: Transform.scale(
      scale: 2, //放大2倍
      child: Text("大大泡泡糖"),
   ),
   ),
],
),
),
5.Container

body: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(bottom: 20),
color: Colors.blue,
height: 200,
width: 300,
alignment: Alignment.centerRight,
child: Text("C_1"),
),
Container(
margin: EdgeInsets.only(top: 20),
color: Colors.red,
height: 200,
width: 300,
alignment: Alignment.centerRight,
child: Text("C_2"),
),
Container(
margin: EdgeInsets.all(50),
color: Colors.yellow,
child: Text("C_3"),
)
]
)
6.可滚动widgets

body: Scrollbar(
child: SingleChildScrollView(
child: Container(
height: 3000,
color: Colors.red
)
),
)
body: Column(
children: <Widget>[
ListTile(title:Text(因定的表头”)),
Container(
height: 400,
child: ListView. builder(
itemCount: 50,
itemExtent: 50,
itemDuilder: (BuildContext context, int index) {
return Text (' + index. toString0);
)),
)
],
)

body: GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
childAspectRatio: 1
),
children: <Widget>[
Text("1"),
Text("2"),
Text("3"),
Text("4"),
Text("5"),
Text("6"),
Text("7"),
Text("8"),
Text("9")
]
)
七、脚手架Scaffold

1.topBar和底部导航

class _MyStateWidget extends State<MyStateWidget> {
int currnetIndex=1:
List<StatelessWidget> pageList = {
BusPage(),
PlanePage(),
MinePage(),
};
@override
Widget build(BuildContext context) (
return Scaffold(
appBar: AppBar(
title: Text("第一个标题”),
actions: <Widget>[
IconButton(icon: Icon(MyIcon.huawei), onPressed:(){
print(' you clicked huawei’);
},)
],
),
body: this.pageList,
bottomNavigationBar: BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(icon: Icon(Icons.airport_shuttle), title: Text("bus')).
BottomNavigationBarItem(icon: Icon(Icons.airport_shuttle), title: Text("plane')).
BottomNavigationBarItem(icon: Icon(Icons.airport_shuttle), title: Text("mine')).
currentIndex: this.currentIndex.
onTap: (index){
setState(()(
this.currentIndex = index;
}):
],
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
print(' you clicked +');
}
),
}
2.TabBar

class _BusPageState extends State<BusPage> with SingleTickerProviderStateMixin {
List _tabs = ["金杯", "奔驰", "丰田"];
TabController _controller;

@override
void initState()(
//T0D0: implement initState
super.initState():
this._controller = TabController(length: _tabs.length, vsync:this);
}
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Container(
color: Colors.pink,
child: TabBar(
controller: _controller.
tabs:_tabs,map((t)=> Tab(text: t).toList().
)
),
Container(
height: 400,
child: TabBarView(
controller: _controller,
children: _tabs.map((t)=>Container(child: Text(t + "的内容"),)).toList()
)
)
],
),
]
}
3.抽屉drawer

class MyStateWidget extends State<MyStateWidget> {
int currentIndex = 1:
List pageList=[
BusPage(),
PlanePage(),
MinePage()
]:
GlobalKey<ScaffoldState> _globalKey = new GlobalKey();
@override
Widget build(BuildContext context) {
return Scaffold(
key: _globalKey,
appBar: AppBar(
title: Text("第一个标题”),
leading: IconButton(icon: Icon(Icons.dashboard, onPressed:()(
_globalKey.currentState.openDrawer():
}),
actions: <Widget>[
IconButton(icon: Icon(MyIcon.huarei), onPressed: (){
print(’ you clicked huawei’);
}.)
],
),
drawer: Container(
width: 300,
color: Colors.pink,
child: Column(
children: <Widget>[
Text(“抽屉内容区域”)
],
)
),
body: this.pageList,
bottomNavigationBar: BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(icon: Icon(Icons.airport_shuttle), title: Text("bus')).
BottomNavigationBarItem(icon: Icon(Icons.airport_shuttle), title: Text("plane')).
BottomNavigationBarItem(icon: Icon(Icons.airport_shuttle), title: Text("mine')).
currentIndex: this.currentIndex.
onTap: (index){
setState(()(
this.currentIndex = index;
}):
],
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
print(' you clicked +');
}
),
}
八、事件

1.指针事件

body: Listener(
onPointerDown: (e) {
print("down");
},
onPointerUp: (e) {
print("up");
},
onPointerMove: (e) {
print("move");
},
onPointerCancel: (e) {
print("cancel");
},
child: Container(
height: 200,
width: 200,
color: Colors.red
),
)
2.手势事件

body: GestureDetector(
child: Container(
width: 200,
height: 200,
color: Colors.blue
),
onTap: () {
print("tap");
},
onDoubleTap: () {
print("double tap");
},
onLongPress: () {
print("long press");
},
onHorizontalDragStart: (e) {
print("HorizontalDragStart");
},
onScaleUpdate: (e) {
print("ScaleUpdate");
},
)
九、网络请求

1.http请求

class MyPage extends StatefulWidget {
@override
_MyPageState createState() => _MyPageState();
}
class _MyPageState extends State<MyPage> {
String _data = "";
@override
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
FlatButton(onPressed: () async{
Dio dio = new Dio();
Response res = await dio.get("https://www.baidu.com", queryParameters: {"username": "good", "psw": "123456"});
// dio.post("https://www.baidu.com", data: {"username": "good", "psw": "123456"});
// dio.download("https://www.baidu.com/logo.png", savePath);
print("result：" + res.data.toString());
setState((){
_data = res.data.toString();
});
},
child: Text("发起http请求"),
color: Colors.red
),
Scrollbar(
child: Container(
height: 400,
child: SingleChildScrollView(
child:Text(_data)
),
),
)
],
),
);
}
}

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

页: [1]

ToB企服应用市场:ToB评测及商务社交产业平台's Archiver

Flutter入门学习