From 3876a0f30e7a8d086c60f4cb94bc538cb4ec026a Mon Sep 17 00:00:00 2001 From: Gorit Date: Tue, 25 Mar 2025 17:18:46 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E5=9F=BA=E7=A1=80=E5=88=97?= =?UTF-8?q?=E8=A1=A8=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../layout/singleListViewBuilderLayout.dart | 0 .../lib/layout/singleListViewLayout.dart | 29 +++++++++++++++++ .../lib/layout/singleListViewRowLayout.dart | 31 +++++++++++++++++++ .../flutter_layout_application/lib/main.dart | 20 ++++++++++++ .../lib/model/todo.dart | 7 +++++ .../lib/preview_page.dart | 6 ++++ 6 files changed, 93 insertions(+) create mode 100644 flutter_samples/flutter_layout_application/lib/layout/singleListViewBuilderLayout.dart create mode 100644 flutter_samples/flutter_layout_application/lib/layout/singleListViewLayout.dart create mode 100644 flutter_samples/flutter_layout_application/lib/layout/singleListViewRowLayout.dart create mode 100644 flutter_samples/flutter_layout_application/lib/model/todo.dart diff --git a/flutter_samples/flutter_layout_application/lib/layout/singleListViewBuilderLayout.dart b/flutter_samples/flutter_layout_application/lib/layout/singleListViewBuilderLayout.dart new file mode 100644 index 0000000..e69de29 diff --git a/flutter_samples/flutter_layout_application/lib/layout/singleListViewLayout.dart b/flutter_samples/flutter_layout_application/lib/layout/singleListViewLayout.dart new file mode 100644 index 0000000..da0f135 --- /dev/null +++ b/flutter_samples/flutter_layout_application/lib/layout/singleListViewLayout.dart @@ -0,0 +1,29 @@ +import 'package:flutter/material.dart'; + +import '../main.dart'; + +class SingleListViewLayout extends StatelessWidget { + final CardItem cardItem; // 新增参数 + + const SingleListViewLayout({super.key, required this.cardItem}); + + @override + Widget build(BuildContext context) { + return Padding( + padding: const EdgeInsets.all(8.0), + child: Column( + children: [ + Text("基本列表 ListTitle"), + Column( + spacing: 20, + children: [ + ListTile(leading: Icon(Icons.map), title: Text('Map')), + ListTile(leading: Icon(Icons.photo_album), title: Text('Album')), + ListTile(leading: Icon(Icons.phone), title: Text('Phone')), + ], + ), + ], + ), + ); + } +} diff --git a/flutter_samples/flutter_layout_application/lib/layout/singleListViewRowLayout.dart b/flutter_samples/flutter_layout_application/lib/layout/singleListViewRowLayout.dart new file mode 100644 index 0000000..50ff8ee --- /dev/null +++ b/flutter_samples/flutter_layout_application/lib/layout/singleListViewRowLayout.dart @@ -0,0 +1,31 @@ +import 'package:flutter/material.dart'; + +import '../main.dart'; + +class SingleListViewRowLayout extends StatelessWidget { + final CardItem cardItem; // 新增参数 + + const SingleListViewRowLayout({super.key, required this.cardItem}); + + @override + Widget build(BuildContext context) { + return Padding( + padding: const EdgeInsets.all(8.0), + child: Center( + child: ListView( + // This next line does the trick. + scrollDirection: Axis.horizontal, + children: [borderedImage(), borderedImage()], + ), + ), + ); + } + + Widget borderedImage() { + return SizedBox( + width: 200, + height: 200, + child: Card(child: Image.asset('images/lake.jpg', fit: BoxFit.cover)), + ); + } +} diff --git a/flutter_samples/flutter_layout_application/lib/main.dart b/flutter_samples/flutter_layout_application/lib/main.dart index 38c1c2b..d9011ec 100644 --- a/flutter_samples/flutter_layout_application/lib/main.dart +++ b/flutter_samples/flutter_layout_application/lib/main.dart @@ -45,6 +45,16 @@ class _MyHomePageState extends State { content: '简单纵向布局', key: 'column_layout', ), + CardItem( + title: 'listtitle_layout', + content: '简单列表布局', + key: 'listtitle_layout', + ), + CardItem( + title: 'listview_row_layout', + content: '简单横向列表布局', + key: 'listview_row_layout', + ), ]; void _onCategorySelected(String category) { @@ -65,6 +75,16 @@ class _MyHomePageState extends State { content: '简单纵向布局', key: 'column_layout', ), + CardItem( + title: 'listview_layout', + content: '简单列表布局', + key: 'listview_layout', + ), + CardItem( + title: 'listview_row_layout', + content: '简单横向列表布局', + key: 'listview_row_layout', + ), ]; break; case '设置': diff --git a/flutter_samples/flutter_layout_application/lib/model/todo.dart b/flutter_samples/flutter_layout_application/lib/model/todo.dart new file mode 100644 index 0000000..ec8cdf5 --- /dev/null +++ b/flutter_samples/flutter_layout_application/lib/model/todo.dart @@ -0,0 +1,7 @@ +class ToDo { + final String id; + final String title; + final bool isDone; + + ToDo({required this.id, required this.title, this.isDone = false}); +} diff --git a/flutter_samples/flutter_layout_application/lib/preview_page.dart b/flutter_samples/flutter_layout_application/lib/preview_page.dart index 9f3cd76..be1b57c 100644 --- a/flutter_samples/flutter_layout_application/lib/preview_page.dart +++ b/flutter_samples/flutter_layout_application/lib/preview_page.dart @@ -2,6 +2,8 @@ import 'package:flutter/material.dart'; import 'package:flutter_layout_application/layout/project/columnLayoutProject.dart'; import 'package:flutter_layout_application/layout/singleColumnLayout.dart'; import 'package:flutter_layout_application/layout/singleLayout.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 'main.dart'; // 引入 CardItem 类 @@ -30,6 +32,10 @@ class PreviewPage extends StatelessWidget { return SingleRowLayout(cardItem: cardItem); } else if (cardItem.key == 'column_layout') { return SingleColumnLayout(cardItem: cardItem); + } else if (cardItem.key == 'listtitle_layout') { + return SingleListViewLayout(cardItem: cardItem); + } else if (cardItem.key == 'listview_row_layout') { + return SingleListViewRowLayout(cardItem: cardItem); } else { return Text(cardItem.content); // 根据需求调整逻辑 } -- Gitee From a5d45988db1097938a368899bbda2d08477edeea Mon Sep 17 00:00:00 2001 From: Gorit Date: Wed, 26 Mar 2025 16:25:04 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20listview=5Fbui?= =?UTF-8?q?lder=20=E4=BD=BF=E7=94=A8=E7=A4=BA=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...04\346\226\231\346\225\264\347\220\206.md" | 1 + .../layout/singleListViewBuilderLayout.dart | 61 +++++++++++++++++++ .../flutter_layout_application/lib/main.dart | 10 +++ .../lib/model/todo.dart | 2 +- .../lib/preview_page.dart | 3 + 5 files changed, 76 insertions(+), 1 deletion(-) diff --git "a/Flutter \345\274\200\345\217\221\350\265\204\346\226\231\346\225\264\347\220\206.md" "b/Flutter \345\274\200\345\217\221\350\265\204\346\226\231\346\225\264\347\220\206.md" index 9fd4df8..976077a 100644 --- "a/Flutter \345\274\200\345\217\221\350\265\204\346\226\231\346\225\264\347\220\206.md" +++ "b/Flutter \345\274\200\345\217\221\350\265\204\346\226\231\346\225\264\347\220\206.md" @@ -97,6 +97,7 @@ 2. [Flutter layout 练习](https://docs.flutter.cn/ui/layout/tutorial) 3. [Flutter Codelabs](https://docs.flutter.cn/codelabs) 4. [Flutter cookbook](https://docs.flutter.cn/cookbook) +5. [Flutter 实战 2](https://book.flutterchina.club/) ### 三、Flutter 社区 diff --git a/flutter_samples/flutter_layout_application/lib/layout/singleListViewBuilderLayout.dart b/flutter_samples/flutter_layout_application/lib/layout/singleListViewBuilderLayout.dart index e69de29..ff273a4 100644 --- a/flutter_samples/flutter_layout_application/lib/layout/singleListViewBuilderLayout.dart +++ b/flutter_samples/flutter_layout_application/lib/layout/singleListViewBuilderLayout.dart @@ -0,0 +1,61 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_layout_application/model/todo.dart'; + +import '../main.dart'; + +class SingleListViewBuilderLayout extends StatefulWidget { + final CardItem cardItem; // 新增参数 + + const SingleListViewBuilderLayout({super.key, required this.cardItem}); + + @override + _SingleListViewBuilderLayoutState createState() => + _SingleListViewBuilderLayoutState(); +} + +class _SingleListViewBuilderLayoutState + extends State { + List items = [ + ToDo(id: '1', title: '吃早饭'), + ToDo(id: '2', title: '代码 bug Fix'), + ToDo(id: '3', title: '下班做饭'), + ]; + + @override + Widget build(BuildContext context) { + return Padding( + padding: const EdgeInsets.all(8.0), + child: Column( + children: [ + Text("基本列表 ListBuilder"), + Expanded( + child: ListView.builder( + 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 ? '已完成' : '未完成'), + ], + ), + ); + }, + ), + ), + ], + ), + ); + } +} diff --git a/flutter_samples/flutter_layout_application/lib/main.dart b/flutter_samples/flutter_layout_application/lib/main.dart index d9011ec..8fd02e3 100644 --- a/flutter_samples/flutter_layout_application/lib/main.dart +++ b/flutter_samples/flutter_layout_application/lib/main.dart @@ -55,6 +55,11 @@ class _MyHomePageState extends State { content: '简单横向列表布局', key: 'listview_row_layout', ), + CardItem( + title: 'listview_builder_layout', + content: 'listview builder 布局', + key: 'listview_builder_layout', + ), ]; void _onCategorySelected(String category) { @@ -85,6 +90,11 @@ class _MyHomePageState extends State { content: '简单横向列表布局', key: 'listview_row_layout', ), + CardItem( + title: 'listview_builder_layout', + content: 'listview builder 布局', + key: 'listview_builder_layout', + ), ]; break; case '设置': diff --git a/flutter_samples/flutter_layout_application/lib/model/todo.dart b/flutter_samples/flutter_layout_application/lib/model/todo.dart index ec8cdf5..6c98a5a 100644 --- a/flutter_samples/flutter_layout_application/lib/model/todo.dart +++ b/flutter_samples/flutter_layout_application/lib/model/todo.dart @@ -1,7 +1,7 @@ class ToDo { final String id; final String title; - final bool isDone; + bool isDone; ToDo({required this.id, required this.title, this.isDone = false}); } diff --git a/flutter_samples/flutter_layout_application/lib/preview_page.dart b/flutter_samples/flutter_layout_application/lib/preview_page.dart index be1b57c..0cbaed5 100644 --- a/flutter_samples/flutter_layout_application/lib/preview_page.dart +++ b/flutter_samples/flutter_layout_application/lib/preview_page.dart @@ -2,6 +2,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_layout_application/layout/project/columnLayoutProject.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'; @@ -36,6 +37,8 @@ class PreviewPage extends StatelessWidget { return SingleListViewLayout(cardItem: cardItem); } else if (cardItem.key == 'listview_row_layout') { return SingleListViewRowLayout(cardItem: cardItem); + } else if (cardItem.key == 'listview_builder_layout') { + return SingleListViewBuilderLayout(cardItem: cardItem); } else { return Text(cardItem.content); // 根据需求调整逻辑 } -- Gitee