一、删除掉右上角debug标志
debugShowCheckedModeBanner: false,
二、显示图片
显示图片需要手动创建文件夹
1)在根目录创建images文件夹,在里面分别创建2.0x 3.0x文件用于屏幕适配
2)在pubspec.yaml文件中将ass注释打开
3)注意打开注释后整理代码不然会提示有空格错误
4)下列代码片段只是测试用味蕾屏幕效果将宽高写死
child: new Image.asset(
"images/icon_welcome.png",
fit: BoxFit.fitHeight,
width: 450,
height: 896,
),
三、添加画面背景图片
- 注意这里使用背景图片的时候return不要使用Column否则显示不全
class _MyHomePageState extends State {
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/icon_welcome.png"),
fit: BoxFit.cover,
)),
child: Center(
child: Text('Hello Wolrd', style: TextStyle(fontSize: 22.0, color: Colors.white),),
),
);
}
}
四、计时器功能
- 使用Timer之后要在dispose生命周期中销毁
class _MyHomePageState extends State {
Timer _timer;
var count = 0;
String textContent() {
if (count > 0) {
return '${count} s';
} else {
print('应该跳转界面');
return '0s';
}
}
@override
void initState() {
//Flutter 生命周期 创建时在build之后调用
print('开始倒计时');
count = 5;
final call = (timer) {
// 预定时间小于1的时候结束计时器
if (count < 1) {
Navigator.of(context).pushAndRemoveUntil(new MaterialPageRoute(
builder: (BuildContext context) => new NavigationBarView()), (//跳转到主页
Route route) => route == null);
_timer.cancel();
} else {
setState(() {
// 大于一的时候重新赋值
count -= 1;
});
}
};
if (_timer == null) {
_timer = Timer.periodic(Duration(seconds: 1), call);
}
}
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/icon_welcome.png"),
fit: BoxFit.cover,
)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
new Container(
child: new Text(
textContent(),
style: TextStyle(
fontSize: 20,
color: Colors.black,
decoration: TextDecoration.none),
),
margin: EdgeInsets.fromLTRB(0, 50, 20, 0),
)
],
),
);
}
@override
void dispose() {
// 界面销毁后将计时器取消
_timer.cancel();
super.dispose();
}
五、底部导航栏
- 部分内容解释
| HomeViwe | 对应四个底部按钮--首页 |
|---|---|
| ObjectView | 对应四个底部按钮--项目 |
| NavigationApp | 对应四个底部按钮--导航 |
| IndividualView | 对应四个底部按钮--个人 |
| style: TextStyle(color: Colors.black), | 底部导航栏动画样式,使其显示文字 |
| image | 导航栏中显示的图标 |
| activeIcon | 导航栏中选中时显示的图标 |
class NavigationBarState extends State {
int index = 0;
List pages = new List();
@override
void initState() {
// TODO: implement initState
super.initState();
pages
..add(HomeViwe())
..add(ObjectView())
..add(NavigationApp())
..add(IndividualView());
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
bottomNavigationBar: BottomNavigationBar(
// 主动显示导航栏上标的文字
// 选中时才显示标签上的文字 shifting
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
icon: Image(
image: AssetImage("images/icon_home.png"),
width: 35,
height: 35,
),
title: Text(
"首页",
style: TextStyle(color: Colors.black),
),
activeIcon: Image(
image: AssetImage("images/icon_home_click.png"),
width: 35,
height: 35,
)),
BottomNavigationBarItem(
icon: Image(
image: AssetImage("images/icon_object.png"),
width: 35,
height: 35,
),
title: Text(
"项目",
style: TextStyle(color: Colors.black),
),
activeIcon: Image(
image: AssetImage("images/icon_object_click.png"),
width: 35,
height: 35,
)),
BottomNavigationBarItem(
icon: Image(
image: AssetImage("images/icon_navigation.png"),
width: 35,
height: 35,
),
title: Text(
"导航",
style: TextStyle(color: Colors.black),
),
activeIcon: Image(
image: AssetImage("images/icon_navigation_click.png"),
width: 35,
height: 35,
)),
BottomNavigationBarItem(
icon: Image(
image: AssetImage("images/icon_individual.png"),
width: 35,
height: 35,
),
title: Text(
"个人",
style: TextStyle(color: Colors.black),
),
activeIcon: Image(
image: AssetImage("images/icon_individual_click.png"),
width: 35,
height: 35,
))
],
currentIndex: index,
onTap: (int i) {
setState(() {
index = i;
});
},
),
body: pages[index],
);
}
六、首页上的轮播图
- 首先在pubspec.yaml文件中添加轮播图依赖(注意添加位置dependencies/flutter:下面添加)
flutter_swiper: ^1.0.6
class HomePageState extends State {
List list = new List();
@override
void initState() {
// TODO: implement initState
super.initState();
list
..add("http://sw-mirror.com/flutter%2Ftestpng.png")
..add("http://sw-mirror.com/flutter%2FThailand.png");
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.green,
title: Text("首页"),
),
body: Container(
width: MediaQuery.of(context).size.width,
height: 200,
child: Swiper(
pagination: //添加标记码
SwiperPagination(alignment: Alignment.bottomCenter),
autoplay: true, //设置自动播放
itemCount: list.length, //设置item的个数
itemBuilder: (BuildContext context, int index) {
//设置item的内容
return Image.network(
list[index],
fit: BoxFit.fill,
);
},
),
));
}
}
GitHub仓库地址