flutter 如何通过数组传递的不同数据多次自动创建小部件?

kx5bkwkv  于 2023-05-19  发布在  Flutter
关注(0)|答案(3)|浏览(187)

比如说
有一个叫做TestButton的Widget:

class TestButton extends StatelessWidget {
  final Function x;
  final String text;
  TestButton(this.x,this.text);
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: x,
      child: Text(
       text,
       style: TextStyle(fontSize: 28),
      ),
   );
 }
}

而不是写:

TestButton(increaseCounter,'text1');
TestButton(increaseCounter,'text2');
TestButton(increaseCounter,'text3');

要创建3个带文本的按钮,请执行以下操作:text1、text2、text3
如何让flutter从数组中读取数据,创建与数组中的元素一样多的按钮,并将每个元素的数据作为第二个位置参数传递。

var a=['test1','test2','test3'];//array example
nwlls2ji

nwlls2ji1#

试试这个

Column(
children:[
     for(int i=0;i<a.length;i++)
     TestButton(increaseCounter,a[i])
    ],
 )

或者

Column (
children: a.map((txt)=>TestButton(increaseCounter,txt)).toList()
)
pvcm50d1

pvcm50d12#

你应该使用ListView.builder。就像这样:

ListView.builder(
        shrinkWrap: true,
        physics: ScrollPhysics(),
        itemCount: a.length,
        itemBuilder: (context,index){
          return TestButton(increaseCounter,a[index]);
        },

      )
mcdcgff0

mcdcgff03#

你也可以使用List.generate多次生成一个小部件,然后将List作为子项添加到Column、Stack等。
示例:

Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: List.generate(3, (index) => InkWell(
                onTap: () => changeState(index2),
                child: SizedBox(
                  height: 100,
                  width: 100,
                  child: Card(
                    color: Colors.pink,
                    child: Center(child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text("Cell",
                          style: TextStyle(fontSize: 22),),
                        Text("${index+1}",
                          style: TextStyle(fontSize: 22),),
                      ],
                    )),
                  ),
                ),
              ),
              )
      ),

注意:请确保不要将List添加为“childen:[ List.generate...]”这可能给予出错。
使用“childen:List.generate...”

相关问题