【Android、IOS、Flutter、鸿蒙、ReactNative 】倒计时

Android Java 倒计时

自定义倒计时 参考倒计时跳秒情况

import android.os.CountDownTimer;
import android.util.Log;
public class MyCountDownTimer extends CountDownTimer {

    private ICountDownCallBack iCountDownCallBack;

    public MyCountDownTimer(long millisInFuture,
                            long countDownInterval,
                            ICountDownCallBack countDownCallBack) {
        super(millisInFuture, countDownInterval);
        this.iCountDownCallBack = countDownCallBack;
    }

    @Override
    public void onTick(long millisUntilFinished) {
        // 这里每隔countDownInterval毫秒调用一次
        long countDownTime = millisUntilFinished / 1000;
        // 可以在这里更新UI，显示剩余时间
        Log.i("CountDownTimer", "seconds remaining: " + millisUntilFinished +"__"+countDownTime);
        iCountDownCallBack.countDownResult(countDownTime);
    }

    @Override
    public void onFinish() {
        // 倒计时完成时调用
        Log.d("CountDownTimer", "Countdown finished!");
        iCountDownCallBack.countDownFinish();
    }

    public interface ICountDownCallBack {
        void countDownResult(long countDownTime);

        void countDownFinish();
    }
}

使用倒计时

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private MyCountDownTimer myCountDownTimer;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initCountDown();
    }


    private void initCountDown() {

        TextView tvCountDown = findViewById(R.id.tvCountDown);

        // 倒计时总时间60s
        // 每次倒计时1s
        myCountDownTimer = new MyCountDownTimer(60 * 1000 + 50, 1000, new MyCountDownTimer.ICountDownCallBack() {
            @Override
            public void countDownResult(long countDownTime) {
                tvCountDown.setClickable(false);
                tvCountDown.setText("倒计时" + countDownTime + "s");
            }

            @Override
            public void countDownFinish() {
                tvCountDown.setClickable(true);
                tvCountDown.setText("60s倒计时结束");
            }
        });

        tvCountDown.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                myCountDownTimer.start();
            }
        });
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        // 取消倒计时任务
        myCountDownTimer.cancel();
    }
}

Android Kotlin 倒计时

自定义倒计时

import android.os.CountDownTimer
import android.util.Log

class MyCountDownTimer(
    millisInFuture: Long,
    countDownInterval: Long,
    private val iCountDownCallBack: ICountDownCallBack
) : CountDownTimer(millisInFuture, countDownInterval) {
    override fun onTick(millisUntilFinished: Long) {
        // 这里每隔countDownInterval毫秒调用一次
        val countDownTime = millisUntilFinished / 1000
        // 可以在这里更新UI，显示剩余时间
        Log.i("CountDownTimer", "seconds remaining: " + millisUntilFinished + "__" + countDownTime)
        iCountDownCallBack.countDownResult(countDownTime)
    }

    override fun onFinish() {
        // 倒计时完成时调用
        Log.d("CountDownTimer", "Countdown finished!")
        iCountDownCallBack.countDownFinish()
    }

    interface ICountDownCallBack {
        fun countDownResult(countDownTime: Long)
        fun countDownFinish()
    }
}

使用倒计时

import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    private var myCountDownTimer: MyCountDownTimer? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        initCountDown()
    }

    private fun initCountDown() {
        val tvCountDown = findViewById<TextView>(R.id.tvCountDown)

        // 倒计时总时间60s
        // 每次倒计时1s
        myCountDownTimer = MyCountDownTimer(60 * 1000 + 50, 1000, object :
            MyCountDownTimer.ICountDownCallBack {
            override fun countDownResult(countDownTime: Long) {
                tvCountDown.isClickable = false
                tvCountDown.text = "倒计时" + countDownTime + "s"
            }

            override fun countDownFinish() {
                tvCountDown.isClickable = true
                tvCountDown.text = "60s倒计时结束"
            }
        })
        tvCountDown.setOnClickListener { myCountDownTimer!!.start() }
    }

    override fun onDestroy() {
        super.onDestroy()
        // 取消倒计时任务
        myCountDownTimer!!.cancel()
    }

}

IOS Object-c 倒计时

定义倒计时需要的常量、变量

定义倒计时函数

开始并显示倒计时

IOS Swift 倒计时

定义倒计时需要的常量、变量

定义倒计时函数

开始并显示倒计时

Flutter 倒计时

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Timer? _timer;
  int _countDownTime = 60; // 倒计时总时间

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
          child: GestureDetector(
        onTap: () {
          _startCountDown();
        },
        child: Container(
          width: 220.0,
          height: 50.0,
          color: Colors.orange,
          alignment: Alignment.center,
          child: Text(
            (_countDownTime < 60) ? '倒计时$_countDownTime s' : 'Flutter 倒计时60s',
            style: const TextStyle(color: Colors.white),
          ),
        ),
      )),
    );
  }

  // 开始倒计时
  void _startCountDown() {
    if (_countDownTime < 60) return;
    // 重复执行
    _timer = Timer.periodic(const Duration(seconds: 1), (Timer t) {
      _countDownTime--;
      // 这里的代码会每1秒执行一次
      if (kDebugMode) {
        print('当前倒计时的时间：$_countDownTime');
      }
      setState(() {});
      if (_countDownTime == 1) {
        _timer?.cancel();
        _countDownTime = 60;
      }
    });
  }

  @override
  void dispose() {
    super.dispose();
    _timer?.cancel();
    _timer = null;
  }
}

鸿蒙 倒计时

@Entry
@Component
struct Index {
  @State message: string = '鸿蒙 60s倒计时'
  @State count: number = 60
  timer: number = -1
  flagTimer: boolean = false

  build() {
    Flex({
      alignItems: ItemAlign.Center, //垂直居中
      justifyContent: FlexAlign.Center, //水平居中
    }) {
      Text(this.message)
        .fontSize(28) // 字体大小
        .fontWeight(FontWeight.Bold) // 字体粗细
        .textAlign(TextAlign.Center) // 文本居中
        .backgroundColor(Color.Orange) //背景颜色
        .fontColor(Color.White) // 字体颜色
        .onClick(() => { // 点击事件
          if (this.flagTimer) {
            return
          }
          this.flagTimer = true
          this.timer = setInterval(() => {
            if (this.count == 0) {
              clearInterval(this.timer)
              this.count = 5
              this.flagTimer = false
              this.message = "鸿蒙 60s倒计时"
              return;
            }
            this.count--
            this.message = "倒计时 " + this.count + " s"
            console.log(this.message)
          }, 1000)
        })
        .height(80)
        .width('80%') // 宽、高
    }.width('100%').height('100%')
  }

  aboutToDisappear(){
    // 倒计时结束，清除计时器
    clearInterval(this.timer)
  }

}

ReactNative 倒计时

import React, { useState, useEffect } from 'react';
import { Text, TouchableOpacity, StyleSheet,AppRegistry } from 'react-native';
import App from './App';
import {name as appName} from './app.json';

const CountdownButton = ({ seconds, onTimeElapsed }) => {

  // useState React的Hook函数
  // 用于在函数组件中添加状态
  // 用来获取先前状态的数据
  const [count, setCount] = useState(seconds);

  useEffect(() => {
    let interval = null;
    if (count > 0) {
      // 倒计时进行中
      interval = setInterval(() => {
        setCount(prevCount => prevCount - 1);
      }, 1000);
    } else if (count === 0) {
      onTimeElapsed();
      clearInterval(interval);//清除倒计时
    }
    return () => clearInterval(interval);
  }, [count, onTimeElapsed]);

  const handlePress = () => {
    // 当倒计时时间为0时可以重新触发倒计时
    if(count==0){
        setCount(60);
    }
  };

  return (
    <TouchableOpacity onPress={handlePress} style={styles.opacity}>
<Text style={styles.text}>{count <= 0 ? 'ReactNative 倒计时60s' : `倒计时: ${count} s`}</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  text: {
    width:'100%', // 宽度
    height:60, // 高度
    textAlign: 'center', // 水平居中
    backgroundColor: '#ffcc00', // 设置背景颜色
    textAlignVertical: 'center', // 垂直居中
  },
    opacity:{
      justifyContent: 'center',
      alignItems: 'center',
      width:'100%', // 宽度
      height:'100%', // 高度
      paddingLeft: '5%',
      paddingRight: '5%',
    },
});

const textClick = () => {
  return (
    <CountdownButton seconds={0} onTimeElapsed={() => console.log('Countdown finished')} />
  );
};

AppRegistry.registerComponent(appName, () => textClick);

案例

切换到分支 flutter_count_down