首页 > 其他分享 >Flutter实现直播间礼物收发

Flutter实现直播间礼物收发

时间:2023-04-11 16:32:22浏览次数:40  
标签:count 直播间 name gift receivedGifts 收发 Gift Flutter 礼物

Flutter实现直播间礼物收发_flutter

下面是一个简单的礼物发送系统的实现代码,包括支持连送和单次送等功能:

import 'package:flutter/material.dart';

class Gift {
  final String name;
  final int count;

  Gift(this.name, this.count);
}

class GiftSendingScreen extends StatefulWidget {
  const GiftSendingScreen({Key? key}) : super(key: key);

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

class _GiftSendingScreenState extends State<GiftSendingScreen> {
  List<Gift> _gifts = [
    Gift('Heart', 1),
    Gift('Rose', 1),
    Gift('Candy', 1),
    Gift('Teddy Bear', 5),
    Gift('Diamond Ring', 10),
  ];

  Gift? _selectedGift;
  int _sendingCount = 1;
  bool _isSendingContinuously = false;

  void _sendGift() {
    if (_selectedGift != null) {
      for (int i = 0; i < _sendingCount; i++) {
        // simulate sending gift to server
        print('Sending gift ${_selectedGift!.name}...');
      }

      if (_isSendingContinuously) {
        // continue sending gifts after a delay
        Future.delayed(Duration(seconds: 1), () {
          _sendGift();
        });
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Send Gift'),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          DropdownButtonFormField<Gift>(
            decoration: InputDecoration(
              labelText: 'Select a gift',
            ),
            value: _selectedGift,
            onChanged: (gift) {
              setState(() {
                _selectedGift = gift;
              });
            },
            items: _gifts
                .map(
                  (gift) => DropdownMenuItem<Gift>(
                    value: gift,
                    child: Text('${gift.name} (${gift.count})'),
                  ),
                )
                .toList(),
          ),
          TextFormField(
            keyboardType: TextInputType.number,
            decoration: InputDecoration(
              labelText: 'Sending count',
            ),
            initialValue: '1',
            onChanged: (value) {
              setState(() {
                _sendingCount = int.tryParse(value) ?? 0;
              });
            },
          ),
          Row(
            children: [
              Checkbox(
                value: _isSendingContinuously,
                onChanged: (value) {
                  setState(() {
                    _isSendingContinuously = value ?? false;
                  });
                },
              ),
              Text('Send continuously'),
            ],
          ),
          ElevatedButton(
            onPressed: _sendGift,
            child: Text('Send'),
          ),
        ],
      ),
    );
  }
}

在这个示例中,我们使用了 Flutter 的 DropdownButtonFormField 和 TextFormField 等组件来获取用户选择的礼物和发送数量。我们还使用了 Checkbox 组件来允许用户选择是否连续发送礼物。在 _sendGift() 方法中,我们模拟将礼物发送到服务器,并且如果用户选择了连续发送,我们将延迟一秒钟后再次调用该方法以持续发送礼物。

以下是一个简单的收到礼物系统的实现代码,支持展示连送和单次送等数量:

import 'package:flutter/material.dart';

class ReceivedGift {
  final String name;
  final int count;

  ReceivedGift(this.name, this.count);
}

class GiftReceivingScreen extends StatefulWidget {
  const GiftReceivingScreen({Key? key}) : super(key: key);

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

class _GiftReceivingScreenState extends State<GiftReceivingScreen> {
  List<ReceivedGift> _receivedGifts = [];

  void _receiveGift(ReceivedGift gift) {
    setState(() {
      // check if the same gift is already received
      var existingGift = _receivedGifts.firstWhere(
        (g) => g.name == gift.name,
        orElse: () => null,
      );

      if (existingGift != null) {
        // increment count of existing gift
        _receivedGifts[_receivedGifts.indexOf(existingGift)] =
            ReceivedGift(gift.name, existingGift.count + gift.count);
      } else {
        // add new gift to received gifts list
        _receivedGifts.add(gift);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Received Gifts'),
      ),
      body: ListView.builder(
        itemCount: _receivedGifts.length,
        itemBuilder: (BuildContext context, int index) {
          var receivedGift = _receivedGifts[index];
          
          // build text based on number of gifts received
          var text = '${receivedGift.name} received';
          if (receivedGift.count > 1) {
            text += ' (${receivedGift.count}';
            text += receivedGift.count > 2 ? ' times)' : ' time)';
          }

          return ListTile(
            title: Text(text),
          );
        },
      ),
    );
  }
}

在这个示例中,我们使用了一个 _receivedGifts 列表来追踪用户收到的礼物。在 _receiveGift() 方法中,我们检查是否已经收到过相同的礼物,如果是,则增加现有礼物的数量;否则,将新礼物添加到列表中。

在 build() 方法中,我们使用 ListView.builder 来构建收到的礼物列表,并根据礼物数目构建展示文本。例如,如果用户收到多次相同礼物,则文本为“礼物名称接收(次数)”。

标签:count,直播间,name,gift,receivedGifts,收发,Gift,Flutter,礼物
From: https://blog.51cto.com/u_13796723/6183667

相关文章

  • 从零开始USRP 03 实现一个USRP收发demo(hello world)
    这里用的源码来自:UHDC/C++编程实例USRP发送、接收数据我所使用的USRP型号是N210r4,因此默认地址的最后一位是4,使用Ubuntu20.04运行(至于为什么之前配的是18.04,那是因为之前是在我的虚拟机上玩耍的,但是我的虚拟机配网络有点麻烦,因此我给学姐的学长借了一台Linux笔记本,用这台笔......
  • flutter实现下拉刷新和加载更多
    问题背景移动端日常开发过程中,下拉刷新和加载更多是很常见的功能点,现在一起看下flutter是如何实现下拉刷新和加载更多的。问题分析1、通过Dio框架获取网络请求varurl="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=$_page";Respo......
  • 一统天下 flutter - widget 列表类: ExpansionTile - 列表项(可展开)
    一统天下flutterhttps://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widget列表类:ExpansionTile-列表项(可展开)示例如下:lib\widget\list\expansion_tile.dart/**ExpansionTile-列表项(可展开)*/import'package:flutter/material.dart'......
  • 一统天下 flutter - widget 状态管理: 状态管理 - 自定义 controller
    一统天下flutterhttps://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widget状态管理:状态管理-自定义controller示例如下:lib\state\controller.dart/**状态管理-自定义controller**为自定义组件指定一个自定义controller后,就可......
  • 一统天下 flutter - 插件: flutter 与 android 原生之间的数据通信
    一统天下flutterhttps://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-插件:flutter与android原生之间的数据通信示例如下:lib\plugin\plugin.dart/**插件*本例用于演示flutter与android/ios原生之间的数据通信**一、android插件......
  • 解决Flutter_Boost,在Android Studio 出现“Cannot resolve symbol” 的问题
    今天在调试的时候,Android Studio报了一个莫名其妙的错误Cannot resolve symbol'R'让人不知所措,怎么会出现 Cannot resolve symbol 这种错误呢?下面给大家分享Android Studio 出现“Cannot resolve symbol”解决方案,需要的朋友可以参考下一:AndroidStudio无法识别同......
  • Flutter Dart数组固定长度分割成二维数组
    将dart数组按照指定的长度分割,返回一个二维数组,实现list的split功能.例如:a=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]splitList(a,6):[[0,1,2,3,4,5],[6,7,8,9,10,11],[12,13,14,15,16,17],[18,19]] Dart方法代码:......
  • flutter获取网络状态和网络状态监听
    flutter获取网络状态和网络状态监听问题背景Android开发中,获取网络状态以及监听网络状态变化是很常见的场景,我们现在看看flutter中是如何获取网络状态以及监听网络状态变化的。问题分析flutter开发过程中,可以通过使用Connectivity插件来获取当前设备的联网状态,以及监听当前设备......
  • SQL 刷题—直播间人气值
    需求描述直播间开播记录表t_live和直播间观看记录表t_look_log数据如下:createtablet_live(author_idinteger,--博主live_idinteger,--直播间IDlive_durationinteger--开播时长);insertintot_livevalues(1,1,60),(2,2,1......
  • Flutter之GetX之路由管理
    GetX之路由管理GetX有一套完整的路由管理,并且不需要context上下文,API非常简洁直接导航导航到新的页面Get.to(NextScreen());返回,此方法可以用于关闭SnackBars、Dialogs、BottomSheets或任何你通常会用Navigator.pop(context)关闭的东西。Get.back();进入下一个页面并将上......