【备战春招】第11天 Flutter中的Scaffold和PageView

课程名称：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 的功能。