update flutter desktop, chat page (in remote page) style

This commit is contained in:
csf 2022-09-13 09:29:19 +08:00
parent f6055130e4
commit 062a9d2635
2 changed files with 89 additions and 44 deletions

View File

@ -1,15 +1,18 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_hbb/common.dart'; import 'package:flutter_hbb/common.dart';
import '../../desktop/widgets/tabbar_widget.dart';
import '../../mobile/pages/chat_page.dart'; import '../../mobile/pages/chat_page.dart';
import '../../models/chat_model.dart'; import '../../models/chat_model.dart';
class DraggableChatWindow extends StatelessWidget { class DraggableChatWindow extends StatelessWidget {
DraggableChatWindow( const DraggableChatWindow(
{this.position = Offset.zero, {Key? key,
this.position = Offset.zero,
required this.width, required this.width,
required this.height, required this.height,
required this.chatModel}); required this.chatModel})
: super(key: key);
final Offset position; final Offset position;
final double width; final double width;
@ -30,46 +33,84 @@ class DraggableChatWindow extends StatelessWidget {
resizeToAvoidBottomInset: false, resizeToAvoidBottomInset: false,
appBar: CustomAppBar( appBar: CustomAppBar(
onPanUpdate: onPanUpdate, onPanUpdate: onPanUpdate,
appBar: Container( appBar: isDesktop
color: MyTheme.accent50, ? _buildDesktopAppBar()
height: 50, : _buildMobileAppBar(),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: EdgeInsets.symmetric(horizontal: 15),
child: Text(
translate("Chat"),
style: TextStyle(
color: Colors.white,
fontFamily: 'WorkSans',
fontWeight: FontWeight.bold,
fontSize: 20),
)),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
IconButton(
onPressed: () {
chatModel.hideChatWindowOverlay();
},
icon: Icon(Icons.keyboard_arrow_down)),
IconButton(
onPressed: () {
chatModel.hideChatWindowOverlay();
chatModel.hideChatIconOverlay();
},
icon: Icon(Icons.close))
],
)
],
),
),
), ),
body: ChatPage(chatModel: chatModel), body: ChatPage(chatModel: chatModel),
); );
}); });
} }
Widget _buildMobileAppBar() {
return Container(
color: MyTheme.accent50,
height: 50,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: Text(
translate("Chat"),
style: const TextStyle(
color: Colors.white,
fontFamily: 'WorkSans',
fontWeight: FontWeight.bold,
fontSize: 20),
)),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
IconButton(
onPressed: () {
chatModel.hideChatWindowOverlay();
},
icon: const Icon(Icons.keyboard_arrow_down)),
IconButton(
onPressed: () {
chatModel.hideChatWindowOverlay();
chatModel.hideChatIconOverlay();
},
icon: const Icon(Icons.close))
],
)
],
),
);
}
Widget _buildDesktopAppBar() {
return Container(
color: MyTheme.accent50,
height: 35,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: Text(
translate("Chat"),
style: const TextStyle(
color: Colors.white,
fontFamily: 'WorkSans',
fontWeight: FontWeight.bold),
)),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ActionIcon(
message: 'Close',
icon: IconFont.close,
onTap: chatModel.hideChatWindowOverlay,
isClose: true,
)
],
)
],
),
);
}
} }
class CustomAppBar extends StatelessWidget implements PreferredSizeWidget { class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
@ -86,7 +127,7 @@ class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
} }
@override @override
Size get preferredSize => new Size.fromHeight(kToolbarHeight); Size get preferredSize => const Size.fromHeight(kToolbarHeight);
} }
/// floating buttons of back/home/recent actions for android /// floating buttons of back/home/recent actions for android
@ -161,13 +202,15 @@ class DraggableMobileActions extends StatelessWidget {
} }
class Draggable extends StatefulWidget { class Draggable extends StatefulWidget {
Draggable( const Draggable(
{this.checkKeyboard = false, {Key? key,
this.checkKeyboard = false,
this.checkScreenSize = false, this.checkScreenSize = false,
this.position = Offset.zero, this.position = Offset.zero,
required this.width, required this.width,
required this.height, required this.height,
required this.builder}); required this.builder})
: super(key: key);
final bool checkKeyboard; final bool checkKeyboard;
final bool checkScreenSize; final bool checkScreenSize;
@ -224,7 +267,6 @@ class _DraggableState extends State<Draggable> {
final bottomHeight = MediaQuery.of(context).viewInsets.bottom; final bottomHeight = MediaQuery.of(context).viewInsets.bottom;
final currentVisible = bottomHeight != 0; final currentVisible = bottomHeight != 0;
debugPrint(bottomHeight.toString() + currentVisible.toString());
// save // save
if (!_keyboardVisible && currentVisible) { if (!_keyboardVisible && currentVisible) {
_saveHeight = _position.dy; _saveHeight = _position.dy;

View File

@ -128,7 +128,10 @@ class ChatModel with ChangeNotifier {
if (overlayState == null) return; if (overlayState == null) return;
final overlay = OverlayEntry(builder: (context) { final overlay = OverlayEntry(builder: (context) {
return DraggableChatWindow( return DraggableChatWindow(
position: Offset(20, 80), width: 250, height: 350, chatModel: this); position: const Offset(20, 80),
width: 250,
height: 350,
chatModel: this);
}); });
overlayState.insert(overlay); overlayState.insert(overlay);
chatWindowOverlayEntry = overlay; chatWindowOverlayEntry = overlay;