Flutter响应式交错网格布局插件responsive_staggered_grid的使用

特性

帮助您实现响应式的字段视图。

开始使用

在开始之前，请确保已将responsive_staggered_grid包添加到您的pubspec.yaml文件中：

dependencies:
  responsive_staggered_grid: ^版本号

然后运行以下命令以安装依赖项：

flutter pub get

使用方法

以下是使用responsive_staggered_grid构建响应式交错网格布局的完整示例：

import 'package:flutter/material.dart';
import 'package:responsive_staggered_grid/responsive_staggered_grid.dart';

class MyFormPage extends StatelessWidget {
  final FormController controller = FormController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('响应式交错网格布局示例'),
      ),
      body: Form(
        key: controller.formKey,
        child: SingleChildScrollView(
          child: ResponsiveStaggeredGrid.count(
            crossAxisCount: 120, // 默认列数为120
            contentPadding: const EdgeInsets.all(10),
            mainAxisSpacing: 10,
            crossAxisSpacing: 10,
            children: [
              ResponsiveStaggeredGridTile.fit(
                crossAxisCellCount: const ResponsiveInt(s: 120, m: 60, l: 40), // 在不同屏幕尺寸下调整列数
                child: TextFormField(
                  controller: controller.nameAr,
                  decoration: InputDecoration(
                    labelText: '姓名',
                    prefixIcon: const Icon(Icons.person),
                  ),
                  validator: (value) {
                    value ??= "";

                    if (value.length < 4) return "请输入超过3个字符";
                    return null;
                  },
                ),
              ),

              ResponsiveStaggeredGridTile.fit(
                crossAxisCellCount: const ResponsiveInt(s: 120, m: 60, l: 40),
                child: DropdownButtonFormField<int>(
                  value: controller.typeId.value,
                  items: [
                    for (final type in AccountTypeTable.find().rows)
                      DropdownMenuItem<int>(
                        value: type.id,
                        child: Text(type.name),
                      )
                  ],
                  onChanged: (value) {
                    controller.typeId.value = value;
                  },
                  decoration: InputDecoration(
                    labelText: '类型',
                    prefixIcon: const Icon(Icons.person),
                  ),
                  validator: (value) {
                    if (value == null) return "请选择一个账户类型";
                    return null;
                  },
                ),
              ),

              ResponsiveStaggeredGridTile.fit(
                crossAxisCellCount: const ResponsiveInt(s: 120, m: 60, l: 40),
                child: MoneyFormField(
                  controller: controller.price,
                  mode: TextFormMode.windowForm,
                  decoration: InputDecoration(
                    labelText: '价格',
                    prefixIcon: SvgIcon.container(AppAssets.svgs.coins),
                  ),
                ),
              ),

              ResponsiveStaggeredGridTile.fit(
                crossAxisCellCount: const ResponsiveInt(s: 120, m: 60, l: 40),
                child: TextFormField(
                  controller: controller.description,
                  decoration: InputDecoration(
                    labelText: '描述',
                    prefixIcon: const Icon(Icons.description),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// 模拟控制器类
class FormController {
  final formKey = GlobalKey<FormState>();
  final nameAr = TextEditingController();
  final typeId = ValueNotifier<int>(0);
  final price = TextEditingController();
  final description = TextEditingController();
}