网络营销推广公司网站有哪些,青岛正规品牌网站制作策划,做网站需要人在看吗,排名网站优化培训App功能介绍页#xff0c;主要是由介绍app功能的几张图片和当前页指示符组成#xff0c;如下效果我们来一步一步实现上面的界面,左右滑动切换显示功能页,这个可以通过PageView来实现,底部的指示符半透明覆盖在PageView上,开发过Android同学知道可以用Framelayout布局来实现主要是由介绍app功能的几张图片和当前页指示符组成如下效果我们来一步一步实现上面的界面,左右滑动切换显示功能页,这个可以通过PageView来实现,底部的指示符半透明覆盖在PageView上,开发过Android同学知道可以用Framelayout布局来实现Flutter上也有类似的控件Stack我们先完成骨架代码// An highlighted blockvoid main() runApp(App());class App extends StatelessWidget {overrideWidget 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 {overrideWidget build(BuildContext context) {return Scaffold(body: Container(color: Colors.white,child: Stack(children: [],),));}}AppFuncBrowse 就是我们功能介绍页上面编译运行功能后我们先来着手实现功能介绍页面切换,PageView主要有两类构建函数一个是懒加载页面(适合页面很多时使用)一个是适合少量页面的一次性加载的我们实例显示3个页面就简单的用这种方式 PageView用到了PageController用来控制显示哪一页先定义它class _AppFuncBrowseState extends State {PageController _pageController PageController();//省略...}有了PageController我们就可以创建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),),),],);}overrideWidget build(BuildContext context) {// TODO: implement buildreturn Scaffold(body: Container(color: Colors.white,// margin: EdgeInsets.only(top: MediaQuery.of(context).padding.top),child: Stack(children: [_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: [_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 {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 {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);}}以上就是本文的全部内容希望对大家的学习有所帮助也希望大家多多支持脚本之家。
