flutter 抽奖旋转大转盘

Untitled.gif

使用 CustomPainter 绘制好内容，然后再使用动画对整个对内容旋转固定的角度 。以下效果图由于是gif录制的不太流畅 看效果可以运行源码在最下面。

配置数据源

 void _loadImage() async {
    ui.Image? img = await loadImageFromAssets('images/ionc_rank_list.png');
    for (int x = 0 ; x < 12 ; x ++) {
      titles.add('T_$x');
      prices.add('P_$x');
      _images.add(img!);
    }
    setState(() {});
  }

开始旋转 随机0 到12个 指定停止到哪一个

  void drawClick() async {
    int res = Random().nextInt(12);
    print(res);
    angle = res * 360 / _images.length;
    _controller.forward();
    setState(() {});
  }

以下是 全部代码 可以直接在main 里面运行 图片自行换一下

import 'dart:async';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'dart:math';
import 'dart:ui' as ui;
import 'package:flutter/services.dart' show rootBundle;
import 'package:scale_button/scale_button.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('扇形转盘'),
        ),
        body: SpinWheel(),
      ),
    );
  }
}

class SpinWheel extends StatefulWidget {
  const SpinWheel({Key? key}) : super(key: key);
  @override
  _SpinWheelState createState() => _SpinWheelState();
}

class _SpinWheelState extends State<SpinWheel> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  final List<ui.Image> _images = [];
  List<String> titles = [];
  List<String> prices = [];

  double angle = 0;

  @override
  void initState() {
    super.initState();

    initConfig();
    _loadImage();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    _controller.dispose(); // 释放动画资源
    super.dispose();

  }

  void initConfig() {
    _controller = AnimationController(
      duration: const Duration(seconds: 3), // 定义动画持续时间
      vsync: this,
    );

    _animation = CurvedAnimation(parent: _controller, curve: Curves.decelerate);

    _animation.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        _controller.reset(); // 重置动画
      }
    });
  }

  void _loadImage() async {
    ui.Image? img = await loadImageFromAssets('images/ionc_rank_list.png');
    for (int x = 0 ; x < 12 ; x ++) {
      titles.add('T_$x');
      prices.add('P_$x');
      _images.add(img!);
    }
    setState(() {});
  }


  //读取 assets 中的图片
  Future<ui.Image>? loadImageFromAssets(String path) async {
    ByteData data = await rootBundle.load(path);
    return decodeImageFromList(data.buffer.asUint8List());
  }
  

  void drawClick() async {
    int res = Random().nextInt(12);
    print(res);
    angle = res * 360 / _images.length;
    _controller.forward();
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    if (_images.isEmpty) return Container();
    return Material(
      color: Colors.transparent,
      child: Container(
        width: 400,
        height: 400,
        padding: const EdgeInsets.only(top: 0),
        child: Stack(
          alignment: Alignment.center,
          children: [
            _rotationTransition(),
            ScaleButton(
              child: Image.asset(
                'images/icon_pointer.png',
                width: 160,
              ),
              onTap: (){
                drawClick();
              },
            ),
          ],
        ),
      ),
    );
  }

  Widget _rotationTransition(){
    return RotationTransition(
      turns: Tween(begin: 0.0, end: 5.0).animate(
        CurvedAnimation(
          parent: _controller,
          curve: Curves.ease,
        ),
      ),
      // turns: _animation,
      child: Transform.rotate(
        angle: angle * -(3.141592653589793 / 180), // 将角度转换为弧度
        child: Center(
          child: CustomPaint(
            size: const Size(360, 360),
            painter: SpinWheelPainter(titles: titles, images: _images, prices: prices),
          ),
        ),
      ),
    );
  }
}

class SpinWheelPainter extends CustomPainter {
  List <String> titles;
  List <ui.Image> images;
  List <String> prices ;
  SpinWheelPainter({required this.titles ,required this.images,required this.prices});

  @override
  void paint(Canvas canvas, Size size) {
    final Paint paint = Paint()
      ..style = PaintingStyle.fill;

    final double radius = size.width / 2;
    final double centerX = size.width / 2;
    final double centerY = size.height / 2;

    final int numSectors = titles.length; // 扇形数量
    final double sectorAngle = 2 * pi / numSectors; // 每个扇形的角度

    TextStyle textStyle = const TextStyle(
      color: Colors.red,
      fontSize: 12,
    );

    const double startAngle = 197 * pi / 180; // 15度的弧度值

    for (int i = 0; i < titles.length; i++) {
      final double currentStartAngle = startAngle + i * sectorAngle +1;
      final double currentSweepAngle = sectorAngle;
      paint.color = i % 2 == 0
          ? Colors.blue
          : const Color.fromRGBO( 251,232, 192,1); // 循环使用颜色数组

      canvas.drawArc(
        Rect.fromCircle(center: Offset(centerX, centerY), radius: radius),
        currentStartAngle,
        currentSweepAngle,
        true,
        paint,
      );

      // 旋转画布
      canvas.save();
      canvas.translate(centerX, centerY);
      canvas.rotate(currentStartAngle + currentSweepAngle / 2 + pi / 2); // 旋转45度
      canvas.translate(-centerX, -centerY);
      double img_width = 40;
      if(images.isNotEmpty){
        final imageRect = Rect.fromLTWH(
          centerX - img_width / 2,
          centerY - radius * 0.7 - img_width,
          img_width,
          img_width,
        );

        paintImage(
          canvas: canvas,
          rect: imageRect,
          image: images[i],
          fit: BoxFit.fill,
          alignment: Alignment.center,
          repeat: ImageRepeat.noRepeat,
          flipHorizontally: false,
          filterQuality: FilterQuality.low,
        );

      }


      // 添加文字
      final String text = titles[i];
      final TextPainter textPainter = TextPainter(
        text: TextSpan(
          text: text,
          style: textStyle,
        ),
        textAlign: TextAlign.center,
        textDirection: TextDirection.ltr,
      );

      textPainter.layout();

      // 计算文字位置
      final double textX = centerX - textPainter.width / 2;
      final double textY = centerY - radius * 0.6;

      // 绘制文字
      textPainter.paint(canvas, Offset(textX, textY));

      final String text1 = prices[i];

      final TextPainter priceTextPainter = TextPainter(
        text: TextSpan(
          text: text1,
          style: textStyle,
        ),
        textAlign: TextAlign.center,
        textDirection: TextDirection.ltr,
      );

      priceTextPainter.layout();

      // 计算文字位置
      final double priceTextX = centerX - priceTextPainter.width / 2;
      final double priceTextY = centerY - radius * 0.5;

      // 绘制文字
      priceTextPainter.paint(canvas, Offset(priceTextX, priceTextY));

      canvas.restore(); // 恢复画布状态
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}