一、刪除掉右上角debug標(biāo)志
debugShowCheckedModeBanner: false,
二颁井、顯示圖片
顯示圖片需要手動創(chuàng)建文件夾
1)在根目錄創(chuàng)建images文件夾,在里面分別創(chuàng)建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<MyHomePage> {
@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<MyHomePage> {
Timer _timer;
var count = 0;
String textContent() {
if (count > 0) {
return '${count} s';
} else {
print('應(yīng)該跳轉(zhuǎn)界面');
return '0s';
}
}
@override
void initState() {
//Flutter 生命周期 創(chuàng)建時在build之后調(diào)用
print('開始倒計時');
count = 5;
final call = (timer) {
// 預(yù)定時間小于1的時候結(jié)束計時器
if (count < 1) {
Navigator.of(context).pushAndRemoveUntil(new MaterialPageRoute(
builder: (BuildContext context) => new NavigationBarView()), (//跳轉(zhuǎn)到主頁
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: <Widget>[
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();
}
五株灸、底部導(dǎo)航欄
- 部分內(nèi)容解釋
| HomeViwe | 對應(yīng)四個底部按鈕--首頁 |
|---|---|
| ObjectView | 對應(yīng)四個底部按鈕--項目 |
| NavigationApp | 對應(yīng)四個底部按鈕--導(dǎo)航 |
| IndividualView | 對應(yīng)四個底部按鈕--個人 |
| style: TextStyle(color: Colors.black), | 底部導(dǎo)航欄動畫樣式,使其顯示文字 |
| image | 導(dǎo)航欄中顯示的圖標(biāo) |
| activeIcon | 導(dǎo)航欄中選中時顯示的圖標(biāo) |
class NavigationBarState extends State<NavigationBarPage> {
int index = 0;
List<Widget> 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(
// 主動顯示導(dǎo)航欄上標(biāo)的文字
// 選中時才顯示標(biāo)簽上的文字 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(
"導(dǎo)航",
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<HomePage> {
List<String> 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: //添加標(biāo)記碼
SwiperPagination(alignment: Alignment.bottomCenter),
autoplay: true, //設(shè)置自動播放
itemCount: list.length, //設(shè)置item的個數(shù)
itemBuilder: (BuildContext context, int index) {
//設(shè)置item的內(nèi)容
return Image.network(
list[index],
fit: BoxFit.fill,
);
},
),
));
}
}
