flutter gridview

### Flutter 中 GridView 的基本用法 #### 1. 使用 `GridView.count` 创建固定数量的网格布局 `GridView.count` 是一种简单的实现方式，适用于已知子项总数的情况。以下是基于引用[^1]的一个简单示例： ```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData(primarySwatch: Colors.blue), home: MyHomePage(), ); } } class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('GridView Count Example')), body: GridView.count( crossAxisCount: 3, // 每行显示三个项目 children: List.generate(9, (index) { return Card( child: Center(child: Text('Item ${index + 1}')), ); }), ), ); } } ``` 此代码展示了如何使用 `crossAxisCount` 来设置每行的列数，并通过 `List.generate` 方法生成固定的子项。 --- #### 2. 动态加载数据：`GridView.builder` 当需要处理大量数据或者动态加载时，推荐使用 `GridView.builder`。这种方式不会一次性渲染所有子项，而是按需懒加载，从而提高性能[^2]。 ```dart import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Dynamic Grid View', theme: ThemeData(primarySwatch: Colors.green), home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { final List<String> items = List.generate(50, (i) => "Item $i"); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Dynamic GridView Builder')), body: GridView.builder( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2), // 每行列数为2 itemCount: items.length, itemBuilder: (context, index) { return Card( child: Padding( padding: const EdgeInsets.all(8.0), child: Text(items[index]), ), ); }, ), ); } } ``` 在此示例中，`SliverGridDelegateWithFixedCrossAxisCount` 定义了每一行的列数，而 `itemBuilder` 则负责动态构建每个子项的内容。 --- #### 3. 自定义样式与资源加载 如果希望在网格中加载本地图片或其他资源，可以通过 `Image.asset` 或者网络图片的方式完成。以下是一个结合图片和文字的例子[^4]： ```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Custom GridView with Images', theme: ThemeData(primarySwatch: Colors.red), home: MyHomePage(), ); } } class MyHomePage extends StatelessWidget { final List<Map<String, dynamic>> data = [ {'title': 'Apple', 'imagePath': 'assets/images/apple.png'}, {'title': 'Banana', 'imagePath': 'assets/images/banana.png'}, {'title': 'Cherry', 'imagePath': 'assets/images/cherry.png'} ]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Custom GridView')), body: GridView.builder( gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(maxCrossAxisExtent: 200), itemCount: data.length, itemBuilder: (context, index) { return Card( elevation: 4, child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Expanded( child: Image.asset(data[index]['imagePath'], fit: BoxFit.cover), ), SizedBox(height: 8), Text(data[index]['title']), ], ), ); }, ), ); } } ``` 注意：为了使上述代码正常运行，需要先在项目的 `pubspec.yaml` 文件中声明资源路径。 ```yaml flutter: assets: - assets/images/ ``` --- #### 4. 高级属性解析 除了常见的参数外，还有一些高级选项可以帮助开发者更好地控制行为: - **`scrollDirection`**: 默认垂直滚动 (`Axis.vertical`)，也可以改为水平滚动 (`Axis.horizontal`)。 - **`reverse`**: 如果设为 true，则会反转整个列表的方向。 - **`controller`**: 提供对滚动位置的手动控制能力。 - **`physics`**: 控制滚动效果的行为（如禁用手势滑动）。 例如，下面是如何启用水平滚动并添加自定义物理特性的例子： ```dart body: GridView.builder( scrollDirection: Axis.horizontal, physics: BouncingScrollPhysics(), // 添加回弹效果 ... ); ``` --- ### 总结 以上介绍了三种主要的 `GridView` 构建方式及其常见应用场景。无论是静态还是动态的数据源都可以轻松适配到网格布局之中。同时，合理利用其扩展属性能够进一步提升用户体验。