[flutter_web] Badge

chen56 · May 17, 2024 · 33c5d32 · 33c5d32
1 parent 9edb6dc
commit 33c5d32
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 29 deletions.
diff --git a/notes/flutter_web/lib/routes/notes/note.md b/notes/flutter_web/lib/routes/notes/note.md
@@ -78,7 +78,7 @@
   - 如 `SliverAppBar`、`SliverList`、`SliverGrid` 等，专为`CustomScrollView`设计，用于高效实现滚动视图布局。
 - **ShrinkWrappingViewport**:类似于ListView，但它的大小可以根据其子组件的大小进行收缩，而不是根据父容器的大小进行填充。
 
-### 自定义相关
+### 自定义布局
 
 - **CustomSingleChildLayout**: 实现SingleChildLayoutDelegate自定义子组件的布局。
 - **CustomMultiChildLayout**:  实现MultiChildLayoutDelegate自定义子组件的布局。
@@ -218,9 +218,6 @@
   - **MenuBar**
   - **PlatformMenuBar**
   - **NavigationToolbar** is a layout helper to position 3 widgets or groups of widgets along a horizontal axis，正常应该使用带主题的Material AppBar or the iOS CupertinoNavigationBar
-  - **SnackBar**
-    - 【原理】ScaffoldMessenger.of(context).showSnackBar()
-  - **TextSelectionToolbar**
   - **Sliver相关Bar**
     - **SliverAppBar** 水平Bar，动画、可收缩的Bar
     - **FlexibleSpaceBar**
@@ -283,7 +280,8 @@
 
 - **Text**
   - **Text.rich**
-- RichText
+  - RichText
+- **TextSelectionToolbar**
 - Markdown
 - SelectionArea 可选择界面一整个区域的文本
 - DefaultTextStyle
@@ -292,6 +290,8 @@
   - LinearProgressIndicator
 - Badges [api-Badges](https://api.flutter.dev/flutter/material/Badge-class.html)
 - **Tooltip**
+- **SnackBar**
+  - 【原理】ScaffoldMessenger.of(context).showSnackBar()
 
 ### 滚动scrolling
 

diff --git a/notes/flutter_web/lib/routes/notes/widgets/index/page.dart b/notes/flutter_web/lib/routes/notes/widgets/index/page.dart
@@ -281,32 +281,44 @@ void build(BuildContext context, Cell print) {
     });
   }
 
+  Widget badgesCell(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceAround,
+      children: [
+        Badge.count(count: 1000, child: const Icon(Icons.mail_outlined)),
+        const Badge(child: Icon(Icons.sms_failed_outlined)),
+        Badge.count(count: 23, child: ElevatedButton(onPressed: () {}, child: const Text("Button"))),
+        const Badge(
+          label: Text("2000 ¥"),
+          alignment: AlignmentDirectional.bottomCenter,
+          child: Card(
+            elevation: 4,
+            color: Colors.green,
+            child: Padding(padding: EdgeInsets.all(20), child: Text('Card')),
+          ),
+        ),
+      ],
+    );
+  }
+
   var all = Column(
     children: [
-      Level1MasonryLayout(
-        title: "button&input&form",
-        cellWidth: 500,
-        children: [
-          CellView(title: "ButtonStyleButton", child: buttonStyleButtonCell(context)),
-          CellView(title: "FloatingActionButton", child: floatingActionButtonCell(context)),
-          CellView(title: "IconButton", child: iconButtonCell(context)),
-          CellView(title: "segmentButton", child: segmentButtonCell(context)),
-        ],
-      ),
-      Level1MasonryLayout(
-        title: "布局,Layout",
-        cellWidth: 500,
-        children: [
-          CellView(title: "Container", child: containerCell(context)),
-        ],
-      ),
-      Level1MasonryLayout(
-        title: "装饰器,Decorator",
-        cellWidth: 500,
-        children: [
-          CellView(title: "Card", child: cardCell(context)),
-        ],
-      ),
+      Level1MasonryLayout(title: "button&input&form", cellWidth: 500, children: [
+        CellView(title: "ButtonStyleButton", child: buttonStyleButtonCell(context)),
+        CellView(title: "FloatingActionButton", child: floatingActionButtonCell(context)),
+        CellView(title: "IconButton", child: iconButtonCell(context)),
+        CellView(title: "segmentButton", child: segmentButtonCell(context)),
+      ]),
+      Level1MasonryLayout(title: "button&input&form", cellWidth: 400, children: [
+        CellView(title: "Badge", child: badgesCell(context)),
+      ]),
+      //
+      Level1MasonryLayout(title: "布局,Layout", cellWidth: 500, children: [
+        CellView(title: "Container", child: containerCell(context)),
+      ]),
+      Level1MasonryLayout(title: "装饰器,Decorator", cellWidth: 500, children: [
+        CellView(title: "Card", child: cardCell(context)),
+      ]),
     ],
   );