hongshaorou/rustdesk
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tabbar: material style

Browse Source 
Signed-off-by: 21pages <pages21@163.com>
This commit is contained in:
21pages 2022-08-10 16:40:04 +08:00
parent f62f327883
commit 1440d26376
1 changed files with 119 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
flutter/lib/desktop/widgets/tabbar_widget.dart
View File

@ -35,18 +35,17 @@ class DesktopTabBar extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Container( return Container(
color: _theme.bgColor,
height: _kTabBarHeight, height: _kTabBarHeight,
child: Row( child: Scaffold(
backgroundColor: _theme.bgColor,
body: Row(
children: [ children: [
Flexible( Flexible(
child: Obx(() => TabBar( child: Obx(() => TabBar(
indicatorColor: _theme.tabindicatorColor, indicator: BoxDecoration(),
indicatorSize: TabBarIndicatorSize.tab, indicatorColor: Colors.transparent,
indicatorWeight: 1,
labelPadding: labelPadding:
const EdgeInsets.symmetric(vertical: 0, horizontal: 0), const EdgeInsets.symmetric(vertical: 0, horizontal: 0),
indicatorPadding: EdgeInsets.zero,
isScrollable: true, isScrollable: true,
physics: BouncingScrollPhysics(), physics: BouncingScrollPhysics(),
controller: controller.value, controller: controller.value,
@ -83,6 +82,7 @@ class DesktopTabBar extends StatelessWidget {
), ),
], ],
), ),
),
); );
} }
} }
@ -112,19 +112,12 @@ class _Tab extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
bool is_selected = index == selected; bool is_selected = index == selected;
bool show_divider = index != selected - 1 && index != selected; bool show_divider = index != selected - 1 && index != selected;
return Obx( return Ink(
(() => _Hoverable(
onHover: (hover) => _hover.value = hover,
onTapUp: () => onSelected(),
child: Container(
width: _kTabFixedWidth, width: _kTabFixedWidth,
decoration: BoxDecoration( color: is_selected ? theme.tabSelectedColor : null,
color: is_selected child: InkWell(
? theme.tabSelectedColor onHover: (hover) => _hover.value = hover,
: _hover.value onTap: () => onSelected(),
? theme.tabHoverColor
: theme.tabUnselectedColor,
),
child: Row( child: Row(
children: [ children: [
Expanded( Expanded(
@ -150,12 +143,12 @@ class _Tab extends StatelessWidget {
: theme.unSelectedTextColor), : theme.unSelectedTextColor),
), ),
), ),
_CloseButton( Obx((() => _CloseButton(
tabHovered: _hover.value, tabHovered: _hover.value,
tabSelected: is_selected, tabSelected: is_selected,
onClose: () => onClose(), onClose: () => onClose(),
theme: theme, theme: theme,
), ))),
])), ])),
), ),
Offstage( Offstage(
@ -171,14 +164,11 @@ class _Tab extends StatelessWidget {
], ],
), ),
), ),
)),
); );
} }
} }
class _AddButton extends StatelessWidget { class _AddButton extends StatelessWidget {
final RxBool _hover = false.obs;
final RxBool _pressed = false.obs;
late final _Theme theme; late final _Theme theme;
_AddButton({ _AddButton({
@ -188,27 +178,18 @@ class _AddButton extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return _Hoverable( return Ink(
onHover: (hover) => _hover.value = hover,
onPressed: (pressed) => _pressed.value = pressed,
onTapUp: () =>
rustDeskWinManager.call(WindowType.Main, "main_window_on_top", ""),
child: Obx((() => Container(
height: _kTabBarHeight, height: _kTabBarHeight,
decoration: ShapeDecoration( child: InkWell(
shape: const CircleBorder(), customBorder: const CircleBorder(),
color: _pressed.value onTap: () =>
? theme.iconPressedBgColor rustDeskWinManager.call(WindowType.Main, "main_window_on_top", ""),
: _hover.value
? theme.iconHoverBgColor
: Colors.transparent,
),
child: Icon( child: Icon(
Icons.add_sharp, Icons.add_sharp,
color: theme.unSelectedIconColor,
size: _kAddIconSize, size: _kAddIconSize,
color: theme.unSelectedIconColor,
),
), ),
))),
); );
} }
} }
@ -217,8 +198,6 @@ class _CloseButton extends StatelessWidget {
final bool tabHovered; final bool tabHovered;
final bool tabSelected; final bool tabSelected;
final Function onClose; final Function onClose;
final RxBool _hover = false.obs;
final RxBool _pressed = false.obs;
late final _Theme theme; late final _Theme theme;
_CloseButton({ _CloseButton({
@ -237,104 +216,50 @@ class _CloseButton extends StatelessWidget {
width: _kIconSize, width: _kIconSize,
child: Offstage( child: Offstage(
offstage: !tabHovered, offstage: !tabHovered,
child: Obx((() => _Hoverable( child: InkWell(
onHover: (hover) => _hover.value = hover, customBorder: RoundedRectangleBorder(),
onPressed: (pressed) => _pressed.value = pressed, onTap: () => onClose(),
onTapUp: () => onClose(),
child: Container(
color: _pressed.value
? theme.iconPressedBgColor
: _hover.value
? theme.iconHoverBgColor
: Colors.transparent,
child: Icon( child: Icon(
Icons.close, Icons.close,
size: _kIconSize, size: _kIconSize,
color: tabSelected color: tabSelected
? theme.selectedIconColor ? theme.selectedIconColor
: theme.unSelectedIconColor, : theme.unSelectedIconColor,
)), ),
))), ),
))); )));
} }
} }
class _Hoverable extends StatelessWidget {
final Widget child;
final Function(bool hover) onHover;
final Function(bool pressed)? onPressed;
final Function()? onTapUp;
const _Hoverable(
{Key? key,
required this.child,
required this.onHover,
this.onPressed,
this.onTapUp})
: super(key: key);
@override
Widget build(BuildContext context) {
return MouseRegion(
onEnter: (_) => onHover(true),
onExit: (_) => onHover(false),
child: onPressed == null && onTapUp == null
? child
: GestureDetector(
onTapDown: (details) => onPressed?.call(true),
onTapUp: (details) {
onPressed?.call(false);
onTapUp?.call();
},
child: child,
));
}
}
class _Theme { class _Theme {
late Color bgColor; late Color bgColor;
late Color tabUnselectedColor;
late Color tabHoverColor;
late Color tabSelectedColor; late Color tabSelectedColor;
late Color tabIconColor; late Color tabIconColor;
late Color tabindicatorColor;
late Color selectedTextColor; late Color selectedTextColor;
late Color unSelectedTextColor; late Color unSelectedTextColor;
late Color selectedIconColor; late Color selectedIconColor;
late Color unSelectedIconColor; late Color unSelectedIconColor;
late Color iconHoverBgColor;
late Color iconPressedBgColor;
late Color dividerColor; late Color dividerColor;
_Theme.light() { _Theme.light() {
bgColor = Color.fromARGB(255, 253, 253, 253); bgColor = Color.fromARGB(255, 253, 253, 253);
tabUnselectedColor = Color.fromARGB(255, 253, 253, 253);
tabHoverColor = Color.fromARGB(255, 245, 245, 245);
tabSelectedColor = MyTheme.grayBg; tabSelectedColor = MyTheme.grayBg;
tabIconColor = MyTheme.accent50; tabIconColor = MyTheme.accent50;
tabindicatorColor = MyTheme.grayBg;
selectedTextColor = Color.fromARGB(255, 26, 26, 26); selectedTextColor = Color.fromARGB(255, 26, 26, 26);
unSelectedTextColor = Color.fromARGB(255, 96, 96, 96); unSelectedTextColor = Color.fromARGB(255, 96, 96, 96);
selectedIconColor = Color.fromARGB(255, 26, 26, 26); selectedIconColor = Color.fromARGB(255, 26, 26, 26);
unSelectedIconColor = Color.fromARGB(255, 96, 96, 96); unSelectedIconColor = Color.fromARGB(255, 96, 96, 96);
iconHoverBgColor = Color.fromARGB(255, 224, 224, 224);
iconPressedBgColor = Color.fromARGB(255, 215, 215, 215);
dividerColor = Color.fromARGB(255, 238, 238, 238); dividerColor = Color.fromARGB(255, 238, 238, 238);
} }
_Theme.dark() { _Theme.dark() {
bgColor = Color.fromARGB(255, 50, 50, 50); bgColor = Color.fromARGB(255, 50, 50, 50);
tabUnselectedColor = Color.fromARGB(255, 50, 50, 50);
tabHoverColor = Color.fromARGB(255, 59, 59, 59);
tabSelectedColor = MyTheme.canvasColor; tabSelectedColor = MyTheme.canvasColor;
tabIconColor = Color.fromARGB(255, 84, 197, 248); tabIconColor = Color.fromARGB(255, 84, 197, 248);
tabindicatorColor = MyTheme.canvasColor;
selectedTextColor = Color.fromARGB(255, 255, 255, 255); selectedTextColor = Color.fromARGB(255, 255, 255, 255);
unSelectedTextColor = Color.fromARGB(255, 207, 207, 207); unSelectedTextColor = Color.fromARGB(255, 207, 207, 207);
selectedIconColor = Color.fromARGB(255, 215, 215, 215); selectedIconColor = Color.fromARGB(255, 215, 215, 215);
unSelectedIconColor = Color.fromARGB(255, 255, 255, 255); unSelectedIconColor = Color.fromARGB(255, 255, 255, 255);
iconHoverBgColor = Color.fromARGB(255, 67, 67, 67);
iconPressedBgColor = Color.fromARGB(255, 73, 73, 73);
dividerColor = Color.fromARGB(255, 64, 64, 64); dividerColor = Color.fromARGB(255, 64, 64, 64);
} }
} }