如何使用Flutter實現(xiàn)App功能引導(dǎo)頁

這篇文章將為大家詳細講解有關(guān)如何使用Flutter實現(xiàn)App功能引導(dǎo)頁，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

App功能介紹頁，主要是由介紹app功能的幾張圖片和當前頁指示符組成，如下效果

我們來一步一步實現(xiàn)上面的界面,左右滑動切換顯示功能頁,這個可以通過PageView來實現(xiàn),底部的指示符半透明覆蓋在PageView上,開發(fā)過Android同學(xué)知道可以用Framelayout布局來實現(xiàn)，F(xiàn)lutter上也有類似的控件Stack，我們先完成骨架代碼

// An highlighted blockvoid 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<AppFuncBrowse> { @override Widget build(BuildContext context) { return Scaffold(  body: Container(  color: Colors.white,  child: Stack(  children: <Widget>[  ],  ), )); }}

AppFuncBrowse 就是我們功能介紹頁，上面編譯運行功能后，我們先來著手實現(xiàn)功能介紹頁面切換,PageView主要有兩類構(gòu)建函數(shù)，一個是懶加載頁面（適合頁面很多時使用），一個是適合少量頁面的一次性加載的，我們實例顯示3個頁面，就簡單的用這種方式， PageView用到了PageController用來控制顯示哪一頁，先定義它

class _AppFuncBrowseState extends State<AppFuncBrowse> { PageController _pageController = PageController(); //省略...}

有了PageController我們就可以創(chuàng)建PageView，代碼如下

Widget _createPageView() { return PageView(  controller: _pageController,  onPageChanged: (pageIndex) {  setState(() {   _pageIndex = pageIndex;   print(_pageController.page);   print(pageIndex);  });  },  children: <Widget>[  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: <Widget>[   _createPageView(),  ],  ), )); }

到這里我們完成了一個可以左右滑動的功能頁， 每頁的內(nèi)容大家可以自定義，一般是一張圖片，我這里為了簡單起見直接顯示Text，到目前為止我們離目標還缺一個頁碼指示器，學(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: <Widget>[     _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)三個點，當前頁的對應(yīng)的點顏色需要和其他未顯示的頁有所區(qū)別，我們需要記錄當前是第幾頁，從而使對應(yīng)的第幾個點highlight顯示

class _AppFuncBrowseState extends State<AppFuncBrowse> { 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)的更新當前頁對應(yīng)的點的顏色

return PageView(  controller: _pageController,  onPageChanged: (pageIndex) {  setState(() {   _pageIndex = pageIndex;   print(_pageController.page);   print(pageIndex);  });  },

onPageChanged就是PageView換頁的事件，這里需要調(diào)用setState從而使Widget重建更新當前頁的點顏色到這里為止就剩下點擊點更新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需要值得注意，默認值為deferToChild，具體取值如下：

behavior: HitTestBehavior.translucent 控制響應(yīng)的點擊區(qū)域：translucent 表示整個區(qū)域，被遮擋的子視圖也能響應(yīng)opaque 表示整個區(qū)域，被遮擋的子視圖不能響應(yīng)deferToChild 表示點擊到子視圖才響應(yīng)，手勢默認behavior

需要實現(xiàn)點擊左半部分向前翻頁，點擊后半部分向后翻頁，我們需要判斷當前點擊的區(qū)域，這就需要找到Row的RenderObject來獲取控件區(qū)域，然后獲取點擊相對控件的偏移來確定，具體見代碼,_pageIndicatorKey就是傳給Row的key，具體定義如下

class _AppFuncBrowseState extends State<AppFuncBrowse> { 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); } }

關(guān)于“如何使用Flutter實現(xiàn)App功能引導(dǎo)頁”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。