flutter 自定义组件-抽奖大转盘

最新推荐文章于 2024-09-02 07:14:04 发布

叔怀

最新推荐文章于 2024-09-02 07:14:04 发布

阅读量2.3k

点赞数

本文链接：https://blog.youkuaiyun.com/NotesChapter/article/details/121608234

版权

本文详细介绍了如何在Flutter中自定义组件来创建一个功能完整的抽奖大转盘。从绘制圆盘到实现旋转动画，再到交互逻辑，通过实例代码展示了关键步骤和注意事项，帮助开发者掌握自定义组件技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import 'dart:async';
import 'dart:math';
import 'dart:ui' as ui;
import 'dart:ui';

import 'package:demo/widget/luck/luck_entity.dart';
import 'package:demo/widget/luck/luck_util.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class LuckDrawWidget extends StatefulWidget {
   
  ///抽奖相关数据
  @required
  LuckEntity chartEntity;

  double startTurns = .0;
  double radius = 130;

  LuckDrawWidget(this.chartEntity, {
   this.radius, this.startTurns});

  @override
  _LuckDrawWidgetState createState() => _LuckDrawWidgetState();
}

class _LuckDrawWidgetState extends State<LuckDrawWidget>
    with TickerProviderStateMixin {
   
  ///这个是 自动
  AnimationController autoAnimationController;

  Animation<double> tween;

  double turns = .0;

  GlobalKey _key = GlobalKey();

  ///角加速度，类似摩擦力 的作用 ，让惯性滚动 减慢，这个意思是每一秒 ，角速度 减慢vA个pi。
  double vA = 40.0;

  Offset offset;

  double pBy;

  double pBx;

  double pAx;

  double pAy;

  double mCenterX;
  double mCenterY;

  Animation<double> _valueTween;

  double animalValue;

  @override
  void initState() {
   
    super.initState();
    //获取中心图片资源
    getPoint();
    //获取每条数据item
    getResours();
  }

  getPoint() => getAssetImage(
        widget?.chartEntity?.luckPic,
        width: widget?.chartEntity?.centerWidth,
        height: widget?.chartEntity?.centerHeight,
      )
          .then((value) => widget?.chartEntity?.image = value)
          .whenComplete(() => setState(() {}));

  getResours() => widget?.chartEntity?.entitys?.forEach((e) async => ((e.pic
              .contains("http") ||
          e.pic.contains("https"))
      ? await getNetImage(e?.pic?.trim(), width: e?.width, height: e?.height)
          .then((value) => e.image = value)
          .whenComplete(() => setState(() {}))
      : await getAssetImage(e?.pic?.trim(), width: e?.width, height: e?.height)
          .then((value) => e.image = value)
          .whenComplete(() => setState(() {}))));

  //获取网络图片 返回ui.Image
  Future<ui.Image> getNetImage(String url, {
   width, height}) async {
   
    try {
   
      ByteData data = await NetworkAssetBundle(Uri.parse(url)).load(url);
      ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List(),
          targetWidth: width, targetHeight: height);
      ui.FrameInfo fi = await codec.getNextFrame();
      return fi.image;
    } catch

最低0.47元/天解锁文章