feat: use adaptive_scrollbar instead of scrollbar; add uuid to GestureProp.

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'];

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<ContentLayoutProvider>();
     var schemeProvider = context.watch<SchemeProvider>();
+    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<Color?>((Set<MaterialState> states) {
+                                    if (states.contains(MaterialState.hovered)) return context.t.dialogBackgroundColor;
+                                    if (states.contains(MaterialState.selected))
+                                      return context.read<SettingsProvider>().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<Color?>((Set<MaterialState> states) {
-                                  if (states.contains(MaterialState.hovered)) return context.t.dialogBackgroundColor;
-                                  if (states.contains(MaterialState.selected))
-                                    return context.read<SettingsProvider>().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<DDataRow> _buildDataRows(List<GestureProp>? gestures, BuildContext context)
         onSelectChanged: (selected) {
           if (selected == true)
             context.read<GesturePropProvider>().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<DDataRow> _buildDataRows(List<GestureProp>? gestures, BuildContext context)
     }).toList();
 
 List<DDataCell> _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<DDataCell> _buildRowCellsEditing(GestureProp gesture) => [
 List<DDataCell> _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<DDataCell> _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()),

app/lib/widgets/dde_data_table.dart

@@ -420,6 +420,7 @@ class DDataCell {
 ///  * <https://material.io/design/components/data-tables.html>
 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<DDataTable> {
               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(

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