Flutter实现直播间礼物收发
【摘要】 下面是一个简单的礼物发送系统的实现代码,包括支持连送和单次送等功能:import 'package:flutter/material.dart';class Gift { final String name; final int count; Gift(this.name, this.count);}class GiftSendingScreen extends StatefulWid...
下面是一个简单的礼物发送系统的实现代码,包括支持连送和单次送等功能:
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
来构建收到的礼物列表,并根据礼物数目构建展示文本。例如,如果用户收到多次相同礼物,则文本为“礼物名称接收(次数)”。
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)