在 flutter 中使用用戶輸入（行和列）創建 Gridview

Question

我們如何使用用戶輸入創建 Gridview？ 允許用戶輸入行數和列數。

Answer 1

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")))
        ],
      ),
    );
  }
}

Answer 2

您可以使用 GridView.builder 來實現您的要求。

GridView.builder(
          shrinkWrap: true,
          itemCount: (rowCount * ColumnCount),
          gridDelegate:
              SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: ColumnCount),
          itemBuilder: (context, index) {
            return Container(
              child: Text(index.toString()),
            );
          },  );

1. 您必須刷新小部件的每個用戶輸入。