课程名称：Flutter从入门到进阶 实战携程网App 一网打尽核心技术
课程章节：Flutter入门实战：APP导航框架与常用功能实现
课程讲师：CrazyCodeBoy
课程内容
Scaffold
为了简化布局的开发，Flutter 提供了 Scaffold。Scaffold 定义了一个 UI框架，这个框架包括：
- 头部导航栏（AppBar）,用来定义顶部导航栏；
- Body，用来展示 App 的主体部分，通常又 Container、Column、Row和 Stack 组合实现；
- FloatingActionButton，用来定义浮动在 body 右下角的按钮；
- 底部导航栏（BottomNavigationBar）。
此外，Scaffold 还能实现左、右抽屉的效果。Scaffold 的部分参数说明
/// Creates a visual scaffold for Material Design widgets.
const Scaffold({
super.key,
this.appBar, //顶部导航栏
this.body, //app 主体部分
this.floatingActionButton, //悬浮按钮
this.floatingActionButtonLocation, //悬浮按钮的位置
this.floatingActionButtonAnimator, //悬浮按钮的动画
this.persistentFooterButtons, //在 body 与底部导航栏之间的一组按钮
this.persistentFooterAlignment = AlignmentDirectional.centerEnd,
this.drawer, //左边的抽屉
this.onDrawerChanged, //左边的抽屉发生状态的改变
this.endDrawer, //右边的抽屉
this.onEndDrawerChanged, //右边的抽屉发生状态的改变
this.bottomNavigationBar, //底部导航栏
this.bottomSheet, //底部持久化提示框
this.backgroundColor, //内容区域的背景色
this.resizeToAvoidBottomInset, //当键盘出现时界面重新进行布局
this.primary = true, //AppBar是否显示在屏幕顶部
this.drawerDragStartBehavior = DragStartBehavior.start, //
this.extendBody = false,
this.extendBodyBehindAppBar = false,
this.drawerScrimColor,
this.drawerEdgeDragWidth,
this.drawerEnableOpenDragGesture = true,
this.endDrawerEnableOpenDragGesture = true,
this.restorationId,
})
PageView
PageView 可以实现Widget 的滑动效果，不仅可以水平滑动而且支持垂直滑动。
PageView({
super.key,
this.scrollDirection = Axis.horizontal, //滚动的方向，支持水平和垂直两个方向
this.reverse = false, //是否反方向滚动
PageController? controller, //PageView的控制类
this.physics, //手势滚动逻辑，支持不滚动，总是滚动，与滚动到边缘时是否有bounce
this.pageSnapping = true, //设置为false以禁用页面捕捉，对自定义滚动行为很有用。
this.onPageChanged, //页面切换时调用
List<Widget> children = const <Widget>[],
this.dragStartBehavior = DragStartBehavior.start,
this.allowImplicitScrolling = false,
this.restorationId,
this.clipBehavior = Clip.hardEdge,
this.scrollBehavior,
this.padEnds = true,
})
课程总结
这一章主要介绍了 Flutter 中的 Scaffold 和 Pageview 两个widget。并且通过 Scaffold 实现了 app 首页框架的搭建，通过 Pageview 实现了轮播图 Banner 的功能。