feat: app 端 ui 设计完成
This commit is contained in:
liqupan
231
wei_ai_app/lib/screens/interaction/interaction_screen.dart
Normal file
231
wei_ai_app/lib/screens/interaction/interaction_screen.dart
Normal file
@@ -0,0 +1,231 @@
|
||||
import 'dart:ui';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons/lucide_icons.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import '../../models/character.dart';
|
||||
import '../../models/message.dart';
|
||||
import '../../data/mock_data.dart';
|
||||
import 'voice_mode_overlay.dart';
|
||||
|
||||
class InteractionScreen extends StatefulWidget {
|
||||
final String characterId;
|
||||
|
||||
const InteractionScreen({super.key, required this.characterId});
|
||||
|
||||
@override
|
||||
State<InteractionScreen> createState() => _InteractionScreenState();
|
||||
}
|
||||
|
||||
class _InteractionScreenState extends State<InteractionScreen> {
|
||||
late Character _character;
|
||||
final List<Message> _messages = List.from(mockMessages);
|
||||
final TextEditingController _controller = TextEditingController();
|
||||
bool _isVoiceMode = false;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_character = mockCharacters.firstWhere(
|
||||
(c) => c.id == widget.characterId,
|
||||
orElse: () => mockCharacters.first,
|
||||
);
|
||||
}
|
||||
|
||||
void _sendMessage() {
|
||||
if (_controller.text.trim().isEmpty) return;
|
||||
|
||||
final newUserMsg = Message(
|
||||
id: DateTime.now().toString(),
|
||||
text: _controller.text,
|
||||
sender: MessageSender.user,
|
||||
type: MessageType.text,
|
||||
timestamp: DateTime.now()
|
||||
);
|
||||
|
||||
setState(() {
|
||||
_messages.add(newUserMsg);
|
||||
_controller.clear();
|
||||
});
|
||||
|
||||
// Mock AI Reply
|
||||
Future.delayed(const Duration(seconds: 2), () {
|
||||
if (!mounted) return;
|
||||
final newAiMsg = Message(
|
||||
id: DateTime.now().toString(),
|
||||
text: '我收到了你的信号: "${newUserMsg.text}"。这让我感觉很好...',
|
||||
sender: MessageSender.ai,
|
||||
type: MessageType.text,
|
||||
timestamp: DateTime.now()
|
||||
);
|
||||
setState(() {
|
||||
_messages.add(newAiMsg);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Stack(
|
||||
children: [
|
||||
Scaffold(
|
||||
extendBodyBehindAppBar: true,
|
||||
appBar: AppBar(
|
||||
backgroundColor: Colors.transparent,
|
||||
elevation: 0,
|
||||
flexibleSpace: ClipRRect(
|
||||
child: BackdropFilter(
|
||||
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
|
||||
child: Container(color: Colors.black.withOpacity(0.5)),
|
||||
),
|
||||
),
|
||||
leading: IconButton(
|
||||
icon: const Icon(LucideIcons.arrowLeft, color: Colors.white),
|
||||
onPressed: () => context.pop(),
|
||||
),
|
||||
title: Row(
|
||||
children: [
|
||||
CircleAvatar(
|
||||
backgroundImage: NetworkImage(_character.avatar),
|
||||
radius: 16,
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(_character.name, style: const TextStyle(fontSize: 16, color: Colors.white)),
|
||||
Row(
|
||||
children: [
|
||||
Container(width: 6, height: 6, decoration: const BoxDecoration(color: Color(0xFF10B981), shape: BoxShape.circle)),
|
||||
const SizedBox(width: 4),
|
||||
Text('Online', style: TextStyle(fontSize: 10, color: Colors.white.withOpacity(0.7))),
|
||||
],
|
||||
)
|
||||
],
|
||||
)
|
||||
],
|
||||
),
|
||||
actions: [
|
||||
IconButton(icon: const Icon(LucideIcons.moreVertical, color: Colors.white), onPressed: () {}),
|
||||
],
|
||||
),
|
||||
body: Container(
|
||||
decoration: const BoxDecoration(
|
||||
color: Color(0xFF2E1065),
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
colors: [Color(0xFF2E1065), Color(0xFF0F172A)],
|
||||
)
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
Expanded(
|
||||
child: ListView.separated(
|
||||
padding: const EdgeInsets.only(top: 120, bottom: 20, left: 16, right: 16),
|
||||
itemCount: _messages.length,
|
||||
separatorBuilder: (_, __) => const SizedBox(height: 16),
|
||||
itemBuilder: (context, index) {
|
||||
final msg = _messages[index];
|
||||
final isMe = msg.sender == MessageSender.user;
|
||||
return Align(
|
||||
alignment: isMe ? Alignment.centerRight : Alignment.centerLeft,
|
||||
child: Container(
|
||||
constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width * 0.75),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||||
decoration: BoxDecoration(
|
||||
color: isMe ? const Color(0xFFA855F7) : Colors.white.withOpacity(0.1),
|
||||
borderRadius: BorderRadius.only(
|
||||
topLeft: const Radius.circular(16),
|
||||
topRight: const Radius.circular(16),
|
||||
bottomLeft: isMe ? const Radius.circular(16) : const Radius.circular(2),
|
||||
bottomRight: isMe ? const Radius.circular(2) : const Radius.circular(16),
|
||||
),
|
||||
border: Border.all(color: Colors.white.withOpacity(0.1)),
|
||||
),
|
||||
child: Text(
|
||||
msg.text,
|
||||
style: const TextStyle(color: Colors.white, fontSize: 14, height: 1.4),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
|
||||
// Input Area
|
||||
ClipRRect(
|
||||
child: BackdropFilter(
|
||||
filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
|
||||
child: Container(
|
||||
padding: EdgeInsets.only(
|
||||
bottom: MediaQuery.of(context).padding.bottom + 10,
|
||||
top: 10,
|
||||
left: 16,
|
||||
right: 16
|
||||
),
|
||||
color: Colors.black.withOpacity(0.4),
|
||||
child: Row(
|
||||
children: [
|
||||
GestureDetector(
|
||||
onTap: () => setState(() => _isVoiceMode = true),
|
||||
child: Container(
|
||||
width: 44,
|
||||
height: 44,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
color: Colors.white.withOpacity(0.1),
|
||||
border: Border.all(color: Colors.white.withOpacity(0.1))
|
||||
),
|
||||
child: const Icon(LucideIcons.phone, color: Colors.white, size: 20),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Expanded(
|
||||
child: TextField(
|
||||
controller: _controller,
|
||||
style: const TextStyle(color: Colors.white),
|
||||
decoration: InputDecoration(
|
||||
filled: true,
|
||||
fillColor: Colors.white.withOpacity(0.05),
|
||||
hintText: 'Type a message...',
|
||||
hintStyle: TextStyle(color: Colors.white.withOpacity(0.3)),
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(24),
|
||||
borderSide: BorderSide.none,
|
||||
),
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
GestureDetector(
|
||||
onTap: _sendMessage,
|
||||
child: Container(
|
||||
width: 44,
|
||||
height: 44,
|
||||
decoration: const BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
gradient: LinearGradient(colors: [Color(0xFFA855F7), Color(0xFFEC4899)])
|
||||
),
|
||||
child: const Icon(LucideIcons.send, color: Colors.white, size: 20),
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
],
|
||||
), // Column
|
||||
), // Container
|
||||
), // Scaffold
|
||||
|
||||
if (_isVoiceMode)
|
||||
VoiceModeOverlay(
|
||||
character: _character,
|
||||
onClose: () => setState(() => _isVoiceMode = false),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user