flutter-实现一个APP引导页
包含的知识点:
1.StateFulWidget的使用
2.PageView的使用
3.Stack布局（类似FramenLayout:实现决定定位）
4.View设置边框
5.给View设置点击事件
6.asset下图片的加载，以及大小设置为剩余的所有
7.沉浸式状态栏
8.获取屏幕尺寸以及状态栏高度
9.前后台切换时生命周期
10.Appbar的一些属性（右侧按钮点击弹出菜单等）
import 'package:flutter/material.dart';
import 'dart:ui'; //获取屏幕尺寸需要导入的包
import 'dart:io';
import 'package:flutter/services.dart';
void main() {
runApp(MyApp());
if (Platform.isAndroid) {
// 沉浸式状态栏1:设置状态栏颜色。
//需要导入下面的包
// import 'dart:io';
// import 'package:flutter/services.dart';
SystemUiOverlayStyle systemUiOverlayStyle =
SystemUiOverlayStyle(statusBarColor: Colors.transparent);
SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
}
}
class MyApp extends StatelessWidget {
// 沉浸式状态栏2:使用AnnotatedRegion包裹是为了处理当状态栏是白色的时候，本来的白色文字看不到了
@override
Widget build(BuildContext context) {
return AnnotatedRegion(
value: SystemUiOverlayStyle.dark,
child: MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: new HomePage(),
));
}
}
class HomePage extends StatefulWidget {
@override
State createState() {
// TODO: implement createState
return new HomePage_State();
}
}
class HomePage_State extends State with WidgetsBindingObserver {
//前后台切换： 监听页面生命周期的变化(注意：只有后台/前台切换的时候才会触发)
AppLifecycleState appLifecycleState;
//按钮点击变色--设置一个state值，按下的时候和抬起改变（跟react的state一样）
bool isClicking1 = false;
//屏幕的宽高
double width;
double height;
//状态栏的高度
double statebar_height;
int pageViewIndex = 0;
@override
void initState() {
// TODO: implement initState
super.initState();
// 前后台切换1：注册生命周期的监听器
WidgetsBinding.instance.addObserver(this);
}
//Pageview的使用
PageView getPageView() {
PageView pageView;
PageController pageController;
var images;
pageController = new PageController();
images = [
"images/welcome1.png",
"images/welcome2.png",
"images/welcome3.png"
];
//加载asset目录下的图片===在项目中新建一个images文件夹，然后把文件放进去，在pubspec.yaml里面配置如下
// assets:
// - images/welcome1.png
//调用使用 Image.Asset('images/a.png')或者下面的new AssetImage('images/a.png')
pageView = new PageView.builder(
itemBuilder: (context, index) {
return new ConstrainedBox(
child: new Image(
image: new AssetImage(images[index]),
fit: BoxFit.fill,
),
constraints: new BoxConstraints.expand(),
);
},
itemCount: images.length,
scrollDirection: Axis.horizontal,
reverse: false,
//是右侧下一个还是左侧下一个
controller: pageController,
onPageChanged: (index) {
print('点击滚动到的位置' + index.toString());
setState(() {
pageViewIndex = index;
});
},
physics: PageScrollPhysics(parent: BouncingScrollPhysics()),
);
return pageView;
}
@override
void dispose() {
// 前后台切换3：销毁的注销他
WidgetsBinding.instance.removeObserver(this); //取消监听
// TODO: implement dispose
super.dispose();
}
//关于生命周期,注意 下面的方法只有页面到后台/前台切换时才会触发
@override
void didChangeAppLifecycleState(AppLifecycleState state) {
print('didChangeAppLifecycleState' + state.toString());
// TODO: implement didChangeAppLifecycleState
// 前后台切换2：前台后切换触发了
setState(() {
appLifecycleState = state;
});
}
//StateFulWidget更新state，从而更新UI
void upDataButtonState(bool clicked) {
setState(() {
isClicking1 = clicked;
});
}
@override
Widget build(BuildContext context) {
// TODO: implement build
//获取屏幕的尺寸信息：注意 只能写在这个方法，不能写在initstate
//需要导入的包 import 'dart:ui';
width = MediaQuery.of(context).size.width;
height = MediaQuery.of(context).size.height;
statebar_height = MediaQuery.of(context).padding.top;
print('手机信息' +
width.toString() +
"/" +
height.toString() +
"/" +
statebar_height.toString());
//stack布局:后进后显示原则。设置绝对定位使用Positined left top bottom right实现上下左右间距，可以只设置一个
return new Scaffold(
body: new Stack(
children: [
new Positioned(
child: getPageView(),
left: 0,
right: 0,
top: 0,
bottom: 0,
),
new Positioned(
//给view添加点击事件，使用GestureDetector便签包裹
child: new GestureDetector(
child: new Container(
padding:
const EdgeInsets.only(left: 10, top: 2, right: 10, bottom: 2),
decoration: new ShapeDecoration(
color: !isClicking1 ? Colors.white : Color(0xff898989),
shape: StadiumBorder(
side: BorderSide(
color: Color(0xff898989),
style: BorderStyle.solid,
width: 1)),
),
child: new Text('跳过'),
),
onTap: () {
print('触发跳过');
},
onTapUp: (TapUpDetails) {
print('触发onTapUp');
upDataButtonState(false);
},
onTapDown: (TapUpDetails) {
print('触发onTapDown');
upDataButtonState(true);
},
onTapCancel: () {
print('触发onTapCancel');
upDataButtonState(false);
},
),
top: 10 + statebar_height,
right: 10,
),
new Positioned(
child: new GestureDetector(
child: Image.asset('images/open_now.png'),
onTap: () {
print('点击了立即开启');
},
),
height: pageViewIndex == 2 ? width / 10 : 0,
bottom: width / 10 - 2,
left: 0,
right: 0,
)
],
));
}
}
//关于toolbar的设置
// appBar: new AppBar(
// backgroundColor: Colors.white,
// centerTitle: true, //标题居中
// leading: new Icon(Icons.arrow_back),
// title: new Text('测试demo'),
// actions: [
// new IconButton(
// icon: new Icon(Icons.add), tooltip: '点击', onPressed: null),
// new PopupMenuButton(
// itemBuilder: (BuildContext context) => >[
// new PopupMenuItem(child: new Row(children: [new Icon(Icons.message),new Text('发起群聊')],
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,),value: '0',),
// new PopupMenuItem(child: new Row(children: [new Icon(Icons.group_add),new Text('添加服务')],
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,),value: '1',),
// new PopupMenuItem(child: new Row(children: [new Icon(Icons.cast_connected),new Text('扫一扫码')],
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,),value: '2',),
// ],
// onSelected: (String action) {
// print('选择的位置' + action);
// },
// )
// ],
// ),