簡體   English   中英

如何使用 flutter 中的用戶輸入創建 gridview?

[英]How to create gridview with user input in flutter?

我為用戶輸入的行和列添加了文本字段,現在我應該在按鈕的集合 state 中指定什么,以便在單擊時,它會根據行和列用戶輸入更改網格。

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

  int rowC = 2;
  int colC = 2;
.
.
Container(
                height: 300,
                child: Container(
                  padding: EdgeInsets.all(10),
                  child: GridView.builder(
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: rowC,childAspectRatio: colC*rowC/2 ,crossAxisSpacing: 10,mainAxisSpacing: 10),
                    itemCount: 2,
                    itemBuilder: (ctx,index){
                      return Container(
                        margin: EdgeInsets.all(10),
                        child: RaisedButton(
                          onPressed: (){}
                            );
                          },
                          color: Colors.blue,
                          child: Text(index.toString()),
                        ),
             Card(
               elevation: 5,
               child: Container(
                 padding: EdgeInsets.all(10),
                 child: Column(
                   crossAxisAlignment: CrossAxisAlignment.end,
                 children: <Widget>[
                   TextField(
                     controller: row,
                     decoration: InputDecoration(labelText: 'Row'),
                   ),
                   TextField(
                     controller: column,
                     decoration: InputDecoration(labelText: 'Column'),
                   ),
                   FlatButton(onPressed: (){
                     rowC = int.parse(row.text);
                     colC = int.parse(column.text);
                     setState(() {  
                     });
                   },
                       child: Text('Add'))
                 ],
         
 

在此處輸入圖像描述

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM