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

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

@ -35,53 +35,53 @@ 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(
children: [ backgroundColor: _theme.bgColor,
Flexible( body: Row(
child: Obx(() => TabBar( children: [
indicatorColor: _theme.tabindicatorColor, Flexible(
indicatorSize: TabBarIndicatorSize.tab, child: Obx(() => TabBar(
indicatorWeight: 1, indicator: BoxDecoration(),
labelPadding: indicatorColor: Colors.transparent,
const EdgeInsets.symmetric(vertical: 0, horizontal: 0), labelPadding:
indicatorPadding: EdgeInsets.zero, const EdgeInsets.symmetric(vertical: 0, horizontal: 0),
isScrollable: true, isScrollable: true,
physics: BouncingScrollPhysics(), physics: BouncingScrollPhysics(),
controller: controller.value, controller: controller.value,
tabs: tabs tabs: tabs
.asMap() .asMap()
.entries .entries
.map((e) => _Tab( .map((e) => _Tab(
index: e.key, index: e.key,
text: e.value, text: e.value,
icon: tabIcon, icon: tabIcon,
selected: selected.value, selected: selected.value,
onClose: () { onClose: () {
onTabClose(e.value); onTabClose(e.value);
if (e.key <= selected.value) { if (e.key <= selected.value) {
selected.value = max(0, selected.value - 1); selected.value = max(0, selected.value - 1);
} }
controller.value.animateTo(selected.value, controller.value.animateTo(selected.value,
duration: Duration.zero); duration: Duration.zero);
}, },
onSelected: () { onSelected: () {
selected.value = e.key; selected.value = e.key;
controller.value controller.value
.animateTo(e.key, duration: Duration.zero); .animateTo(e.key, duration: Duration.zero);
}, },
theme: _theme, theme: _theme,
)) ))
.toList())), .toList())),
),
Padding(
padding: EdgeInsets.only(left: 10),
child: _AddButton(
theme: _theme,
), ),
), Padding(
], padding: EdgeInsets.only(left: 10),
child: _AddButton(
theme: _theme,
),
),
],
),
), ),
); );
} }
@ -112,73 +112,63 @@ 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( width: _kTabFixedWidth,
onHover: (hover) => _hover.value = hover, color: is_selected ? theme.tabSelectedColor : null,
onTapUp: () => onSelected(), child: InkWell(
child: Container( onHover: (hover) => _hover.value = hover,
width: _kTabFixedWidth, onTap: () => onSelected(),
decoration: BoxDecoration( child: Row(
color: is_selected children: [
? theme.tabSelectedColor Expanded(
: _hover.value child: Tab(
? theme.tabHoverColor key: this.key,
: theme.tabUnselectedColor, child: Row(
), crossAxisAlignment: CrossAxisAlignment.center,
child: Row( children: [
children: [ Padding(
Expanded( padding: EdgeInsets.symmetric(horizontal: 5),
child: Tab( child: Icon(
key: this.key, icon,
child: Row( size: _kIconSize,
crossAxisAlignment: CrossAxisAlignment.center, color: theme.tabIconColor,
children: [ ),
Padding( ),
padding: EdgeInsets.symmetric(horizontal: 5), Expanded(
child: Icon( child: Text(
icon, text,
size: _kIconSize, style: TextStyle(
color: theme.tabIconColor, color: is_selected
), ? theme.selectedTextColor
), : theme.unSelectedTextColor),
Expanded( ),
child: Text( ),
text, Obx((() => _CloseButton(
style: TextStyle( tabHovered: _hover.value,
color: is_selected tabSelected: is_selected,
? theme.selectedTextColor onClose: () => onClose(),
: theme.unSelectedTextColor), theme: theme,
), ))),
), ])),
_CloseButton(
tabHovered: _hover.value,
tabSelected: is_selected,
onClose: () => onClose(),
theme: theme,
),
])),
),
Offstage(
offstage: !show_divider,
child: VerticalDivider(
width: 1,
indent: _kDividerIndent,
endIndent: _kDividerIndent,
color: theme.dividerColor,
thickness: 1,
),
)
],
),
), ),
)), Offstage(
offstage: !show_divider,
child: VerticalDivider(
width: 1,
indent: _kDividerIndent,
endIndent: _kDividerIndent,
color: theme.dividerColor,
thickness: 1,
),
)
],
),
),
); );
} }
} }
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, height: _kTabBarHeight,
onPressed: (pressed) => _pressed.value = pressed, child: InkWell(
onTapUp: () => customBorder: const CircleBorder(),
rustDeskWinManager.call(WindowType.Main, "main_window_on_top", ""), onTap: () =>
child: Obx((() => Container( rustDeskWinManager.call(WindowType.Main, "main_window_on_top", ""),
height: _kTabBarHeight, child: Icon(
decoration: ShapeDecoration( Icons.add_sharp,
shape: const CircleBorder(), size: _kAddIconSize,
color: _pressed.value color: theme.unSelectedIconColor,
? theme.iconPressedBgColor ),
: _hover.value ),
? theme.iconHoverBgColor
: Colors.transparent,
),
child: Icon(
Icons.add_sharp,
color: theme.unSelectedIconColor,
size: _kAddIconSize,
),
))),
); );
} }
} }
@ -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: Icon(
child: Container( Icons.close,
color: _pressed.value size: _kIconSize,
? theme.iconPressedBgColor color: tabSelected
: _hover.value ? theme.selectedIconColor
? theme.iconHoverBgColor : theme.unSelectedIconColor,
: Colors.transparent, ),
child: Icon( ),
Icons.close,
size: _kIconSize,
color: tabSelected
? theme.selectedIconColor
: 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);
} }
} }