App功能介紹頁，主要是由介紹app功能的幾張圖片和當(dāng)前頁指示符組成，如下效果
成都創(chuàng)新互聯(lián)公司服務(wù)項目包括北塔網(wǎng)站建設(shè)、北塔網(wǎng)站制作、北塔網(wǎng)頁制作以及北塔網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，北塔網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到北塔省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
我們來一步一步實現(xiàn)上面的界面,左右滑動切換顯示功能頁,這個可以通過PageView來實現(xiàn),底部的指示符半透明覆蓋在PageView上,開發(fā)過Android同學(xué)知道可以用Framelayout布局來實現(xiàn)，F(xiàn)lutter上也有類似的控件Stack，我們先完成骨架代碼
重慶分公司
重慶分公司
// An highlighted block
void main() => runApp(App());
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Title',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: AppFuncBrowse(),
);
}
}
class AppFuncBrowse extends StatefulWidget {
@override
_AppFuncBrowseState createState() {
return _AppFuncBrowseState();
}
}
class _AppFuncBrowseState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.white,
child: Stack(
children: [
],
),
));
}
} AppFuncBrowse 就是我們功能介紹頁，上面編譯運行功能后，我們先來著手實現(xiàn)功能介紹頁面切換,PageView主要有兩類構(gòu)建函數(shù)，一個是懶加載頁面（適合頁面很多時使用），一個是適合少量頁面的一次性加載的，我們實例顯示3個頁面，就簡單的用這種方式， PageView用到了PageController用來控制顯示哪一頁，先定義它
class _AppFuncBrowseState extends State{ PageController _pageController = PageController(); //省略... }
有了PageController我們就可以創(chuàng)建PageView，代碼如下
Widget _createPageView() {
return PageView(
controller: _pageController,
onPageChanged: (pageIndex) {
setState(() {
_pageIndex = pageIndex;
print(_pageController.page);
print(pageIndex);
});
},
children: [
Container(
color: Colors.blue,
child: Center(
child: Text('Page 1'),
),
),
Container(
color: Colors.red,
child: Center(
child: Text('Page 2'),
),
),
Container(
color: Colors.green,
child: Center(
child: Text('Page 3'),
),
),
],
);
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: Container(
color: Colors.white,
// margin: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
child: Stack(
children: [
_createPageView(),
],
),
));
} 
到這里我們完成了一個可以左右滑動的功能頁， 每頁的內(nèi)容大家可以自定義，一般是一張圖片，我這里為了簡單起見直接顯示Text，到目前為止我們離目標(biāo)還缺一個頁碼指示器，學(xué)過iOS的非常熟悉，需要用到UIPageControl，可惜的是到目前為止Flutter還沒提供該原生控件，我們只能自己實現(xiàn)它，其實也很簡單，代碼如下：
_createPageIndicator() {
return Opacity(
opacity: 0.7,
child: Align(
alignment: FractionalOffset.bottomCenter,
child: Container(
margin: EdgeInsets.only(bottom: 60),
height: 40,
width: 80,
padding: EdgeInsets.all(0),
decoration: BoxDecoration(
color: Colors.grey, //.withAlpha(128),
borderRadius: BorderRadius.all(const Radius.circular(6.0))),
child: GestureDetector(
behavior: HitTestBehavior.translucent,
onTapUp: (detail) => _handlePageIndicatorTap(detail),
child: Row(
key: _pageIndicatorKey,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.min,
children: [
_dotWidget(0),
_dotWidget(1),
_dotWidget(2),
]),
),
),
),
);
} 咋一看感覺好復(fù)雜，其實也很簡單，學(xué)過設(shè)計模式的同學(xué)可能看出和裝飾者模式一樣，widget層次結(jié)構(gòu)就類似這種模式，這也是Flutter的強大之處，用現(xiàn)有的控件可以組合出各種效果，首先我們用Opacity控件來封裝子控件，設(shè)置opacity使其成為半透明，然后使用Align控制其底部對齊，為了使其距離底部一段距離，還需要Container來包裝，為了實現(xiàn)圓角的Container，強大的decoration屬性就登場了，它能實現(xiàn)各種裝飾效果，這里我們實現(xiàn)的效果是灰色背景和圓角。
現(xiàn)在講完了這些裝修，就剩下三個點了，三個點在同一水平線上，所以我們用Row來做為父控件，Row有幾個屬性值注意
mainAxisAlignment 主軸對齊方式，Row的主軸是水平方向，
crossAxisAlignment 主軸的垂直方向?qū)R方式，Row的主軸是水平方向，所以該字段表示上下對齊方式
mainAxisSize 主軸方向的大小，對Row來說即寬度
與Row對應(yīng)的控件是Column,其對應(yīng)上面屬性剛好相反
上面屬性的其他值可以自己試驗，我們這里用到
mainAxisAlignment: MainAxisAlignment.spaceEvenly, mainAxisSize: MainAxisSize.min,
表示子控件左右（包含與父控件）間距相同，并且寬度保持最小，最后我們來實現(xiàn)三個點，當(dāng)前頁的對應(yīng)的點顏色需要和其他未顯示的頁有所區(qū)別，我們需要記錄當(dāng)前是第幾頁，從而使對應(yīng)的第幾個點highlight顯示
class _AppFuncBrowseState extends State{ PageController _pageController = PageController(); int _pageIndex = 0;
然后就可以創(chuàng)建點了
_dotWidget(int index) {
return Container(
width: 10,
height: 10,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: (_pageIndex == index) ? Colors.white70 : Colors.black12));
}滑動PageView，需要更新_pageIndex,從而對應(yīng)的更新當(dāng)前頁對應(yīng)的點的顏色
return PageView(
controller: _pageController,
onPageChanged: (pageIndex) {
setState(() {
_pageIndex = pageIndex;
print(_pageController.page);
print(pageIndex);
});
},onPageChanged就是PageView換頁的事件，這里需要調(diào)用setState從而使Widget重建更新當(dāng)前頁的點顏色
到這里為止就剩下點擊點更新PageView的功能了，我們來實現(xiàn)點擊功能，就是監(jiān)聽點擊手勢，代碼如下
_handlePageIndicatorTap(TapUpDetails detail) {
RenderBox renderBox =
_pageIndicatorKey.currentContext.findRenderObject();
Size widgeSize = renderBox.paintBounds.size;
Offset tapOffset =
renderBox.globalToLocal(detail.globalPosition);
if (tapOffset.dx > widgeSize.width / 2) {
_scrollToNextPage();
} else {
_scrollToPreviousPage();
}
}手勢有一個屬性behavior需要值得注意，默認(rèn)值為deferToChild，具體取值如下：
behavior: HitTestBehavior.translucent 控制響應(yīng)的點擊區(qū)域：
translucent 表示整個區(qū)域，被遮擋的子視圖也能響應(yīng)
opaque 表示整個區(qū)域，被遮擋的子視圖不能響應(yīng)
deferToChild 表示點擊到子視圖才響應(yīng)，手勢默認(rèn)behavior
需要實現(xiàn)點擊左半部分向前翻頁，點擊后半部分向后翻頁，我們需要判斷當(dāng)前點擊的區(qū)域，這就需要找到Row的RenderObject來獲取控件區(qū)域，然后獲取點擊相對控件的偏移來確定，具體見代碼,_pageIndicatorKey就是傳給Row的key，具體定義如下
class _AppFuncBrowseState extends State{ PageController _pageController = PageController(); int _pageIndex = 0; GlobalKey<_AppFuncBrowseState> _pageIndicatorKey = GlobalKey();
現(xiàn)在只剩下前后翻頁的代碼了，代碼如下
_scrollToPreviousPage() {
if (_pageIndex > 0) {
_pageController.animateToPage(_pageIndex - 1,
duration: const Duration(milliseconds: 200), curve: Curves.ease);
}
}以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
