FloatingIcon 加入拖动的动画，以及自动吸附
This commit is contained in:
@@ -8,8 +8,15 @@ import '../widgets/gradient_background.dart';
|
||||
|
||||
class PartScreen extends StatefulWidget {
|
||||
final VoidCallback? onHide;
|
||||
final Offset floatingIconPosition;
|
||||
final double iconSize;
|
||||
|
||||
const PartScreen({super.key, this.onHide});
|
||||
const PartScreen({
|
||||
super.key,
|
||||
this.onHide,
|
||||
required this.floatingIconPosition,
|
||||
required this.iconSize,
|
||||
});
|
||||
|
||||
@override
|
||||
State<PartScreen> createState() => _PartScreenState();
|
||||
@@ -58,6 +65,45 @@ class _PartScreenState extends State<PartScreen> {
|
||||
);
|
||||
}
|
||||
|
||||
// 计算PartScreen的位置，使其显示在FloatingIcon附近
|
||||
EdgeInsets _calculatePosition(BoxConstraints constraints) {
|
||||
final screenWidth = constraints.maxWidth;
|
||||
final screenHeight = constraints.maxHeight;
|
||||
final iconX = screenWidth - widget.floatingIconPosition.dx;
|
||||
final iconY = screenHeight - widget.floatingIconPosition.dy;
|
||||
|
||||
// 聊天框的尺寸
|
||||
final chatWidth = screenWidth * 0.94;
|
||||
final maxChatHeight = screenHeight * 0.4;
|
||||
|
||||
// 判断FloatingIcon在屏幕的哪一边
|
||||
final isOnRightSide = iconX < screenWidth / 2;
|
||||
|
||||
// 计算水平位置
|
||||
double leftPadding;
|
||||
if (isOnRightSide) {
|
||||
// 图标在右边，聊天框显示在左边
|
||||
leftPadding = (screenWidth - chatWidth) * 0.1;
|
||||
} else {
|
||||
// 图标在左边，聊天框显示在右边
|
||||
leftPadding = screenWidth - chatWidth - (screenWidth - chatWidth) * 0.1;
|
||||
}
|
||||
|
||||
// 计算垂直位置，确保聊天框在图标上方
|
||||
double bottomPadding = iconY + widget.iconSize + 20;
|
||||
|
||||
// 确保聊天框不会超出屏幕
|
||||
final minBottomPadding = screenHeight * 0.15;
|
||||
final maxBottomPadding = screenHeight - maxChatHeight - 50;
|
||||
bottomPadding = bottomPadding.clamp(minBottomPadding, maxBottomPadding);
|
||||
|
||||
return EdgeInsets.only(
|
||||
left: leftPadding,
|
||||
right: screenWidth - leftPadding - chatWidth,
|
||||
bottom: bottomPadding,
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
@@ -67,9 +113,12 @@ class _PartScreenState extends State<PartScreen> {
|
||||
if (!_isInitialized) {
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
|
||||
final position = _calculatePosition(constraints);
|
||||
final double minHeight = constraints.maxHeight * 0.16;
|
||||
final double maxHeight = constraints.maxHeight * 0.4;
|
||||
final double chatWidth = constraints.maxWidth * 0.94;
|
||||
|
||||
return Stack(
|
||||
children: [
|
||||
Positioned.fill(
|
||||
@@ -92,71 +141,81 @@ class _PartScreenState extends State<PartScreen> {
|
||||
),
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: EdgeInsets.only(bottom: constraints.maxHeight * 0.22),
|
||||
child: Align(
|
||||
alignment: Alignment.bottomCenter,
|
||||
child: Consumer<MessageService>(
|
||||
builder: (context, messageService, child) {
|
||||
final messageCount = messageService.messages.length;
|
||||
if (messageCount > _lastMessageCount) {
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
_scrollToBottom();
|
||||
});
|
||||
}
|
||||
_lastMessageCount = messageCount;
|
||||
return Container(
|
||||
width: chatWidth,
|
||||
constraints: BoxConstraints(
|
||||
minHeight: minHeight,
|
||||
maxHeight: maxHeight,
|
||||
),
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(24),
|
||||
child: BackdropFilter(
|
||||
filter: ImageFilter.blur(sigmaX: 12, sigmaY: 12),
|
||||
child: GradientBackground(
|
||||
colors: const [
|
||||
Color(0XBF3B0A3F),
|
||||
Color(0xBF0E0E24),
|
||||
Color(0xBF0C0B33),
|
||||
],
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
child: Stack(
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
top: 50, left: 6, right: 6, bottom: 30),
|
||||
child: LayoutBuilder(
|
||||
builder: (context, boxConstraints) {
|
||||
return ChatBox(
|
||||
scrollController: _scrollController,
|
||||
messages: messageService.messages,
|
||||
);
|
||||
}),
|
||||
),
|
||||
Positioned(
|
||||
top: 6,
|
||||
right: 6,
|
||||
child: IconButton(
|
||||
icon: Image.asset(
|
||||
'assets/images/open_in_full.png',
|
||||
width: 24,
|
||||
height: 24,
|
||||
package: 'ai_chat_assistant',
|
||||
Positioned(
|
||||
left: position.left,
|
||||
right: position.right,
|
||||
bottom: position.bottom,
|
||||
child: Consumer<MessageService>(
|
||||
builder: (context, messageService, child) {
|
||||
final messageCount = messageService.messages.length;
|
||||
if (messageCount > _lastMessageCount) {
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
_scrollToBottom();
|
||||
});
|
||||
}
|
||||
_lastMessageCount = messageCount;
|
||||
|
||||
return TweenAnimationBuilder<double>(
|
||||
tween: Tween<double>(begin: 0.8, end: 1.0),
|
||||
duration: const Duration(milliseconds: 200),
|
||||
curve: Curves.easeOutBack,
|
||||
builder: (context, scale, child) {
|
||||
return Transform.scale(
|
||||
scale: scale,
|
||||
child: Container(
|
||||
width: chatWidth,
|
||||
constraints: BoxConstraints(
|
||||
minHeight: minHeight,
|
||||
maxHeight: maxHeight,
|
||||
),
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(24),
|
||||
child: BackdropFilter(
|
||||
filter: ImageFilter.blur(sigmaX: 12, sigmaY: 12),
|
||||
child: GradientBackground(
|
||||
colors: const [
|
||||
Color(0XBF3B0A3F),
|
||||
Color(0xBF0E0E24),
|
||||
Color(0xBF0C0B33),
|
||||
],
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
child: Stack(
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
top: 50, left: 6, right: 6, bottom: 30),
|
||||
child: LayoutBuilder(
|
||||
builder: (context, boxConstraints) {
|
||||
return ChatBox(
|
||||
scrollController: _scrollController,
|
||||
messages: messageService.messages,
|
||||
);
|
||||
}),
|
||||
),
|
||||
onPressed: _openFullScreen,
|
||||
padding: EdgeInsets.zero,
|
||||
),
|
||||
Positioned(
|
||||
top: 6,
|
||||
right: 6,
|
||||
child: IconButton(
|
||||
icon: Image.asset(
|
||||
'assets/images/open_in_full.png',
|
||||
width: 24,
|
||||
height: 24,
|
||||
package: 'ai_chat_assistant',
|
||||
),
|
||||
onPressed: _openFullScreen,
|
||||
padding: EdgeInsets.zero,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
|
||||
Reference in New Issue
Block a user