首页 > 解决方案 > 在颤动中使用用户输入(行和列)创建 Gridview

问题描述

我们如何使用用户输入创建 Gridview?允许用户输入行数和列数。 图像

标签: flutterdartgridviewwidget

解决方案


在此处输入图像描述

class Class extends StatefulWidget {
  @override
  _ClassState createState() => _ClassState();
}

class _ClassState extends State<Class> {

  TextEditingController row = TextEditingController();
  TextEditingController column = TextEditingController();

  int rowC = 2;
  int colC = 2;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            height: 500,
            child: GridView.builder(
              itemCount: colC * rowC,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: rowC,childAspectRatio: colC*rowC/2 ,crossAxisSpacing: 10,mainAxisSpacing: 10),
              shrinkWrap: true,
              itemBuilder: (context, index) => Container(
                color: Colors.greenAccent,
              ),
            ),
          ),
          Text("Row"),
          TextField(
            controller: row,
          ),
          SizedBox(height: 20,),
          Text("Column"),
          TextField(
            controller: column,
          ),
          SizedBox(height: 20,),
          FlatButton(onPressed: (){
            rowC = int.parse(row.text);
            colC = int.parse(column.text);
            setState(() {

            });
          }, child: Container(
            color: Colors.purple,
              padding: EdgeInsets.all(20),
              child: Text("Add")))
        ],
      ),
    );
  }
}

推荐阅读