我是Flutter的初学者,我需要做一个循环并生成一个包含仅2列行的小部件。
我尝试了太多不同的方法来做到这一点,但没有任何效果:/
当我在诸如for (var i = 0; i < p1.length-1; i+2)
之类的代码中添加一个循环时,屏幕上什么都没有显示,并且全部变成白色。
这是我正在使用的代码:
class _MapPageState extends State<MapPage> {
var p1= [
"A0",
"A1",
"A2",
"A3",
];
List<Widget> getWidgets()
{
List<Widget> list = new List<Widget>();
for(var i = 0; i < p1.length-1; i+2){
list.add(new Container(
decoration: BoxDecoration(
color: Colors.green,
borderRadius:BorderRadius.circular(20.0)
),
child: FlatButton(
child: Text(p1[i].toString(),style: TextStyle(color: Colors.white),),
onPressed:()=>print('hii1'),
),
),);
list.add(new Container(
decoration: BoxDecoration(
color: Colors.green,
borderRadius:BorderRadius.circular(20.0)
),
child: FlatButton(
child: Text(p1[i+1].toString(),style: TextStyle(color: Colors.white),),
onPressed:()=>print('hii2'),
),
),);
}
return list;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.transparent,
centerTitle: true,
title: Text("Votre SMARTY PARK"),
),
body:Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('https://images.wallpaperscraft.com/image/parking_cars_underground_131454_240x320.jpg'),
fit: BoxFit.cover,
),),
child: ListView(
scrollDirection: Axis.vertical,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 80),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: getWidgets()
),
),
],
),
)
);
}
}
希望任何人都可以帮助我尝试3天。
谢谢
答案 0 :(得分:0)
不是将两个Container
添加到list
,而是将包含两个Row
的{{1}}添加到列表。
此外,您可能应该将Container
中的Row
更改为ListView
请参考以下代码:
(我只是从您的代码中复制了一些内容,有很多更改,因此请仔细进行。您必须进行更改以使其看起来更整洁并具有正确的名称,等等。)
Column
答案 1 :(得分:0)
您的方法应返回行列表。您可以使用此方法
List<Row> getWidgets()
{
List<Row> list = new List<Row>();
for(var i = 0; i < p1.length-1; i+=2){
list.add(Row(
mainAxisAlignment:MainAxisAlignment.spaceAround,
children:[
Container(
decoration: BoxDecoration(
color: Colors.green,
borderRadius:BorderRadius.circular(20.0)
),
child: FlatButton(
child: Text(p1[i].toString(),
style: TextStyle(
color: Colors.white
),
),
onPressed:()=>print('hii1'),
),
),
Container(
decoration: BoxDecoration(
color: Colors.green,
borderRadius:BorderRadius.circular(20.0)
),
child: FlatButton(
child: Text(p1[i+1].toString(),
style: TextStyle(
color: Colors.white
),
),
onPressed:()=>print('hii2'),
),
),
]
);
);
}
return list;
}
然后,您可以使用列表视图从build()
调用它。
ListView(
scrollDirection: Axis.vertical,
children:getWidgets()
),