使用flutter中的用户输入(行和列)创建Gridview_CTE创建基于输入的递归动态行和列_在flutter中如何在datatable中创建动态列和行(根据数据列) - 腾讯云开发者社区

使用flutter中的用户输入(行和列)创建Gridview

基础概念

Flutter 是一个用于构建跨平台移动应用的 UI 工具包。它允许开发者使用单一代码库来创建在 iOS 和 Android 上都能运行的应用。GridView 是 Flutter 中的一个布局组件，用于显示二维网格布局。

类型

固定列数：每行有固定数量的列。
固定行数：每列有固定数量的行。
可滚动：当内容超出屏幕时，可以滚动查看。

应用场景

商品展示：在电商应用中展示商品列表。
图片墙：在社交媒体应用中展示用户上传的图片。
网格布局：在设置界面中展示各种选项。

示例代码

以下是一个使用 Flutter 创建 GridView 的示例代码，根据用户输入的行和列动态生成网格布局：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Dynamic GridView'),
        ),
        body: GridViewExample(),
      ),
    );
  }
}

class GridViewExample extends StatefulWidget {
  @override
  _GridViewExampleState createState() => _GridViewExampleState();
}

class _GridViewExampleState extends State<GridViewExample> {
  int rows = 3;
  int columns = 3;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Padding(
          padding: const EdgeInsets.all(16.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    rows++;
                  });
                },
                child: Text('Add Row'),
              ),
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    columns++;
                  });
                },
                child: Text('Add Column'),
              ),
            ],
          ),
        ),
        Expanded(
          child: GridView.builder(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: columns,
              mainAxisSpacing: 10.0,
              crossAxisSpacing: 10.0,
            ),
            itemCount: rows * columns,
            itemBuilder: (context, index) {
              return Container(
                color: Colors.blue[100],
                child: Center(
                  child: Text(
                    'Item $index',
                    style: TextStyle(fontSize: 16),
                  ),
                ),
              );
            },
          ),
        ),
      ],
    );
  }
}