欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2019年07月19日 14:38:17   作者：zhuangch  
這篇文章主要為大家詳細介紹了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 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<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);
 }
 }

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論