From 76b6c14553913ce4d524d4c38f0e52760f181d58 Mon Sep 17 00:00:00 2001 From: debuggerx Date: Tue, 2 Nov 2021 19:19:13 +0800 Subject: [PATCH] feat: use adaptive_scrollbar instead of scrollbar; add uuid to GestureProp. --- app/lib/models/scheme.dart | 20 ++++--- app/lib/pages/gesture_editor.dart | 116 ++++++++++++++++++++++-------------- app/lib/widgets/dde_data_table.dart | 3 + app/pubspec.yaml | 2 + 4 files changed, 87 insertions(+), 54 deletions(-) diff --git a/app/lib/models/scheme.dart b/app/lib/models/scheme.dart index b3d5d62..cb00d4c 100644 --- a/app/lib/models/scheme.dart +++ b/app/lib/models/scheme.dart @@ -4,6 +4,7 @@ import 'package:dde_gesture_manager/builder/provider_annotation.dart'; import 'package:dde_gesture_manager/extensions.dart'; import 'package:dde_gesture_manager/utils/helper.dart'; import 'package:flutter/material.dart'; +import 'package:uuid/uuid.dart'; @ProviderModel(copyable: true) class Scheme { @@ -29,10 +30,15 @@ class Scheme { } Scheme.systemDefault() { + this.id = Uuid.NAMESPACE_NIL; this.name = LocaleKeys.local_manager_default_scheme_label.tr(); this.description = LocaleKeys.local_manager_default_scheme_description.tr(); this.gestures = []; } + + Scheme.create({this.name, this.description, this.gestures}) { + this.id = Uuid().v1(); + } } enum Gesture { @@ -60,6 +66,9 @@ enum GestureType { @ProviderModel(copyable: true) class GestureProp { @ProviderModelProp() + String? id; + + @ProviderModelProp() Gesture? gesture; @ProviderModelProp() @@ -89,25 +98,20 @@ class GestureProp { bool _editMode = false; - - @override - bool operator ==(Object other) => - other is GestureProp && - other.gesture == this.gesture && - other.direction == this.direction && - other.fingers == this.fingers; + bool operator ==(Object other) => other is GestureProp && other.id == this.id; @override String toString() { return 'GestureProp{gesture: $gesture, direction: $direction, fingers: $fingers, type: $type, command: $command, remark: $remark}'; } - GestureProp.empty(); + GestureProp.empty() : this.id = Uuid.NAMESPACE_NIL; GestureProp.parse(props) { if (props is String) props = json.decode(props); assert(props is Map); + id = Uuid().v1(); gesture = H.getGestureByName(props['gesture']); direction = H.getGestureDirectionByName(props['direction']); fingers = props['fingers']; diff --git a/app/lib/pages/gesture_editor.dart b/app/lib/pages/gesture_editor.dart index 31d4d86..485114d 100644 --- a/app/lib/pages/gesture_editor.dart +++ b/app/lib/pages/gesture_editor.dart @@ -1,3 +1,4 @@ +import 'package:adaptive_scrollbar/adaptive_scrollbar.dart'; import 'package:dde_gesture_manager/constants/constants.dart'; import 'package:dde_gesture_manager/extensions.dart'; import 'package:dde_gesture_manager/models/content_layout.provider.dart'; @@ -10,6 +11,9 @@ import 'package:dde_gesture_manager/widgets/dde_data_table.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; +const double _headingRowHeight = 56; +const double _scrollBarWidth = 14; + class GestureEditor extends StatelessWidget { const GestureEditor({Key? key}) : super(key: key); @@ -17,6 +21,9 @@ class GestureEditor extends StatelessWidget { Widget build(BuildContext context) { var layoutProvider = context.watch(); var schemeProvider = context.watch(); + final horizontalCtrl = ScrollController(); + final verticalCtrl = ScrollController(); + return Flexible( child: Padding( padding: const EdgeInsets.all(10), @@ -80,38 +87,60 @@ class GestureEditor extends StatelessWidget { width: double.infinity, clipBehavior: Clip.antiAlias, child: LayoutBuilder(builder: (BuildContext context, BoxConstraints constraints) { - return Scrollbar( - isAlwaysShown: true, - child: SingleChildScrollView( - primary: true, - scrollDirection: Axis.horizontal, - child: ConstrainedBox( - constraints: BoxConstraints(minWidth: constraints.maxWidth), - child: DDataTable( - showCheckboxColumn: true, - headerBackgroundColor: context.t.dialogBackgroundColor, - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(defaultBorderRadius), - border: Border.all( - width: .2, - color: context.t.dividerColor, - ), + return AdaptiveScrollbar( + controller: verticalCtrl, + underColor: Colors.transparent, + sliderDecoration: BoxDecoration( + borderRadius: BorderRadius.circular(_scrollBarWidth / 2), + color: Colors.grey.withOpacity(.4), + ), + sliderActiveDecoration: BoxDecoration( + borderRadius: BorderRadius.circular(_scrollBarWidth / 2), + color: Colors.grey.withOpacity(.6), + ), + position: ScrollbarPosition.right, + underSpacing: EdgeInsets.only(top: _headingRowHeight), + width: _scrollBarWidth, + child: AdaptiveScrollbar( + width: _scrollBarWidth, + underColor: Colors.transparent, + sliderDecoration: BoxDecoration( + borderRadius: BorderRadius.circular(_scrollBarWidth / 2), + color: Colors.grey.withOpacity(.4), + ), + sliderActiveDecoration: BoxDecoration( + borderRadius: BorderRadius.circular(_scrollBarWidth / 2), + color: Colors.grey.withOpacity(.6), + ), + controller: horizontalCtrl, + position: ScrollbarPosition.bottom, + child: SingleChildScrollView( + scrollDirection: Axis.horizontal, + controller: horizontalCtrl, + child: ConstrainedBox( + constraints: BoxConstraints(minWidth: constraints.maxWidth), + child: DDataTable( + showBottomBorder: true, + headingRowHeight: _headingRowHeight, + showCheckboxColumn: true, + headerBackgroundColor: context.t.dialogBackgroundColor, + verticalScrollController: verticalCtrl, + dataRowColor: MaterialStateProperty.resolveWith((Set states) { + if (states.contains(MaterialState.hovered)) return context.t.dialogBackgroundColor; + if (states.contains(MaterialState.selected)) + return context.read().currentActiveColor; + return null; + }), + columns: [ + DDataColumn(label: Text(LocaleKeys.gesture_editor_fingers.tr()), center: true), + DDataColumn(label: Text(LocaleKeys.gesture_editor_gesture.tr()), center: true), + DDataColumn(label: Text(LocaleKeys.gesture_editor_direction.tr()), center: true), + DDataColumn(label: Text(LocaleKeys.gesture_editor_type.tr()), center: true), + DDataColumn(label: Text(LocaleKeys.gesture_editor_command.tr())), + DDataColumn(label: Text(LocaleKeys.gesture_editor_remark.tr())), + ], + rows: _buildDataRows(schemeProvider.gestures, context), ), - dataRowColor: MaterialStateProperty.resolveWith((Set states) { - if (states.contains(MaterialState.hovered)) return context.t.dialogBackgroundColor; - if (states.contains(MaterialState.selected)) - return context.read().currentActiveColor; - return null; - }), - columns: [ - DDataColumn(label: Text(LocaleKeys.gesture_editor_gesture.tr()), center: true), - DDataColumn(label: Text(LocaleKeys.gesture_editor_direction.tr()), center: true), - DDataColumn(label: Text(LocaleKeys.gesture_editor_fingers.tr()), center: true), - DDataColumn(label: Text(LocaleKeys.gesture_editor_type.tr()), center: true), - DDataColumn(label: Text(LocaleKeys.gesture_editor_command.tr())), - DDataColumn(label: Text(LocaleKeys.gesture_editor_remark.tr())), - ], - rows: _buildDataRows(schemeProvider.gestures, context), ), ), ), @@ -148,12 +177,7 @@ List _buildDataRows(List? gestures, BuildContext context) onSelectChanged: (selected) { if (selected == true) context.read().setProps( - gesture: gesture.gesture, - direction: gesture.direction, - fingers: gesture.fingers, - type: gesture.type, - command: gesture.command, - remark: gesture.remark, + id: gesture.id, editMode: false, ); else if (selected == false) { @@ -172,10 +196,10 @@ List _buildDataRows(List? gestures, BuildContext context) }).toList(); List _buildRowCellsEditing(GestureProp gesture) => [ - Text('1'), - Text('2'), - Text('3'), - Text('4'), + Center(child: Text('1')), + Center(child: Text('2')), + Center(child: Text('3')), + Center(child: Text('4')), TextField(controller: TextEditingController(text: gesture.command)), TextField(controller: TextEditingController(text: gesture.remark)), ].map((e) => DDataCell(e)).toList(); @@ -183,6 +207,11 @@ List _buildRowCellsEditing(GestureProp gesture) => [ List _buildRowCellsNormal(BuildContext context, bool selected, GestureProp gesture) => [ Center( child: Text( + '${gesture.fingers}', + ), + ), + Center( + child: Text( '${LocaleKeys.gesture_editor_gestures}.${H.getGestureName(gesture.gesture)}', ).tr(), ), @@ -191,11 +220,6 @@ List _buildRowCellsNormal(BuildContext context, bool selected, Gestur '${LocaleKeys.gesture_editor_directions}.${H.getGestureDirectionName(gesture.direction)}', ).tr()), Center( - child: Text( - '${gesture.fingers}', - ), - ), - Center( child: Text( '${LocaleKeys.gesture_editor_types}.${H.getGestureTypeName(gesture.type)}', ).tr()), diff --git a/app/lib/widgets/dde_data_table.dart b/app/lib/widgets/dde_data_table.dart index 2e032ee..5a7b90a 100644 --- a/app/lib/widgets/dde_data_table.dart +++ b/app/lib/widgets/dde_data_table.dart @@ -420,6 +420,7 @@ class DDataCell { /// * class DDataTable extends StatefulWidget { final Color headerBackgroundColor; + final ScrollController verticalScrollController; /// Creates a widget describing a data table. /// @@ -466,6 +467,7 @@ class DDataTable extends StatefulWidget { required this.rows, this.checkboxHorizontalMargin, required this.headerBackgroundColor, + required this.verticalScrollController, }) : assert(columns != null), assert(columns.isNotEmpty), assert(sortColumnIndex == null || (sortColumnIndex >= 0 && sortColumnIndex < columns.length)), @@ -1033,6 +1035,7 @@ class _DDataTableState extends State { padding: EdgeInsets.only(top: _headersRect?.last.height ?? 0), child: SingleChildScrollView( scrollDirection: Axis.vertical, + controller: widget.verticalScrollController, child: Transform.translate( offset: Offset(0, -(_headersRect?.last.height ?? 0)), child: Table( diff --git a/app/pubspec.yaml b/app/pubspec.yaml index d76ae6c..b751a2c 100644 --- a/app/pubspec.yaml +++ b/app/pubspec.yaml @@ -35,6 +35,8 @@ dependencies: glass_kit: ^2.0.1 rect_getter: ^1.0.0 path_provider: ^2.0.5 + uuid: ^3.0.5 + adaptive_scrollbar: ^2.1.0 xdg_directories_web: path: 3rd_party/xdg_directories_web