|
- import 'package:flutter/material.dart';
- import 'dart:async';
-
- class ChatScene extends StatefulWidget {
- @override
- _ChatSceneState createState() => _ChatSceneState();
- }
-
- class _ChatSceneState extends State<ChatScene> {
- bool _isInCall = false; // 记录是否在通话状态
-
- // 模拟的聊天消息数据,包括语音消息和文字消息
- final List<Map<String, dynamic>> _messages = [
- {
- 'type': 'audio',
- 'audioDuration': 5, // 音频时长 5秒
- 'audioUrl':
- 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
- 'text': '你好,我是一个语音消息'
- },
- {'type': 'text', 'text': '这是一个文本消息'},
- {
- 'type': 'audio',
- 'audioDuration': 8, // 音频时长 8秒
- 'audioUrl':
- 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',
- 'text': '这是另一条语音消息'
- }
- ];
-
- // 切换按钮状态
- void _toggleCallStatus() {
- setState(() {
- _isInCall = !_isInCall;
- });
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- appBar: AppBar(title: Text("Chat Scene")),
- body: ListView.builder(
- itemCount: _messages.length,
- itemBuilder: (context, index) {
- var message = _messages[index];
- if (message['type'] == 'audio') {
- // 语音消息
- return _buildAudioMessage(message);
- } else {
- // 文本消息
- return _buildTextMessage(message);
- }
- },
- ),
- bottomNavigationBar: Padding(
- padding: const EdgeInsets.all(20.0),
- child: InkWell(
- onTap: _toggleCallStatus, // 点击按钮时切换状态
- onLongPress: () {
- // 按住时切换为通话状态
- _toggleCallStatus();
- },
- child: Container(
- decoration: BoxDecoration(
- borderRadius: BorderRadius.circular(30), // 圆角按钮
- color: _isInCall ? Colors.red : Colors.green, // 通话状态红色,非通话状态绿色
- ),
- padding:
- EdgeInsets.symmetric(vertical: 15, horizontal: 40), // 调整按钮大小
- child: Row(
- mainAxisAlignment: MainAxisAlignment.center,
- children: [
- Icon(
- _isInCall ? Icons.call_end : Icons.mic, // 图标变化
- color: Colors.white,
- size: 30,
- ),
- SizedBox(width: 10),
- Text(
- _isInCall ? '挂断' : '开始通话', // 状态文字变化
- style: TextStyle(
- color: Colors.white,
- fontSize: 18,
- ),
- ),
- ],
- ),
- ),
- ),
- ),
- );
- }
-
- // 构建文本消息
- Widget _buildTextMessage(Map<String, dynamic> message) {
- return Padding(
- padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 15),
- child: Align(
- alignment: Alignment.centerLeft,
- child: Container(
- padding: EdgeInsets.all(10),
- decoration: BoxDecoration(
- color: Colors.blue[100],
- borderRadius: BorderRadius.circular(10),
- ),
- child: Text(
- message['text'],
- style: TextStyle(fontSize: 16),
- ),
- ),
- ),
- );
- }
-
- // 构建语音消息
- Widget _buildAudioMessage(Map<String, dynamic> message) {
- return Padding(
- padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 15),
- child: Column(
- crossAxisAlignment: CrossAxisAlignment.start,
- children: [
- // 音频时长显示
- Text(
- '${message['audioDuration']}秒',
- style: TextStyle(fontSize: 14, color: Colors.grey),
- ),
- SizedBox(height: 5),
- // 音频播放按钮
- GestureDetector(
- onTap: () {
- // 这里可以实现点击播放音频的功能
- print("播放音频: ${message['audioUrl']}");
- },
- child: Container(
- padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
- decoration: BoxDecoration(
- color: Colors.green,
- borderRadius: BorderRadius.circular(30),
- ),
- child: Row(
- children: [
- Icon(
- Icons.play_arrow,
- color: Colors.white,
- ),
- SizedBox(width: 10),
- Text(
- '播放音频',
- style: TextStyle(color: Colors.white),
- ),
- ],
- ),
- ),
- ),
- SizedBox(height: 5),
- // 文字内容
- Text(
- message['text'],
- style: TextStyle(fontSize: 16),
- ),
- ],
- ),
- );
- }
- }
|