flutter_staggered_grid_view 网格布局

361 阅读1分钟

flutter_staggered_grid_view 是一个Flutter包,用于创建交错的网格布局。以下是如何使用该包创建一个简单的交错网格视图的示例代码:

首先,在你的 pubspec.yaml 文件中添加依赖

dependencies:
  flutter:
    sdk: flutter
  flutter_staggered_grid_view: ^0.3.0
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Staggered Grid View Example'),
        ),
        body: StaggeredGridView.count(
          crossAxisCount: 4,
          mainAxisSpacing: 4.0,
          crossAxisSpacing: 4.0,
          padding: const EdgeInsets.all(4),
          children: const <Widget>[
            StaggeredGridView.count(
              crossAxisCount: 4,
              mainAxisSpacing: 4.0,
              crossAxisSpacing: 4.0,
              padding: EdgeInsets.all(4),
              children: <Widget>[
                // ... 填充你的子Widget
              ],
            ),
          ],
        ),
      ),
    );
  }
}