From f7450b5e24a34d4753522e42ac8c1ddde8c36616 Mon Sep 17 00:00:00 2001
From: Chen Peng <chen56@msn.com>
Date: Thu, 13 Jun 2024 22:05:31 +0800
Subject: [PATCH] [flutter_web] reset to HighlightView

---
 notes/flutter_web/lib/routes/notes/note.md    |  9 ++++++++
 .../you_flutter/lib/src/note/example.dart     | 21 ++++++++++---------
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/notes/flutter_web/lib/routes/notes/note.md b/notes/flutter_web/lib/routes/notes/note.md
index d302b0c9..8af5ad1a 100644
--- a/notes/flutter_web/lib/routes/notes/note.md
+++ b/notes/flutter_web/lib/routes/notes/note.md
@@ -316,6 +316,15 @@
     - 【场景】
       - 适用于需要实现复杂滚动效果的场景,如带有吸顶效果的应用栏、嵌套的列表/网格等。
   - **NestedScrollView**:在同一滚动视图中嵌套其他滚动视图，如顶部有一个固定的AppBar和底部有一个可滚动的列表。
+- **Scrollbar**: 此小部件提供了一个可视化的滚动条，它通常与一个可滚动的小部件（如SingleChildScrollView，ListView等）一起使用，以指示滚动位置并允许用户通过拖动滚动条来滚动内容。Scrollbar本身并不包含滚动逻辑，它依赖于关联的可滚动小部件及其控制器（ScrollController）来工作。
+  - 【场景】
+    - 在许多场景下，直接使用SingleChildScrollView或其他可滚动小部件（如ListView, CustomScrollView）而不附加Scrollbar也是完全可行的，特别是当设计要求简洁或是在移动设备上时，因为移动设备通常依靠直接触摸屏幕滚动，而不需要显式的滚动条
+    - 需要定制滚动条时用Scrollbar包其他SingleChildScrollView/ListView等
+- **Scrollable** Scrollable是一个抽象类，它不直接用于布局构建，但它是实现自定义滚动组件或者理解Flutter中滚动机制的关键。
+  - 【场景】
+    - 直接构造[Scrollable]的情况很少见。相反，请考虑 [ListView] 或 [GridView]，它们结合了滚动、视口和布局模型。要组合布局模型（或使用自定义布局模式），请考虑使用 [CustomScrollView]。
+    - 静态 [Scrollable.of] 和 [Scrollable.ensureVisible] 函数通常用于与 [ListView] 或 [GridView] 内的 [Scrollable] 小部件交互。
+
 - **滚动相关**
   - **ScrollNotification** and **NotificationListener**: which can be used to watch the scroll position without using a [ScrollController].
   - **ScrollController**: 记得dispose
diff --git a/packages/you_flutter/lib/src/note/example.dart b/packages/you_flutter/lib/src/note/example.dart
index b0d5d4b8..510475b2 100644
--- a/packages/you_flutter/lib/src/note/example.dart
+++ b/packages/you_flutter/lib/src/note/example.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_syntax_view/flutter_syntax_view.dart';
+import 'package:flutter_highlight/themes/vs2015.dart';
 import 'package:you_flutter/asset.dart';
+import 'package:you_flutter/src/note/contents/flutter_highlight.dart';
 import 'package:you_flutter/state.dart';
 
 class FlutterExample extends StatefulWidget {
@@ -41,6 +42,7 @@ class FlutterExampleState extends State<FlutterExample> {
       var result = Container(
         decoration: BoxDecoration(color: colors.surfaceContainerLow, borderRadius: BorderRadius.circular(8.0), border: Border.all(width: 1, color: colors.outlineVariant)),
         child: Column(
+          crossAxisAlignment: CrossAxisAlignment.center,
           children: [
             Container(
               height: 36,
@@ -76,15 +78,14 @@ class FlutterExampleState extends State<FlutterExample> {
               child: widget.child,
             ),
             if (showCode.value)
-              SyntaxView(
-                code: code.value == null ? "// loading" : code.value!,
-                syntax: Syntax.DART,
-                syntaxTheme: SyntaxTheme.vscodeDark(),
-                fontSize: 12.0,
-                withZoom: true,
-                withLinesCount: false,
-                expanded: false,
-                selectable: true,
+              SingleChildScrollView(
+                scrollDirection: Axis.horizontal,
+                child: HighlightView(
+                  code.value == null ? "// loading" : code.value!,
+                  language: 'dart',
+                  theme: vs2015Theme,
+                  padding: const EdgeInsets.all(6),
+                ),
               ),
           ],
         ),