Unity_UIWidgets学习笔记02_轮播图实现

主要思路：利用Ticker定时切换TabBarView

 

1，搭建界面

2.添加 Ticker定时器

3、点击切换

修改 TabPageSelectorIndicator类和TabPageSelector部分方法，添加了点击回调

class MovePictoreState : SingleTickerProviderStateMixin<MovePictore>
{
    public List<Widget> AllImage;
    TabController tabController;
    private TimeSpan lastTime;//上次切换时间
    Ticker ticker;//定时器
    int index = 0;//当前Tag索引
    int timeout=2;//间隔时间
    bool isClick;//是否点击
    public MovePictoreState(List<Widget> allImage)
    {
        AllImage = allImage;
    }
    void click(int i)
    {
        isClick = true;
        index = i;
        tabController.animateTo(index);
    }
    public override Widget build(BuildContext context)
    {
        return new Scaffold(
           appBar: new AppBar(title: new Container(
              child: new Text("轮播图实现"),
              alignment: Alignment.center
               )
           ),
           body: new Stack(
           children: new List<Widget>()
           {
                new TabBarView(
                    controller: tabController,
                    children: AllImage
                ),
              new Align(
              alignment:new Alignment(0, 1),
              child:new  TabPageSelector(
              iconClick:click,
              color: Colors.white,
              selectedColor: Colors.black,
              controller: tabController,
              indicatorSize:30
          )
        )
           }
               )


           );
    }
    public override void initState()
    {
        base.initState();
        tabController = new TabController(length: AllImage.Count, vsync: this);
        ticker = new Ticker(tickCallback);
        ticker.start();
    }
    /// <summary>
    /// 每帧都调用
    /// </summary>
    /// <param name="elapsed">距离开始的时间</param>
    private void tickCallback(TimeSpan elapsed)
    {
        if (isClick)
        {
            //如何如果点击就跳过本次计时
            lastTime = elapsed;
            isClick = false;
        }
        else {
            if (null != lastTime && elapsed.Seconds >= lastTime.Seconds)
            {
                if (elapsed.Seconds - lastTime.Seconds > timeout)
                {
                    lastTime = elapsed;
                    index++;
                    tabController.animateTo(index % AllImage.Count);
                }
            }
            else
            {
                lastTime = elapsed;
            }
        }
        
    }
    public override void dispose()
    {
        tabController.dispose();
        base.dispose();
    }
}

 

 4，完善版

public class MovePictore : StatefulWidget
{
    List<Widget> AllImage;
    int timeout;
    public MovePictore(List<Widget> allImage, int timeout = 1)
    {
        AllImage = allImage;
        this.timeout = timeout;
    }
    public override State createState()
    {
        return new MovePictoreState(AllImage, timeout);
    }
}
class MovePictoreState : SingleTickerProviderStateMixin<MovePictore>
{
    public List<Widget> AllImage;
    TabController tabController;
    private TimeSpan lastTime;//上次切换时间
    Ticker ticker;//定时器
    int index = 0;//当前Tag索引
    int timeout = 1;//间隔时间
    bool isClick;//是否点击
    public MovePictoreState(List<Widget> allImage, int timeout = 1)
    {
        AllImage = allImage;
        this.timeout = timeout;
    }
    void click(int i)
    {
        isClick = true;
        index = i;
        tabController.animateTo(index);
    }
    public override Widget build(BuildContext context)
    {
        return new Stack(
           children: new List<Widget>()
           {
                new TabBarView(
                    controller: tabController,
                    children: AllImage
                ),
              new Align(
              alignment:new Alignment(0, 1),
              child:new  TabPageSelector(
              iconClick:click,
              color: Colors.white,
              selectedColor: Colors.black,
              controller: tabController,
              indicatorSize:30
          )
        )
           }
               );
    }
    public override void initState()
    {
        base.initState();
        tabController = new TabController(length: AllImage.Count, vsync: this);
        ticker = new Ticker(tickCallback);
        ticker.start();
    }
    /// <summary>
    /// 每帧都调用
    /// </summary>
    /// <param name="elapsed">距离开始的时间</param>
    private void tickCallback(TimeSpan elapsed)
    {
        if (isClick)
        {
            //如何如果点击就跳过本次计时
            lastTime = elapsed;
            isClick = false;
        }
        else
        {
            if (null != lastTime && elapsed.Seconds >= lastTime.Seconds)
            {
                if (elapsed.Seconds - lastTime.Seconds > timeout)
                {
                    lastTime = elapsed;
                    index++;
                    tabController.animateTo(index % AllImage.Count);
                }
            }
            else
            {
                lastTime = elapsed;
            }
        }

    }
    public override void dispose()
    {
        tabController.dispose();
        ticker.stop();
        ticker.dispose();
        base.dispose();
    }
}