From 54cbbfec475aeb367b79d5540a215d32cdaa5a4b Mon Sep 17 00:00:00 2001
From: Gorit <caidewei05@chinasoftinc.com>
Date: Tue, 1 Apr 2025 16:05:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E7=BD=91=E6=A0=BC?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在 `cardItemsConfig` 中添加了网格布局的配置项，并创建了 `GridViewLayout` 组件用于展示网格布局示例。同时更新了 `PreviewPage` 以支持新的布局类型。
---
 .../lib/layout/gridViewLayout.dart            | 45 +++++++++++++++++++
 .../lib/model/card_items_config.dart          |  1 +
 .../lib/preview_page.dart                     | 19 ++++----
 3 files changed, 57 insertions(+), 8 deletions(-)
 create mode 100644 flutter_samples/flutter_layout_application/lib/layout/gridViewLayout.dart

diff --git a/flutter_samples/flutter_layout_application/lib/layout/gridViewLayout.dart b/flutter_samples/flutter_layout_application/lib/layout/gridViewLayout.dart
new file mode 100644
index 0000000..45b220e
--- /dev/null
+++ b/flutter_samples/flutter_layout_application/lib/layout/gridViewLayout.dart
@@ -0,0 +1,45 @@
+import 'package:flutter/material.dart';
+import '../model/card_item.dart';
+
+class GridViewLayout extends StatelessWidget {
+  final CardItem cardItem;
+
+  const GridViewLayout({super.key, required this.cardItem});
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.all(8.0),
+      child: Column(
+        children: [
+          Text(
+            cardItem.title,
+            style: Theme.of(context).textTheme.headlineSmall,
+          ),
+          const SizedBox(height: 16),
+          Expanded(
+            child: GridView.count(
+              crossAxisCount: 4,
+              crossAxisSpacing: 10,
+              mainAxisSpacing: 10,
+              children: List.generate(16, (index) {
+                return Container(
+                  decoration: BoxDecoration(
+                    color: Colors.primaries[index % Colors.primaries.length],
+                    borderRadius: BorderRadius.circular(8),
+                  ),
+                  child: Center(
+                    child: Text(
+                      'Item ${index + 1}',
+                      style: const TextStyle(color: Colors.white, fontSize: 18),
+                    ),
+                  ),
+                );
+              }),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/flutter_samples/flutter_layout_application/lib/model/card_items_config.dart b/flutter_samples/flutter_layout_application/lib/model/card_items_config.dart
index e329d8e..ba2699c 100644
--- a/flutter_samples/flutter_layout_application/lib/model/card_items_config.dart
+++ b/flutter_samples/flutter_layout_application/lib/model/card_items_config.dart
@@ -24,6 +24,7 @@ Map<String, List<CardItem>> cardItemsConfig = {
       content: 'listview builder 布局',
       key: 'listview_builder_layout',
     ),
+    CardItem(title: '网格布局', content: 'GridView网格布局示例', key: 'gridview_layout'),
   ],
   '设置': [
     CardItem(title: '设置卡片1', content: '这是设置页面的第一张卡片的内容。', key: 'setting-card1'),
diff --git a/flutter_samples/flutter_layout_application/lib/preview_page.dart b/flutter_samples/flutter_layout_application/lib/preview_page.dart
index d4b6fd9..ee17d55 100644
--- a/flutter_samples/flutter_layout_application/lib/preview_page.dart
+++ b/flutter_samples/flutter_layout_application/lib/preview_page.dart
@@ -1,12 +1,13 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_layout_application/layout/project/columnLayoutProject.dart';
-import 'package:flutter_layout_application/layout/project/resume.dart';
-import 'package:flutter_layout_application/layout/singleColumnLayout.dart';
-import 'package:flutter_layout_application/layout/singleLayout.dart';
-import 'package:flutter_layout_application/layout/singleListViewBuilderLayout.dart';
-import 'package:flutter_layout_application/layout/singleListViewLayout.dart';
-import 'package:flutter_layout_application/layout/singleListViewRowLayout.dart';
-import 'package:flutter_layout_application/layout/singleRowLayout.dart';
+import './layout/gridViewLayout.dart';
+import './layout/project/columnLayoutProject.dart';
+import './layout/project/resume.dart';
+import './layout/singleColumnLayout.dart';
+import './layout/singleLayout.dart';
+import './layout/singleListViewBuilderLayout.dart';
+import './layout/singleListViewLayout.dart';
+import './layout/singleListViewRowLayout.dart';
+import './layout/singleRowLayout.dart';
 import 'model/card_item.dart'; // 引入 CardItem 类
 
 class PreviewPage extends StatelessWidget {
@@ -42,6 +43,8 @@ class PreviewPage extends StatelessWidget {
       return SingleListViewBuilderLayout(cardItem: cardItem);
     } else if (cardItem.key == 'resume_project') {
       return ResumeScreen();
+    } else if (cardItem.key == 'gridview_layout') {
+      return GridViewLayout(cardItem: cardItem);
     } else {
       return Text(cardItem.content); // 根据需求调整逻辑
     }
-- 
Gitee