From b2fc872a7760fde03ce41bf49f185427c48819d0 Mon Sep 17 00:00:00 2001 From: Gorit Date: Tue, 1 Apr 2025 15:11:22 +0800 Subject: [PATCH] =?UTF-8?q?refactor(model):=20=E9=87=8D=E6=9E=84=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=E4=BB=A5=E6=8F=90=E5=8F=96=20CardItem=20=E7=B1=BB?= =?UTF-8?q?=E5=B9=B6=E4=BC=98=E5=8C=96=E5=B8=83=E5=B1=80=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 将 CardItem 类从 main.dart 提取到单独的 model/card_item.dart 文件中，并在所有布局文件中更新引用。同时，将卡片配置数据提取到 card_items_config.dart 文件中，以便集中管理。优化了 main.dart 中的代码结构，提取了主题和路由配置，提高了代码的可维护性。 --- .../lib/layout/singleColumnLayout.dart | 2 +- .../lib/layout/singleLayout.dart | 2 +- .../layout/singleListViewBuilderLayout.dart | 46 +++--- .../lib/layout/singleListViewLayout.dart | 2 +- .../lib/layout/singleListViewRowLayout.dart | 2 +- .../lib/layout/singleRowLayout.dart | 2 +- .../flutter_layout_application/lib/main.dart | 153 +++++------------- .../lib/model/card_item.dart | 7 + .../lib/model/card_items_config.dart | 39 +++++ .../lib/preview_page.dart | 2 +- 10 files changed, 123 insertions(+), 134 deletions(-) create mode 100644 flutter_samples/flutter_layout_application/lib/model/card_item.dart create mode 100644 flutter_samples/flutter_layout_application/lib/model/card_items_config.dart diff --git a/flutter_samples/flutter_layout_application/lib/layout/singleColumnLayout.dart b/flutter_samples/flutter_layout_application/lib/layout/singleColumnLayout.dart index 65a5b99..f57798c 100644 --- a/flutter_samples/flutter_layout_application/lib/layout/singleColumnLayout.dart +++ b/flutter_samples/flutter_layout_application/lib/layout/singleColumnLayout.dart @@ -1,6 +1,6 @@ import 'package:flutter/material.dart'; -import '../main.dart'; +import '../model/card_item.dart'; class SingleColumnLayout extends StatefulWidget { final CardItem cardItem; diff --git a/flutter_samples/flutter_layout_application/lib/layout/singleLayout.dart b/flutter_samples/flutter_layout_application/lib/layout/singleLayout.dart index 81264e1..f14eb64 100644 --- a/flutter_samples/flutter_layout_application/lib/layout/singleLayout.dart +++ b/flutter_samples/flutter_layout_application/lib/layout/singleLayout.dart @@ -1,6 +1,6 @@ import 'package:flutter/material.dart'; -import '../main.dart'; +import '../model/card_item.dart'; class SingleLayout extends StatelessWidget { final CardItem cardItem; // 新增参数 diff --git a/flutter_samples/flutter_layout_application/lib/layout/singleListViewBuilderLayout.dart b/flutter_samples/flutter_layout_application/lib/layout/singleListViewBuilderLayout.dart index ff273a4..888d00e 100644 --- a/flutter_samples/flutter_layout_application/lib/layout/singleListViewBuilderLayout.dart +++ b/flutter_samples/flutter_layout_application/lib/layout/singleListViewBuilderLayout.dart @@ -1,7 +1,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_layout_application/model/todo.dart'; -import '../main.dart'; +import '../model/card_item.dart'; class SingleListViewBuilderLayout extends StatefulWidget { final CardItem cardItem; // 新增参数 @@ -21,6 +21,31 @@ class _SingleListViewBuilderLayoutState ToDo(id: '3', title: '下班做饭'), ]; + // 处理复选框状态改变的方法 + void _handleCheckboxChange(ToDo item, bool? value) { + setState(() { + item.isDone = value ?? false; + }); + } + + // 构建单个 TODO 项的方法 + Widget _buildTodoItem(ToDo item) { + return Padding( + padding: const EdgeInsets.all(8), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Checkbox( + value: item.isDone, + onChanged: (value) => _handleCheckboxChange(item, value), + ), + Text(item.title), + Text(item.isDone ? '已完成' : '未完成'), + ], + ), + ); + } + @override Widget build(BuildContext context) { return Padding( @@ -33,24 +58,7 @@ class _SingleListViewBuilderLayoutState itemCount: items.length, itemBuilder: (context, idx) { var item = items[idx]; - return Padding( - padding: const EdgeInsets.all(8), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Checkbox( - value: item.isDone, - onChanged: (value) { - setState(() { - item.isDone = value ?? false; - }); - }, - ), - Text(item.title), - Text(item.isDone ? '已完成' : '未完成'), - ], - ), - ); + return _buildTodoItem(item); }, ), ), diff --git a/flutter_samples/flutter_layout_application/lib/layout/singleListViewLayout.dart b/flutter_samples/flutter_layout_application/lib/layout/singleListViewLayout.dart index da0f135..7446d96 100644 --- a/flutter_samples/flutter_layout_application/lib/layout/singleListViewLayout.dart +++ b/flutter_samples/flutter_layout_application/lib/layout/singleListViewLayout.dart @@ -1,6 +1,6 @@ import 'package:flutter/material.dart'; -import '../main.dart'; +import '../model/card_item.dart'; class SingleListViewLayout extends StatelessWidget { final CardItem cardItem; // 新增参数 diff --git a/flutter_samples/flutter_layout_application/lib/layout/singleListViewRowLayout.dart b/flutter_samples/flutter_layout_application/lib/layout/singleListViewRowLayout.dart index 50ff8ee..5187fb4 100644 --- a/flutter_samples/flutter_layout_application/lib/layout/singleListViewRowLayout.dart +++ b/flutter_samples/flutter_layout_application/lib/layout/singleListViewRowLayout.dart @@ -1,6 +1,6 @@ import 'package:flutter/material.dart'; -import '../main.dart'; +import '../model/card_item.dart'; class SingleListViewRowLayout extends StatelessWidget { final CardItem cardItem; // 新增参数 diff --git a/flutter_samples/flutter_layout_application/lib/layout/singleRowLayout.dart b/flutter_samples/flutter_layout_application/lib/layout/singleRowLayout.dart index cd6f57b..280686b 100644 --- a/flutter_samples/flutter_layout_application/lib/layout/singleRowLayout.dart +++ b/flutter_samples/flutter_layout_application/lib/layout/singleRowLayout.dart @@ -1,6 +1,6 @@ import 'package:flutter/material.dart'; -import '../main.dart'; +import '../model/card_item.dart'; class SingleRowLayout extends StatefulWidget { final CardItem cardItem; diff --git a/flutter_samples/flutter_layout_application/lib/main.dart b/flutter_samples/flutter_layout_application/lib/main.dart index 9ba6a44..0dcfb2a 100644 --- a/flutter_samples/flutter_layout_application/lib/main.dart +++ b/flutter_samples/flutter_layout_application/lib/main.dart @@ -1,31 +1,47 @@ import 'package:flutter/material.dart'; +import 'model/card_item.dart'; import 'preview_page.dart'; // 引入新页面 +import 'model/card_items_config.dart'; +// 定义应用的入口函数 void main() => runApp(const MyApp()); +// 抽离主题配置 +ThemeData buildAppTheme() { + return ThemeData( + colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrangeAccent), + ); +} + +// 抽离路由配置 +Map buildAppRoutes() { + return { + '/': (context) => const MyHomePage(title: 'Home Page'), + '/preview': + (context) => PreviewPage( + cardItem: ModalRoute.of(context)!.settings.arguments as CardItem, + ), // 修改为接收 CardItem 参数 + }; +} + +// 定义应用的根组件 class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { - const String title = 'Flutter Layout Demo'; + // 定义应用的标题 + const String appTitle = 'Flutter Layout Demo'; return MaterialApp( - title: title, - theme: ThemeData( - colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrangeAccent), - ), + title: appTitle, + theme: buildAppTheme(), initialRoute: '/', // 设置初始路由 - routes: { - '/': (context) => const MyHomePage(title: 'Home Page'), - '/preview': - (context) => PreviewPage( - cardItem: ModalRoute.of(context)!.settings.arguments as CardItem, - ), // 修改为接收 CardItem 参数 - }, + routes: buildAppRoutes(), ); } } +// 定义主页组件 class MyHomePage extends StatefulWidget { const MyHomePage({super.key, required this.title}); @@ -35,90 +51,18 @@ class MyHomePage extends StatefulWidget { State createState() => _MyHomePageState(); } +// 定义主页的状态类 class _MyHomePageState extends State { - String _selectedCategory = '首页'; // 默认选中首页 - List _cardItems = [ - CardItem(title: 'single', content: '基础 layout', key: 'single'), - CardItem(title: 'single_row_layout', content: '简单横向布局', key: 'row_layout'), - CardItem( - title: 'single_column_layout', - content: '简单纵向布局', - key: 'column_layout', - ), - CardItem( - title: 'listtitle_layout', - content: '简单列表布局', - key: 'listtitle_layout', - ), - CardItem( - title: 'listview_row_layout', - content: '简单横向列表布局', - key: 'listview_row_layout', - ), - CardItem( - title: 'listview_builder_layout', - content: 'listview builder 布局', - key: 'listview_builder_layout', - ), - ]; + // 默认选中的分类 + String _selectedCategory = '首页'; + // 根据分类获取的卡片列表 + List _cardItems = getCardItemsByCategory('首页'); + // 处理分类选择事件 void _onCategorySelected(String category) { setState(() { _selectedCategory = category; - // 根据选中的类别加载不同的卡片数据 - switch (category) { - case '首页': - _cardItems = [ - CardItem(title: 'single', content: '基础 layout', key: 'single'), - CardItem( - title: 'single_row_layout', - content: '简单横向布局', - key: 'row_layout', - ), - CardItem( - title: 'single_column_layout', - content: '简单纵向布局', - key: 'column_layout', - ), - CardItem( - title: 'listview_layout', - content: '简单列表布局', - key: 'listview_layout', - ), - CardItem( - title: 'listview_row_layout', - content: '简单横向列表布局', - key: 'listview_row_layout', - ), - CardItem( - title: 'listview_builder_layout', - content: 'listview builder 布局', - key: 'listview_builder_layout', - ), - ]; - break; - case '设置': - _cardItems = [ - CardItem( - title: '设置卡片1', - content: '这是设置页面的第一张卡片的内容。', - key: 'setting-card1', - ), - ]; - break; - case '项目实战': - _cardItems = [ - CardItem( - title: '实战项目一', - content: '第一个实战项目', - key: 'column_layout_project', - ), - CardItem(title: '实战项目二', content: '简历实战', key: 'resume_project'), - ]; - break; - default: - _cardItems = []; - } + _cardItems = getCardItemsByCategory(category); }); } @@ -141,7 +85,7 @@ class _MyHomePageState extends State { ), ), ListTile( - leading: Icon(Icons.home), + leading: const Icon(Icons.home), title: const Text('首页'), onTap: () { _onCategorySelected('首页'); @@ -149,7 +93,7 @@ class _MyHomePageState extends State { }, ), ListTile( - leading: Icon(Icons.settings), + leading: const Icon(Icons.settings), title: const Text('设置'), onTap: () { _onCategorySelected('设置'); @@ -157,7 +101,7 @@ class _MyHomePageState extends State { }, ), ListTile( - leading: Icon(Icons.work_outline_outlined), + leading: const Icon(Icons.work_outline_outlined), title: const Text('项目实战'), onTap: () { _onCategorySelected('项目实战'); @@ -172,9 +116,8 @@ class _MyHomePageState extends State { children: [ GridView.builder( shrinkWrap: true, - physics: NeverScrollableScrollPhysics(), - gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent( - // 修改为 SliverGridDelegateWithMaxCrossAxisExtent + physics: const NeverScrollableScrollPhysics(), + gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent( maxCrossAxisExtent: 200.0, // 设置最大宽度限制 crossAxisSpacing: 16.0, mainAxisSpacing: 16.0, @@ -194,18 +137,18 @@ class _MyHomePageState extends State { child: Column( children: [ Padding( - padding: EdgeInsets.all(10.0), + padding: const EdgeInsets.all(10.0), child: Text( _cardItems[index].title, - style: TextStyle(fontSize: 18), + style: const TextStyle(fontSize: 18), textAlign: TextAlign.center, ), ), Padding( - padding: EdgeInsets.all(16.0), + padding: const EdgeInsets.all(16.0), child: Text( _cardItems[index].content, - style: TextStyle(fontSize: 16), + style: const TextStyle(fontSize: 16), textAlign: TextAlign.center, ), ), @@ -222,11 +165,3 @@ class _MyHomePageState extends State { ); } } - -class CardItem { - final String title; - final String content; - final String key; - - CardItem({required this.title, required this.content, required this.key}); -} diff --git a/flutter_samples/flutter_layout_application/lib/model/card_item.dart b/flutter_samples/flutter_layout_application/lib/model/card_item.dart new file mode 100644 index 0000000..b2a7d6d --- /dev/null +++ b/flutter_samples/flutter_layout_application/lib/model/card_item.dart @@ -0,0 +1,7 @@ +class CardItem { + final String title; + final String content; + final String key; + + CardItem({required this.title, required this.content, required this.key}); +} 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 new file mode 100644 index 0000000..e329d8e --- /dev/null +++ b/flutter_samples/flutter_layout_application/lib/model/card_items_config.dart @@ -0,0 +1,39 @@ +import 'card_item.dart'; + +Map> cardItemsConfig = { + '首页': [ + CardItem(title: 'single', content: '基础 layout', key: 'single'), + CardItem(title: 'single_row_layout', content: '简单横向布局', key: 'row_layout'), + CardItem( + title: 'single_column_layout', + content: '简单纵向布局', + key: 'column_layout', + ), + CardItem( + title: 'listtitle_layout', + content: '简单列表布局', + key: 'listtitle_layout', + ), + CardItem( + title: 'listview_row_layout', + content: '简单横向列表布局', + key: 'listview_row_layout', + ), + CardItem( + title: 'listview_builder_layout', + content: 'listview builder 布局', + key: 'listview_builder_layout', + ), + ], + '设置': [ + CardItem(title: '设置卡片1', content: '这是设置页面的第一张卡片的内容。', key: 'setting-card1'), + ], + '项目实战': [ + CardItem(title: '实战项目一', content: '第一个实战项目', key: 'column_layout_project'), + CardItem(title: '实战项目二', content: '简历实战', key: 'resume_project'), + ], +}; + +List getCardItemsByCategory(String category) { + return cardItemsConfig[category] ?? []; +} diff --git a/flutter_samples/flutter_layout_application/lib/preview_page.dart b/flutter_samples/flutter_layout_application/lib/preview_page.dart index be6d7bc..d4b6fd9 100644 --- a/flutter_samples/flutter_layout_application/lib/preview_page.dart +++ b/flutter_samples/flutter_layout_application/lib/preview_page.dart @@ -7,7 +7,7 @@ import 'package:flutter_layout_application/layout/singleListViewBuilderLayout.da 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 'main.dart'; // 引入 CardItem 类 +import 'model/card_item.dart'; // 引入 CardItem 类 class PreviewPage extends StatelessWidget { final CardItem cardItem; // 新增参数 -- Gitee