问题描述
我们如何使用用户输入创建 Gridview?允许用户输入行数和列数。
解决方法
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,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")))
],);
}
}
,
您可以使用 GridView.builder 来实现您的要求。
GridView.builder(
shrinkWrap: true,itemCount: (rowCount * ColumnCount),gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: ColumnCount),index) {
return Container(
child: Text(index.toString()),);
},);
- 您必须刷新小部件的每个用户输入。