APP 導航框架與常用功能實作
APP 首頁框架搭建
首先，先新建這些檔案：
tab_navigator.dart 檔案代碼如下：
import 'package:flutter/material.dart';
import 'package:xiecheng/pages/home_page.dart';
import 'package:xiecheng/pages/my_page.dart';
import 'package:xiecheng/pages/search_page.dart';
import 'package:xiecheng/pages/travel_page.dart';
class TabNavigator extends StatefulWidget {
@override
_TabNavigatorState createState() => _TabNavigatorState();
}
class _TabNavigatorState extends State<TabNavigator> {
final _defaultColor = Colors.grey;
final _activeColor = Colors.blue;
int _currentIndex = 0;
final PageController _controller = PageController(
initialPage: 0,
);
@override
Widget build(BuildContext context) {
return Scaffold(
body: PageView(
controller: _controller,
children: [
HomePage(),
MyPage(),
SearchPage(),
TravelPage(),
],
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
onTap: (index) {
_controller.jumpToPage(index);
setState(() {
_currentIndex = index;
});
},
type: BottomNavigationBarType.fixed, //把lable進行固定
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.home,
color: _defaultColor,
),
activeIcon: Icon(
Icons.home,
color: _activeColor,
),
title: Text(
'首頁',
style: TextStyle(
color: _currentIndex != 0 ? _defaultColor : _activeColor,
),
),
),
BottomNavigationBarItem(
icon: Icon(
Icons.search,
color: _defaultColor,
),
activeIcon: Icon(
Icons.search,
color: _activeColor,
),
title: Text(
'搜索',
style: TextStyle(
color: _currentIndex != 1 ? _defaultColor : _activeColor,
),
),
),
BottomNavigationBarItem(
icon: Icon(
Icons.camera_alt,
color: _defaultColor,
),
activeIcon: Icon(
Icons.camera_alt,
color: _activeColor,
),
title: Text(
'旅拍',
style: TextStyle(
color: _currentIndex != 2 ? _defaultColor : _activeColor,
),
),
),
BottomNavigationBarItem(
icon: Icon(
Icons.account_circle,
color: _defaultColor,
),
activeIcon: Icon(
Icons.account_circle,
color: _activeColor,
),
title: Text(
'我的',
style: TextStyle(
color: _currentIndex != 3 ? _defaultColor : _activeColor,
),
),
),
],
),
);
}
}
home_page.dart 檔案代碼如下：
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text('首頁'),
),
);
}
}
my_page.dart 檔案代碼如下：
import 'package:flutter/material.dart';
class MyPage extends StatefulWidget {
@override
_MyPageState createState() => _MyPageState();
}
class _MyPageState extends State<MyPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text('我的'),
),
);
}
}
search_page.dart 檔案代碼如下：
import 'package:flutter/material.dart';
class SearchPage extends StatefulWidget {
@override
_SearchPageState createState() => _SearchPageState();
}
class _SearchPageState extends State<SearchPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text('搜索'),
),
);
}
}
travel_page.dart 檔案代碼如下：
import 'package:flutter/material.dart';
class TravelPage extends StatefulWidget {
@override
TravelPageState createState() => TravelPageState();
}
class TravelPageState extends State<TravelPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text('旅拍'),
),
);
}
}
最后將 main.dart 的代碼進行微小的修改：
就可以運行啦：
輪播圖 Banner 功能開發
輪播圖需要用到的 swiper 插件，我們可以去 pub 網站上去找：
打開 pub 網站，搜索 swiper 即可：
這時候我們查看該插件的 Installing，里面會告訴你如何引入該插件：
這時候我們按照它說的步驟做就好啦：
引入后 VSCode 的右上角會出現一個下載的標志，點擊下載即可；
然后編輯 home_page.dart 里的代碼：
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List _imageUrls = [
'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1976529436,2778459069&fm=26&gp=0.jpg',
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3597917999,2966077325&fm=26&gp=0.jpg',
'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3352739916,685169444&fm=26&gp=0.jpg',
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
children: [
Container(
height: 160,
child: Swiper(
itemCount: _imageUrls.length,
autoplay: true,
itemBuilder: (BuildContext context, int index) {
return Image.network(
_imageUrls[index],
fit: BoxFit.fill,
);
},
pagination: SwiperPagination(),
),
),
],
),
),
);
}
}
運行界面如下：
自定義 AppBar 實作滾動漸變
修改 home_page.dart 的代碼，如下：
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
const APPBAR_SCROLL_OFFSET = 100; //設定滾動最大距離
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List _imageUrls = [
'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1976529436,2778459069&fm=26&gp=0.jpg',
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3597917999,2966077325&fm=26&gp=0.jpg',
'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3352739916,685169444&fm=26&gp=0.jpg',
];
double appBarAlpha = 0.0;
_onScroll(offset) {
double alpha = offset / APPBAR_SCROLL_OFFSET;
if (alpha < 0.0) {
alpha = 0.0;
} else if (alpha > 1.0) {
alpha = 1.0;
}
setState(() {
appBarAlpha = alpha;
});
// print(appBarAlpha);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
MediaQuery.removePadding(
//把頂部預留的安全區域去掉
removeTop: true,
context: context,
child: NotificationListener(
//監聽串列的滾動
onNotification: (scrollNotification) {
if (scrollNotification is ScrollUpdateNotification &&
scrollNotification.depth == 0) {
//滾動且是串列滾動的時候
_onScroll(scrollNotification.metrics.pixels);
}
},
child: ListView(
children: [
Container(
height: 160,
child: Swiper(
itemCount: _imageUrls.length,
autoplay: true,
itemBuilder: (BuildContext context, int index) {
return Image.network(
_imageUrls[index],
fit: BoxFit.fill,
);
},
pagination: SwiperPagination(),
),
),
Container(
height: 800,
child: ListTile(
title: Text('阿巴阿巴阿巴'),
),
),
],
),
),
),
Opacity(
//自定義AppBar
opacity: appBarAlpha,
child: Container(
height: 80,
decoration: BoxDecoration(color: Colors.white),
child: Center(
child: Padding(
padding: EdgeInsets.only(top: 20),
child: Text('首頁'),
),
),
),
)
],
),
);
}
}
運行界面：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/247222.html
標籤：區塊鏈