溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
App功能介紹頁，主要是由介紹app功能的幾張圖片和當前頁指示符組成，如下效果
我們來一步一步實現上面的界面,左右滑動切換顯示功能頁,這個可以通過PageView來實現,底部的指示符半透明覆蓋在PageView上,開發過Android同學知道可以用Framelayout布局來實現，Flutter上也有類似的控件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 就是我們功能介紹頁，上面編譯運行功能后，我們先來著手實現功能介紹頁面切換,PageView主要有兩類構建函數，一個是懶加載頁面（適合頁面很多時使用），一個是適合少量頁面的一次性加載的，我們實例顯示3個頁面，就簡單的用這種方式， PageView用到了PageController用來控制顯示哪一頁，先定義它
class _AppFuncBrowseState extends State<AppFuncBrowse> {
PageController _pageController = PageController();
//省略...
}
有了PageController我們就可以創建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(),
],
),
));
}
到這里我們完成了一個可以左右滑動的功能頁， 每頁的內容大家可以自定義，一般是一張圖片，我這里為了簡單起見直接顯示Text，到目前為止我們離目標還缺一個頁碼指示器，學過iOS的非常熟悉，需要用到UIPageControl，可惜的是到目前為止Flutter還沒提供該原生控件，我們只能自己實現它，其實也很簡單，代碼如下：
_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),
]),
),
),
),
);
}
咋一看感覺好復雜，其實也很簡單，學過設計模式的同學可能看出和裝飾者模式一樣，widget層次結構就類似這種模式，這也是Flutter的強大之處，用現有的控件可以組合出各種效果，首先我們用Opacity控件來封裝子控件，設置opacity使其成為半透明，然后使用Align控制其底部對齊，為了使其距離底部一段距離，還需要Container來包裝，為了實現圓角的Container，強大的decoration屬性就登場了，它能實現各種裝飾效果，這里我們實現的效果是灰色背景和圓角。
現在講完了這些裝修，就剩下三個點了，三個點在同一水平線上，所以我們用Row來做為父控件，Row有幾個屬性值注意
mainAxisAlignment 主軸對齊方式，Row的主軸是水平方向，
crossAxisAlignment 主軸的垂直方向對齊方式，Row的主軸是水平方向，所以該字段表示上下對齊方式
mainAxisSize 主軸方向的大小，對Row來說即寬度
與Row對應的控件是Column,其對應上面屬性剛好相反
上面屬性的其他值可以自己試驗，我們這里用到
mainAxisAlignment: MainAxisAlignment.spaceEvenly, mainAxisSize: MainAxisSize.min,
表示子控件左右（包含與父控件）間距相同，并且寬度保持最小，最后我們來實現三個點，當前頁的對應的點顏色需要和其他未顯示的頁有所區別，我們需要記錄當前是第幾頁，從而使對應的第幾個點highlight顯示
class _AppFuncBrowseState extends State<AppFuncBrowse> {
PageController _pageController = PageController();
int _pageIndex = 0;
然后就可以創建點了
_dotWidget(int index) {
return Container(
width: 10,
height: 10,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: (_pageIndex == index) ? Colors.white70 : Colors.black12));
}
滑動PageView，需要更新_pageIndex,從而對應的更新當前頁對應的點的顏色
return PageView(
controller: _pageController,
onPageChanged: (pageIndex) {
setState(() {
_pageIndex = pageIndex;
print(_pageController.page);
print(pageIndex);
});
},
onPageChanged就是PageView換頁的事件，這里需要調用setState從而使Widget重建更新當前頁的點顏色
到這里為止就剩下點擊點更新PageView的功能了，我們來實現點擊功能，就是監聽點擊手勢，代碼如下
_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 控制響應的點擊區域：
translucent 表示整個區域，被遮擋的子視圖也能響應
opaque 表示整個區域，被遮擋的子視圖不能響應
deferToChild 表示點擊到子視圖才響應，手勢默認behavior
需要實現點擊左半部分向前翻頁，點擊后半部分向后翻頁，我們需要判斷當前點擊的區域，這就需要找到Row的RenderObject來獲取控件區域，然后獲取點擊相對控件的偏移來確定，具體見代碼,_pageIndicatorKey就是傳給Row的key，具體定義如下
class _AppFuncBrowseState extends State<AppFuncBrowse> {
PageController _pageController = PageController();
int _pageIndex = 0;
GlobalKey<_AppFuncBrowseState> _pageIndicatorKey = GlobalKey();
現在只剩下前后翻頁的代碼了，代碼如下
_scrollToPreviousPage() {
if (_pageIndex > 0) {
_pageController.animateToPage(_pageIndex - 1,
duration: const Duration(milliseconds: 200), curve: Curves.ease);
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
