文章目录
一、Drawer 组件
二、PageView 组件
三、完整代码示例
四、相关资源
一、Drawer 组件
Scaffold 组件中的 drawer 参数 , 就是设置侧拉导航栏菜单的 , 为其赋值一个 Drawer 组件 ;
Drawer 组件就是侧拉菜单 , 该组件的 child 设置一个 ListView 组件 , 在列表中设置 DrawerHeader , ListTile 等子组件 ;
class Drawer extends StatelessWidget { const Drawer({ Key? key, this.elevation = 16.0, this.child, this.semanticLabel, }) : assert(elevation != null && elevation >= 0.0), super(key: key); }
侧拉菜单示例 :
drawer: Drawer( child: ListView( children: datas.map((TabData data) { /// 单个按钮条目 return ListTile( title: Text(data.title), /// 点击事件 onTap: () { /// 跳转到对应的导航页面 _pageController.jumpToPage(data.index); _currentIndex = data.index; /// 关闭侧拉菜单 Navigator.pop(context); }, ); }).toList(), ), ),
二、PageView 组件
PageView 组件最重要的两个字段 :
PageController? controller
List<Widget> children
PageController 用于控制 PageView 的跳转 , PageController 主要作用是调用 void jumpToPage(int page) 方法 , 进行页面跳转 ;
jumpToPage 页面跳转在底部菜单栏的 onTap 点击事件中调用 , 更新当前页面后 , 需要调用 setState 方法更新界面 ;
PageView 构造函数 :
PageView({ Key? key, this.scrollDirection = Axis.horizontal, // 设置滚动方向 垂直 / 水平 this.reverse = false, // 反向滚动 PageController? controller, // 滚动控制类 this.physics, // 滚动逻辑 , 不滚动 / 滚动 / 滚动到边缘是否反弹 this.pageSnapping = true, // 如果设置 false , 则无法进行页面手势捕捉 this.onPageChanged, // 页面切换时回调该函数 List<Widget> children = const <Widget>[], this.dragStartBehavior = DragStartBehavior.start, this.allowImplicitScrolling = false, this.restorationId, this.clipBehavior = Clip.hardEdge, }) : assert(allowImplicitScrolling != null), assert(clipBehavior != null), controller = controller ?? _defaultPageController, childrenDelegate = SliverChildListDelegate(children), super(key: key);
PageView 代码示例 :
/// 滑动组件 , 界面的核心元素 PageView( /// 控制跳转翻页的控制器 controller: _pageController, /// Widget 组件数组 , 设置多个 Widget 组件 children: datas.map((TabData data) { return Padding( /// 内边距 20 padding: const EdgeInsets.all(20.0), /// PageView 中单个显示的组件 child: TabContent(data: data), ); }).toList(), physics: NeverScrollableScrollPhysics(), ),
