FLUTTER实战应用基础控件使用,引导页,按钮与动画

最新推荐文章于 2024-04-01 13:25:28 发布

importIng

最新推荐文章于 2024-04-01 13:25:28 发布

阅读量970

点赞数

CC 4.0 BY-SA版权

分类专栏： flutter 文章标签： flutter 引导页

本文链接：https://blog.youkuaiyun.com/importIng/article/details/93496372

引导页,一般是用户第一次打开的时候配置几页宣传,说明,如图在这里插入图片描述
看一下页面构成

页面底部有背景
多页滚动
一个带有动画的按钮

选择系统组件
Stack 层叠布局
PageView 滚动效果
OutlineButton 带有外框的一个系统按钮
AnimationController 按钮动画的控制器。

接下来先封装一个带动画的按钮

class AnimationBtn extends StatefulWidget{
//按钮标题
  final String Title;
  
  AnimationController controller;
  Animation<double> animation;

//开始动画方法
  void startAnimation(){
 
    if(controller == null){
      return;
    }
     controller.forward();

  }
AnimationBtn({Key key,this.Title}):super(key:key);
  @override
  _AnimationBtnState createState() => new _AnimationBtnState();
}

class _AnimationBtnState extends State<AnimationBtn> with SingleTickerProviderStateMixin{

  @override
  void initState() {
  //初始化动画控制器和动画
  //配置控制器 动画持续时间
    widget.controller = new AnimationControlle