Flutter-将动态生成的元素与硬编码的元素组合 [英] Flutter - Combine dynamically generated elements with hard-coded ones
问题描述
我基本上是在创建一个动态生成网格的游戏。它创建切片并将其添加到列表中,并将该列表用作children参数的参数。但是,我发现困难在于将其与固定的小部件结合使用。
I'm basically creating a game where a grid is getting generated dynamically. It creates the tiles, adds them to a list and uses that list as an argument for the children parameter. What I find difficult however is combining it with fixed widgets.
让我们在所有内容之上说一个文本元素。我现在遇到的问题是,如果分配这样的动态生成的内容:
Let's say on top of everything, I want a text element. The problem I now encounter is that if I assign my dynamically generated content like this:
...
children: mycontent,
...
然后我无处可放我的硬编码小部件。我希望你明白我的意思。到目前为止,我已经解决了这一问题,方法是创建一个大型列表并复制动态生成的元素,然后添加我的硬编码小部件:
then I have nowhere to put my hard coded widgets. I hope you know what I mean. Until now, I have solved it by creating a larget list and copying the dynamically generated elements over, and afterwards adding my hard-coded widgets:
Widget buildTile(int counter) {
return new GestureDetector(
onTap: (){
setState((){
toggleColor(counter);
});
},
child: new Container(
color: colors[counter],
foregroundDecoration: new BoxDecoration(
border: new Border(),
),
width: 75.0,
height: 75.0,
margin: new EdgeInsets.all(2.0),
)
);
}
List<Widget> buildGrid(){
Map dimensions = {"width" : 4, "height" : 6};
List<Widget> grid = new List<Widget>(dimensions["height"]);
List<Widget> tiles = [];
int counter = 0;
for (int i = 0; i < dimensions["height"]; i++){
tiles = [];
for (int j = 0; j < dimensions["width"]; j++){
tiles.add(buildTile(counter));
counter++;
}
grid[i] = new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: tiles,
);
}
return grid;
}
List<Widget> copyElements(List<Widget> from){
List<Widget> to = [];
for (int i = 0; i < from.length; i++){
to.add(from[i]);
}
return to;
}
List<Widget> buildPlayground(List<Widget> grid){
List<Widget> playground = [];
playground = copyElements(grid);
playground.add(new Padding(
padding: new EdgeInsets.all(20.0),
child: new RaisedButton(
color: Colors.purple,
child: new Container(
width: 100.0,
child: new Center(
child: new Text("Done", style: new TextStyle(fontSize: 20.0)),
),
),
onPressed: (){
}
),
));
return playground;
}
@override
build(BuildContext context){
return new Scaffold(
appBar: new AppBar(
title: new Text("Game"),
),
body: new Container(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: buildPlayground(buildGrid()),
)
),
);
}
这有点用,但是一旦我弄清楚我就很乏味想要添加另一个硬编码的小部件。关于如何解决此问题的任何建议?
谢谢
It kinda works, but is very tedious as soon as I figure out that I want to add another hard coded widget. Any suggestions for how I can address this problem? Thanks
推荐答案
我想这是可行的方法,但是您可以使用 GridView 小部件,您可以创建 TileWidget
代替您的 buildTile
函数。使用 GridView
应该可以清除代码,但是硬编码小部件是什么意思?
I guess this is the way to go, however you could use the GridView widget, and you could create a TileWidget
instead of you buildTile
function. Using GridView
should clean your code, but what do you mean by hard-coded widgets ?
这篇关于Flutter-将动态生成的元素与硬编码的元素组合的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!